Components

Complete component library with code examples and usage guidelines

Button

Variants

Buttons come in four variants: primary, secondary, ghost, and danger

Code Example

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

<Button variant="primary" size="md">
  Click me
</Button>

Props

variant"primary" | "secondary" | "ghost" | "danger"

size"sm" | "md" | "lg"

loadingboolean

disabledboolean

Input

Text Input

Form input fields with labels, helper text, and error states

Full Name

Password

Error State

This field is required

Code Example

import { Input } from "@/components/input";

<Input 
  label="Email" 
  type="email" 
  placeholder="you@example.com"
/>

Checkbox

Selection controls for multiple options

Accept terms and conditions

Subscribe to newsletter

Enable notifications

Code Example

import { Checkbox } from "@/components/checkbox";

<Checkbox label="Accept terms" defaultChecked />

Card

Card Component

Container component with header, title, description, and content sections

Default Card

Standard card variant

Card content goes here

Elevated Card

Card with shadow

Card content goes here

Code Example

import { Card, CardHeader, CardTitle, CardContent } from "@/components/card";

<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
  </CardHeader>
  <CardContent>
    Card content goes here
  </CardContent>
</Card>

Status Badge

Pill-shaped badges for status indicators

ActivePendingFailed

Code Example

import { StatusBadge } from "@/components/status-badge";

<StatusBadge status="success">Active</StatusBadge>

Loading Spinner

Loading States

Spinner component for loading indicators

Small

Medium

Large

Empty State

Component for displaying empty states with optional actions

No items found

Get started by creating your first item. It will appear here once created.