Getting Started

Welcome to our UI library! This guide will help you set up and start using our components in your Next.js project.

Installation

First, create a new Next.js / ShadCN project if you haven't already:

npx shadcn@latest init

Then install the required dependencies:

npm install @radix-ui/react-dialog @radix-ui/react-label @radix-ui/react-slot \
@radix-ui/react-tooltip class-variance-authority framer-motion clsx lucide-react next-themes \
tailwind-merge tailwindcss-animate react-youtube split-type react-tooltip @radix-ui/react-accordion @radix-ui/react-select @radix-ui/react-dialog zod @radix-ui/react-popover

Global CSS

Copy the following styles into your app/globals.css file. This includes our design tokens and base styles:

/**
 * Component source code for globals.css
 * 
 * This source code was not found in the pre-bundled files.
 * Please ensure the 'generate-source-json' script was run before building.
 * 
 * Run 'npm run generate-source-json' and rebuild to fix this issue.
 */

Tailwind Configuration

Update your tailwind.config.js with the following configuration. This sets up the theme, colors, and animations used by our components:

/**
 * Component source code for tailwind.config
 * 
 * This source code was not found in the pre-bundled files.
 * Please ensure the 'generate-source-json' script was run before building.
 * 
 * Run 'npm run generate-source-json' and rebuild to fix this issue.
 */

Set Up Root Layout

Replace your app/layout.js with the following:

import './globals.css'
import { Figtree } from 'next/font/google'

const figtree = Figtree({ subsets: ['latin'] })

export const metadata = {
  title: 'Your App Name',
  description: 'Your app description',
}

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body className={`${figtree.className} antialiased`}>
        {children}
      </body>
    </html>
  )
}

Start Using Components

You can now start using our components in your pages. Here's a simple example:

import { Button } from '../components/ui/Button'

export default function Page() {
  return (
    <div className="p-8">
      <h1 className="h1 mb-6">Welcome</h1>
      <p className="text-body mb-4">
        This is an example page using our UI components.
      </p>
      <Button>Get Started</Button>
    </div>
  )
}

Next Steps

Start with Basic Components

Begin your journey with our Button component. It's the perfect way to understand our component patterns, styling system, and API structure.

Explore Button Component