@sona-ui

Shared class-name utilities used by Sona UI registry components.

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.

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.

A composable, accessible dialog modal built on Base UI with controlled state, direction-aware enter and exit motion, and reduced-motion support.

A simple action button with subtle press feedback 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.

A flowing composition of animated color spots shaped by organic distortion and vortex effects. Powered by Paper Design Shaders.

A pointer-aware magnetic wrapper with bounded pull strength, self or parent interaction areas, and reduced-motion support.

An accessible Base UI tab selector with a shared active surface that travels fluidly between selections, with capsule and underline variants.

A labeled Base UI range control with direct surface selection, a dedicated draggable indicator, and restrained boundary resistance.

A keyboard-accessible calendar heatmap with normalized intensity levels and an interruptible shared focus surface.

An accessible horizontal tab selector built on Base UI with controlled state, keyboard navigation, disabled items, and a pointer-only shared hover indicator.

An accessible Base UI accordion with controlled and uncontrolled state, four visual variants, interruptible disclosure transitions, and reduced-motion support.

A pointer-aware ripple button with touch-safe feedback, customizable motion, 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-…

The `SpinningText` component is a dynamic and visually engaging UI element that animates text in a circular spinning motion. It is highly customizable, allowin…

A text component with staggered animation.

The `LinkPreview` component is an interactive UI element that displays a preview of a link when hovered over. It enhances user experience by providing addition…

The `BubbleUpButton` component provides an interactive button with a fluid "bubble-up" animation effect when hovered. It creates an engaging user experience wi…

An accessible Base UI tab selector that expands the active icon into a labeled pill with input-aware layout motion.

Splits text into characters, words, or lines and reveals them with a staggered, optionally scroll-triggered animation.

Spawns a trail of images that follow the cursor across a scoped area, with multiple appearance styles.

A card with a radial spotlight glow that follows the cursor.

A hold-to-confirm destructive button with pointer capture, keyboard activation, cancellation, and reduced-motion support.

A circular dock menu with controlled state, keyboard dismissal, item callbacks, outside-click handling, and reduced-motion support.

A fanned card menu with controlled state, item callbacks, keyboard dismissal, outside-click handling, 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.