sh4dcn
Registries
ActiveAnimated components116

@sona-ui

Animated components · MIT · data updated 2026-10-27

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.

WebsiteDocsGitHubComponents folderAgent brief (.md)
accessibilityaestheticaianimationbackgroundsblocksbuttonscardschartsdesign-systemhooksmedianavigationoverlaystext-effectstheming

Install

npx shadcn@latest add https://sonaui.com/r/registry.json

Health

StatusActive
Last commit2 weeks ago
LicenseMIT
Open issues0
ArchivedNo
Stars116

Components (45)

sona-utilssona-motionsona-themeagent-skillanimated-dropdownanimated-checkboxmorph-surfaceanimated-switchanimated-dialogbuttondot-orbit-shadermesh-gradient-shadermagnetic-buttonfluid-tabsfluid-tooltipfluid-slideractivity-graphanimated-tabsexpanding-actionaccordionripple-buttonmarqueespinning-textstagger-textlink-previewbubble-up-buttonexpandable-tabssplit-textimage-traillightboxavatar-showcasecircular-context-menulive-activityspotlight-cardcode-blockhold-to-delete-buttoncircular-dock-menufan-viewsmart-overflowsection-railfloating-viewerswipe-action-rowradial-card-marqueedepth-tilesstepper
Components: sona-utils, sona-motion, sona-theme, agent-skill, animated-dropdown, animated-checkbox, morph-surface, animated-switch, animated-dialog, button, dot-orbit-shader, mesh-gradient-shader, magnetic-button, fluid-tabs, fluid-tooltip, fluid-slider, activity-graph, animated-tabs, expanding-action, accordion, ripple-button, marquee, spinning-text, stagger-text, link-preview, bubble-up-button, expandable-tabs, split-text, image-trail, lightbox, avatar-showcase, circular-context-menu, live-activity, spotlight-card, code-block, hold-to-delete-button, circular-dock-menu, fan-view, smart-overflow, section-rail, floating-viewer, swipe-action-row, radial-card-marquee, depth-tiles, stepper

Preview

Live sandbox previews render component source client-side. Where a component can’t be rendered standalone, sh4dcn falls back to its source and install command.

@sona-ui · sona-utils

npx shadcn@latest add https://sonaui.com/r/sona-utils.json
View source