Installation

Sona UI is designed to be easily integrated into your React applications. The recommended way to use Sona UI is via our CLI, which automates the setup and component installation process.

Installation via CLI

The easiest way to use Sona UI components in your project is via the shadcn CLI. You can install components directly from our registry.

1. Initialize shadcn-ui

If you haven't already, initialize shadcn-ui in your project:

npx shadcn@latest init

2. Add Components

You can add Sona UI components using the add command by pointing to our registry URL.

# Add Magnetic Button
npx shadcn@latest add @sona-ui/magnetic-button
 
# Add Accordion
 
npx shadcn@latest add @sona-ui/accordion
 
# Add Marquee
 
npx shadcn@latest add @sona-ui/marquee

The CLI will automatically download the component source code to your components directory and install any required peer dependencies.

Manual Installation

If you prefer not to use the CLI, you can manually copy the source code of the components from the documentation into your project.

1. Navigate to the component documentation page (e.g., Accordion).
2. Click on the "Code" tab to view the source.
3. Copy the code into a file in your project (e.g., components/ui/Accordion.tsx).
4. Install the necessary dependencies listed in the documentation.

Dependencies

Sona UI relies on modern web technologies. Ensure your project meets the following requirements:

• React 19 or later
• TypeScript (recommended)
• Tailwind CSS 4
• Motion (Framer Motion)
• Lucide React (for icons)
• clsx and tailwind-merge (for class utility management)

Most of these will be handled automatically if you use the CLI.