Installation

Install ZeroDrive UI components using the shadcn CLI.

Prerequisites

Before installing ZeroDrive UI components, make sure you have:

A React or Next.js project
Tailwind CSS configured in your project
A components.json file (created by running npx shadcn@latest init)

Configure Registry

Add the ZeroDrive registry to your components.json file:

components.json

{
  "registries": {
    "@zerodrive": "https://zerodrive.futurixai.com/r/{name}.json"
  }
}

This tells the shadcn CLI where to fetch ZeroDrive UI components from.

Install Components

Use the shadcn CLI to install components. The CLI will automatically install the base theme and any required dependencies.

bash

npx shadcn@latest add @zerodrive/button

You can install multiple components at once:

bash

npx shadcn@latest add @zerodrive/button @zerodrive/switch @zerodrive/select

Available Components

The following components are available in the ZeroDrive registry:

Component	Description
`@zerodrive/button`	Neumorphic button with raised/pressed states and palette variants.
`@zerodrive/switch`	Toggle switch with soft shadows and color indicator.
`@zerodrive/progress`	Progress bar with inset track and glowing indicator.
`@zerodrive/select`	Dropdown select with soft shadow styling.
`@zerodrive/pagination`	Pagination with multiple layout types.
`@zerodrive/code-block`	Syntax highlighted code block with copy functionality.
`@zerodrive/copy-button`	Clipboard copy button with visual feedback.

What Gets Installed

When you install your first ZeroDrive component, the CLI automatically installs:

ZeroDrive Theme - CSS variables for neumorphic colors and shadows
Utility function - cn() helper for merging Tailwind classes
Dependencies - Required npm packages like class-variance-authority, clsx, and tailwind-merge

Usage

After installation, import and use components in your project:

tsx

import { Button } from "@/components/ui/button"

export default function App() {
  return (
    <Button palette="blue-gray">
      Click me
    </Button>
  )
}