Sona UI

Animated React components you copy into your project — not a dependency.

Beautifully animated, accessible, and fully typed components built on React 19, Tailwind CSS 4, and Motion. Install what you need with a single command and own the code.

[blocked]

[blocked]

Website · Documentation · Components

Quick Start

Add any component to your project with the shadcn CLI — it copies the source and installs required dependencies:

npx shadcn@latest add https://sona-ui.vercel.app/r/accordion.json

Browse the full catalog and live previews in the documentation, where each component page has its own install command.

Why Sona UI

• You own the code — components are copied into your codebase, so you can read, edit, and extend them freely.
• Motion done right — purposeful animations with sensible easing, spring physics, and prefers-reduced-motion support.
• Accessible by default — real interactive elements, keyboard support, and ARIA wiring.
• Fully typed — every component ships with complete TypeScript definitions.
• Themed & responsive — Tailwind CSS 4 tokens with built-in light/dark mode.

Components

Organized into Components, Text, Effects, and Shaders. Highlights include:

See every component with props and live demos in the docs.

Tech Stack

Next.js 16 · React 19 · TypeScript · Tailwind CSS 4 · Motion · Base UI · next-themes

Local Development

Requires Bun (or npm).

git clone https://github.com/Dinil-Thilakarathne/sona-ui.gitcd sona-uibun installbun dev

Open http://localhost:3000 to view the site.

Contributing

Contributions are welcome — new components, bug fixes, and docs improvements. Fork the repo, create a feature branch, and open a pull request. Please follow the existing code style and keep components accessible and typed. See CONTRIBUTING.md [blocked] for details.

License

MIT [blocked] © Dinil Thilakarathne