---
name: "@sona-ui"
slug: "sona-ui"
description: "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."
category: "Animated components"
tags: ["accessibility", "aesthetic", "ai", "animation", "backgrounds", "blocks", "buttons", "cards", "charts", "design-system", "hooks", "media", "navigation", "overlays", "text-effects", "theming"]
framework: "react"
license: null
author: "Dinil-Thilakarathne"
website: "https://sona-ui.vercel.app"
github: "https://github.com/Dinil-Thilakarathne/sona-ui"
registry: "https://sona-ui.vercel.app/r/registry.json"
pro: false
pro_url: null
github_stars: 18
component_count: 30
generated_at: "2026-07-28T08:00:50.948Z"
---

# @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.

## Links

- Website: https://sona-ui.vercel.app
- GitHub: https://github.com/Dinil-Thilakarathne/sona-ui
- Registry JSON: https://sona-ui.vercel.app/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/sona-ui
- This file: https://sh4dcn.vercel.app/md/sona-ui.md

## Install

```sh
# add the whole registry (shadcn CLI)
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
# clone the source repo
git clone https://github.com/Dinil-Thilakarathne/sona-ui.git
# fetch the raw registry index
curl -s https://sona-ui.vercel.app/r/registry.json
```

## Components (30)

| name | type | description | install |
| --- | --- | --- | --- |
| sona-utils | registry:lib | Shared class-name utilities used by Sona UI registry components. | `npx shadcn@latest add https://sona-ui.vercel.app/r/sona-utils.json` |
| sona-motion | registry:lib | Semantic motion transitions for feedback, entrances, exits, spatial movement, expressive interactions, and reduced motion. | `npx shadcn@latest add https://sona-ui.vercel.app/r/sona-motion.json` |
| sona-theme | registry:theme | Optional Sona UI semantic status colors and shared design tokens for Tailwind CSS v4. | `npx shadcn@latest add https://sona-ui.vercel.app/r/sona-theme.json` |
| agent-skill | registry:file | Instructions for coding agents to discover, install, compose, and verify Sona UI components. | `npx shadcn@latest add https://sona-ui.vercel.app/r/agent-skill.json` |
| animated-dropdown | registry:ui | A composable, accessible dropdown menu built on Base UI with controlled state, interruptible hover highlighting, and origin-aware enter motion. | `npx shadcn@latest add https://sona-ui.vercel.app/r/animated-dropdown.json` |
| animated-switch | registry:ui | An interactive iOS-style squish switch built on Base UI Switch primitives, with interruptible press feedback and a shared feedback spring. | `npx shadcn@latest add https://sona-ui.vercel.app/r/animated-switch.json` |
| animated-dialog | registry:ui | A composable, accessible dialog modal built on Base UI with controlled state, direction-aware enter and exit motion, and reduced-motion support. | `npx shadcn@latest add https://sona-ui.vercel.app/r/animated-dialog.json` |
| button | registry:ui | A simple action button with subtle press feedback and reduced-motion support. | `npx shadcn@latest add https://sona-ui.vercel.app/r/button.json` |
| dot-orbit-shader | registry:ui | 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` |
| mesh-gradient-shader | registry:ui | 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` |
| magnetic-button | registry:ui | A pointer-aware magnetic wrapper with bounded pull strength, self or parent interaction areas, and reduced-motion support. | `npx shadcn@latest add https://sona-ui.vercel.app/r/magnetic-button.json` |
| fluid-tabs | registry:ui | An accessible Base UI tab selector with a shared active surface that travels fluidly between selections, with capsule and underline variants. | `npx shadcn@latest add https://sona-ui.vercel.app/r/fluid-tabs.json` |
| fluid-slider | registry:ui | A labeled Base UI range control with direct surface selection, a dedicated draggable indicator, and restrained boundary resistance. | `npx shadcn@latest add https://sona-ui.vercel.app/r/fluid-slider.json` |
| activity-graph | registry:ui | A keyboard-accessible calendar heatmap with normalized intensity levels and an interruptible shared focus surface. | `npx shadcn@latest add https://sona-ui.vercel.app/r/activity-graph.json` |
| animated-tabs | registry:ui | An accessible horizontal tab selector built on Base UI with controlled state, keyboard navigation, disabled items, and a pointer-only shared hover indicator. | `npx shadcn@latest add https://sona-ui.vercel.app/r/animated-tabs.json` |
| accordion | registry:ui | An accessible Base UI accordion with controlled and uncontrolled state, four visual variants, interruptible disclosure transitions, and reduced-motion support. | `npx shadcn@latest add https://sona-ui.vercel.app/r/accordion.json` |
| ripple-button | registry:ui | A pointer-aware ripple button with touch-safe feedback, customizable motion, and reduced-motion support. | `npx shadcn@latest add https://sona-ui.vercel.app/r/ripple-button.json` |
| marquee | registry:ui | A scroll-velocity marquee with seamless loop math, eased hover pause, vertical/horizontal direction, ResizeObserver-based copy count, and full prefers-reduced-… | `npx shadcn@latest add https://sona-ui.vercel.app/r/marquee.json` |
| spinning-text | registry:ui | 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` |
| stagger-text | registry:ui | A text component with staggered animation. | `npx shadcn@latest add https://sona-ui.vercel.app/r/stagger-text.json` |
| link-preview | registry:ui | 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` |
| bubble-up-button | registry:ui | 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` |
| expandable-tabs | registry:ui | An accessible Base UI tab selector that expands the active icon into a labeled pill with input-aware layout motion. | `npx shadcn@latest add https://sona-ui.vercel.app/r/expandable-tabs.json` |
| split-text | registry:ui | Splits text into characters, words, or lines and reveals them with a staggered, optionally scroll-triggered animation. | `npx shadcn@latest add https://sona-ui.vercel.app/r/split-text.json` |
| image-trail | registry:ui | Spawns a trail of images that follow the cursor across a scoped area, with multiple appearance styles. | `npx shadcn@latest add https://sona-ui.vercel.app/r/image-trail.json` |
| spotlight-card | registry:ui | A card with a radial spotlight glow that follows the cursor. | `npx shadcn@latest add https://sona-ui.vercel.app/r/spotlight-card.json` |
| hold-to-delete-button | registry:ui | A hold-to-confirm destructive button with pointer capture, keyboard activation, cancellation, and reduced-motion support. | `npx shadcn@latest add https://sona-ui.vercel.app/r/hold-to-delete-button.json` |
| circular-dock-menu | registry:ui | A circular dock menu with controlled state, keyboard dismissal, item callbacks, outside-click handling, and reduced-motion support. | `npx shadcn@latest add https://sona-ui.vercel.app/r/circular-dock-menu.json` |
| fan-view | registry:ui | A fanned card menu with controlled state, item callbacks, keyboard dismissal, outside-click handling, and reduced-motion support. | `npx shadcn@latest add https://sona-ui.vercel.app/r/fan-view.json` |
| section-rail | registry:ui | A compact navigation rail that tracks the reader's position through a long page, revealing labels and editorial context cards on hover and focus. | `npx shadcn@latest add https://sona-ui.vercel.app/r/section-rail.json` |

## For AI agents

```text
You are adding components from @sona-ui to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/sona-ui.md) for the component list.
2. Fetch the machine-readable index: https://sona-ui.vercel.app/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: sona-ui).
```