Quick Start

Get up and running with the UI library in just a few minutes.

Your First Component

Let's create a simple page with a button and card:

Welcome!

This is your first component from the UI library.

import { Button } from '@/components/Button';
import { Card, CardHeader, CardTitle, CardContent } from '@/components/Card';

export default function MyPage() {
  return (
    <div className="p-8">
      <Card>
        <CardHeader>
          <CardTitle>Welcome!</CardTitle>
        </CardHeader>
        <CardContent>
          <p>This is your first component from the UI library.</p>
          <Button className="mt-4">Get Started</Button>
        </CardContent>
      </Card>
    </div>
  );
}

Using Variants

Components support multiple variants for different use cases:

import { Button } from '@/components/Button';

export default function Buttons() {
  return (
    <div className="space-x-2">
      <Button variant="primary">Primary</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="ghost">Ghost</Button>
    </div>
  );
}

Form Components

Build forms with our input components:

import { Input } from '@/components/Input';
import { Button } from '@/components/Button';

export default function LoginForm() {
  return (
    <form className="space-y-4 max-w-md">
      <Input
        label="Email"
        type="email"
        placeholder="you@example.com"
        required
      />
      <Input
        label="Password"
        type="password"
        placeholder="••••••••"
        required
      />
      <Button type="submit" variant="primary">
        Sign In
      </Button>
    </form>
  );
}

Next Steps

Explore all components
Learn about utilities
Check out examples