Installation

Prerequisites

Before you begin, ensure you have a React project set up with Tailwind CSS. If you're using Next.js, you're likely already good to go.

Step 1: Install Utilities

Zarasana UI relies on motion for animations and standard utility libraries for class merging. Install them using your preferred package manager:

npm install motion clsx tailwind-merge

Step 2: Setup shadcn/ui

If you haven't initialized shadcn/ui in your project yet, run the init command. This sets up the base accessible primitives we use.

npx shadcn@latest init

Step 3: Configure Shadcn CLI (Recommended)

With Shadcn CLI 3.0+, you can configure namespaced registries to make installation easier. Update your components.json to include the Zarasana registry alias.

{
  "registries": {
    "@zarasana": "https://ui.zarasana.com/r/{name}.json"
  }
}

Step 4: Add Components

Once configured, you can install any Zarasana UI component using the @zarasana alias.

CLI Installation

npx shadcn@latest add @zarasana/button-glassmorphic

Manual Installation (Legacy)

If you prefer not to use namespaces, you can still install components using the full URL:

npx shadcn@latest add https://ui.zarasana.com/r/button-glassmorphic.json

This will:

1. Download the component code to your configured directory (e.g. components/zarasana/...)
2. Install any required dependencies (like motion, clsx, etc.) automatically
3. Update your project configuration

Available Styles

We categorize our components into three distinct design systems:

• Glassmorphic: Frosted glass effects, blurs, and translucency.
• Neo-Brutalism: Bold borders, hard shadows, and high contrast.
• Neo-SaaS: Clean, professional, and subtle gradients.

Check the documentation for each component to find the specific installation URL.