@sona-ui
A small but polished React 19 + Tailwind CSS v4 + Motion component library with 10 production-ready animated components across three categories: UI (Accordion, Ripple Button, Vertical Tabs, Expandable Tabs, Link Preview, Bubble Up Button), Text (Spinning Text, Stagger Text), and Effect (Magnetic Button, Marquee). Installable via shadcn CLI per component. Fully typed TypeScript, dark-mode support via next-themes, accessible, tree-shakeable. Open-source MIT on Vercel. Use for: adding carefully crafted animated primitives — especially motion-forward buttons, tabs, and text effects — to a React 19/Next.js project.
Install this registry
npx shadcn@latest add https://sona-ui.vercel.app/r/registry.json pnpm dlx shadcn@latest add https://sona-ui.vercel.app/r/registry.json bunx shadcn@latest add https://sona-ui.vercel.app/r/registry.json curl -s https://sona-ui.vercel.app/r/registry.json Components
16 totalThe `Accordion` component allows you to toggle the visibility of content sections. It is useful for FAQs, menus, and more.
npx shadcn@latest add https://sona-ui.vercel.app/r/accordion.json The `BubbleUpButton` component provides an interactive button with a fluid "bubble-up" animation effect when hovered. It creates an engaging user experience wi…
npx shadcn@latest add https://sona-ui.vercel.app/r/bubble-up-button.json A circular trigger button that fans items out in a radial arc with spring animations.
npx shadcn@latest add https://sona-ui.vercel.app/r/circular-dock-menu.json 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.
npx shadcn@latest add https://sona-ui.vercel.app/r/dot-orbit-shader.json The `ExpandableTabs` component is a dynamic and interactive UI element designed for creating horizontal tabbed navigation.
npx shadcn@latest add https://sona-ui.vercel.app/r/expandable-tabs.json A trigger button that spreads labeled cards into a fanned arc layout with staggered spring animations.
npx shadcn@latest add https://sona-ui.vercel.app/r/fan-view.json A button that reveals a destructive fill animation while held, triggering a callback only after the full hold duration completes.
npx shadcn@latest add https://sona-ui.vercel.app/r/hold-to-delete-button.json 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…
npx shadcn@latest add https://sona-ui.vercel.app/r/link-preview.json Component for magnetic-button
npx shadcn@latest add https://sona-ui.vercel.app/r/magnetic-button.json The `Marquee` component is a versatile UI element that creates a scrolling marquee effect. It is highly customizable and can adapt to various use cases, such a…
npx shadcn@latest add https://sona-ui.vercel.app/r/marquee.json A flowing composition of animated color spots shaped by organic distortion and vortex effects. Powered by Paper Design Shaders.
npx shadcn@latest add https://sona-ui.vercel.app/r/mesh-gradient-shader.json An interactive button with a ripple effect for modern UIs.
npx shadcn@latest add https://sona-ui.vercel.app/r/ripple-button.json The `SpinningText` component is a dynamic and visually engaging UI element that animates text in a circular spinning motion. It is highly customizable, allowin…
npx shadcn@latest add https://sona-ui.vercel.app/r/spinning-text.json A card with a radial spotlight glow that follows the cursor.
npx shadcn@latest add https://sona-ui.vercel.app/r/spotlight-card.json A text component with staggered animation.
npx shadcn@latest add https://sona-ui.vercel.app/r/stagger-text.json The `VerticalTab` component is a versatile and interactive UI element designed for creating vertical tabbed navigation. It provides a smooth user experience wi…
npx shadcn@latest add https://sona-ui.vercel.app/r/vertical-tab.json