⚠️ Mobile is not supported yet.
Search for a command to run...
A modern UI component library built with React and TailwindCSS to help you build beautiful and accessible web applications faster.
An accessible Base UI accordion with controlled and uncontrolled state, four visual variants, interruptible disclosure transitions, and reduced-motion support.
A keyboard-accessible calendar heatmap with normalized intensity levels and an interruptible shared focus surface.
A composable, accessible dialog modal built on Base UI with controlled state, direction-aware enter and exit motion, and reduced-motion support.
A composable, accessible dropdown menu built on Base UI with controlled state, interruptible hover highlighting, and origin-aware enter motion.
An interactive iOS-style squish switch built on Base UI Switch primitives, with interruptible press feedback and a shared feedback spring.
An accessible horizontal tab selector built on Base UI with controlled state, keyboard navigation, disabled items, and a pointer-only shared hover indicator.
A recording-friendly avatar strip with count-aware pacing, deterministic sampling, staggered lanes, and reduced-motion support.
The `BubbleUpButton` component provides an interactive button with a fluid "bubble-up" animation effect when hovered. It creates an engaging user experience with minimal effort.
A simple action button with subtle press feedback and reduced-motion support.
A circular dock menu with controlled state, keyboard dismissal, item callbacks, outside-click handling, and reduced-motion support.
Animated multi-color dots orbiting their cell centers. Supports up to 10 colors with controls for size, spread, and motion. Powered by Paper Design Shaders.
An accessible Base UI tab selector that expands the active icon into a labeled pill with input-aware layout motion.
A compact action that transforms in place into a short set of related choices with accessible focus management.
A fanned card menu with controlled state, item callbacks, keyboard dismissal, outside-click handling, and reduced-motion support.
A labeled Base UI range control with direct surface selection, a dedicated draggable indicator, and restrained boundary resistance.
An accessible Base UI tab selector with a shared active surface that travels fluidly between selections, with capsule and underline variants.
A grouped Base UI tooltip system with a deliberate first appearance and fast directional handoffs between related controls.
A hold-to-confirm destructive button with pointer capture, keyboard activation, cancellation, and reduced-motion support.
Spawns a trail of images that follow the cursor across a scoped area, with multiple appearance styles.
An accessible image preview that expands from its thumbnail and returns to the same spatial origin when dismissed.
The `LinkPreview` component is an interactive UI element that displays a preview of a link when hovered over. It enhances user experience by providing additional context about the link.
A pointer-aware magnetic wrapper with bounded pull strength, self or parent interaction areas, and reduced-motion support.
A scroll-velocity marquee with seamless loop math, eased hover pause, vertical/horizontal direction, ResizeObserver-based copy count, and full prefers-reduced-motion support.
A flowing composition of animated color spots shaped by organic distortion and vortex effects. Powered by Paper Design Shaders.
A pointer-aware ripple button with touch-safe feedback, customizable motion, and reduced-motion support.
A compact navigation rail that tracks the reader's position through a long page, revealing labels and editorial context cards on hover and focus.
Semantic motion transitions for feedback, entrances, exits, spatial movement, expressive interactions, and reduced motion.
Optional Sona UI semantic status colors and shared design tokens for Tailwind CSS v4.
Instructions for coding agents to discover, install, compose, and verify Sona UI components.
Shared class-name utilities used by Sona UI registry components.
The `SpinningText` component is a dynamic and visually engaging UI element that animates text in a circular spinning motion. It is highly customizable, allowing you to control the animation's speed, direction, radius, and more.
Splits text into characters, words, or lines and reveals them with a staggered, optionally scroll-triggered animation.
A card with a radial spotlight glow that follows the cursor.
A text component with staggered animation.