Installation

Get started with the UI Library by installing the components you need.

Prerequisites

Make sure you have the following installed:

• Node.js 18.0 or later
• React 18.0 or later
• Next.js 13.0 or later
• Tailwind CSS 3.0 or later

Setup

1. Install Dependencies

npm install class-variance-authority tailwind-merge

2. Configure Tailwind CSS

Make sure your Tailwind CSS configuration includes the component paths:

// tailwind.config.js
module.exports = {
  content: [
    './app/**/*.{js,ts,jsx,tsx,mdx}',
    './registry/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  // ... rest of your config
}

3. Add Components

Copy the components you need from the registry to your project:

# Create the directory structure
mkdir -p components/ui

# Copy the component files
cp registry/default/ui/button.tsx components/ui/button.tsx

Icons Setup

Some components use icons. Make sure to add the required icon files to your public directory:

# Copy icon files to your public directory
cp -r public/icons/ your-project/public/icons/

Usage

Once installed, you can start using the components in your project:

import Button from '@/components/ui/button'

export default function MyComponent() {
  return (
    <Button name="Click me" variant="Success" />
  )
}