Installation

Sona UI components are installed as source code through the shadcn CLI. The files live in your project, so you can adapt them to your tokens, layout, and product requirements.

Install with the CLI

Start by initializing shadcn if your project does not already include a components configuration file.

Initialize shadcn

npx shadcn@latest init

Add the Sona UI registry

Add the Sona UI registry to the components configuration file.

json

components.json

{
"registries": {
  "@sona-ui": {
    "url": "https://sonaui.com/r/{name}.json"
  }
}
}

Add a component

Install the component you need from the Sona UI namespace.

npx shadcn@latest add @sona-ui/magnetic-button

The CLI places the component in your configured directory and installs the dependencies it declares.

Shared foundations

Some components include small shared foundations. The CLI resolves them automatically when they are declared by a component.

sona-utils provides the shared class-name helper.
sona-motion provides shared motion transitions and easing values.
sona-theme adds the small Sona-specific token set, including radius and danger-state values.

You do not need to install every foundation manually. Simple components may use only sona-utils, while components with physical motion or dedicated tokens install the foundations they need.

Manual installation

You can also copy a component into your project manually.

Open the component documentation page.
Open the Source panel and copy the component file.
Copy each required foundation file listed by the component.
Install the dependencies declared by the registry item.

Manual installation gives you the same source ownership, but the CLI is the quickest way to keep files and dependencies aligned.

Project requirements

Sona UI is built for modern React projects using TypeScript and Tailwind CSS 4. Motion and icon packages are installed only when a component requires them.

Contact

Found a bug or need help installing a component? Open an issue on GitHub.

License & Usage

Sona UI is available under the MIT license. You may use, modify, and distribute components in personal and commercial projects.