UI Components

packages/ui/
├── src/
│   ├── components/          # UI components
│   │   ├── button.tsx
│   │   ├── card.tsx
│   │   ├── input.tsx
│   │   └── ...
│   ├── hooks/              # Shared hooks
│   ├── lib/                # Utilities
│   │   └── utils.ts        # cn() helper
│   └── styles/
│       └── globals.css     # Global styles
├── components.json         # ShadCN config
└── package.json

import { Button } from '@workspace/ui/components/button'
import { Card, CardHeader, CardTitle, CardContent } from '@workspace/ui/components/card'
import { Input } from '@workspace/ui/components/input'

function MyComponent() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Welcome</CardTitle>
      </CardHeader>
      <CardContent>
        <Input placeholder="Enter your email" />
        <Button>Submit</Button>
      </CardContent>
    </Card>
  )
}

import { Button } from '@workspace/ui/components/button'

// Variants
<Button variant="default">Default</Button>
<Button variant="destructive">Delete</Button>
<Button variant="outline">Outline</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="link">Link</Button>

// Sizes
<Button size="default">Default</Button>
<Button size="sm">Small</Button>
<Button size="lg">Large</Button>
<Button size="icon"><Icon /></Button>

import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter,
  CardAction,
} from '@workspace/ui/components/card'

function UserCard() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>User Profile</CardTitle>
        <CardDescription>Manage your account settings</CardDescription>
        <CardAction>
          <Button variant="ghost" size="icon-sm">
            <MoreIcon />
          </Button>
        </CardAction>
      </CardHeader>
      <CardContent>
        <p>Your profile information goes here</p>
      </CardContent>
      <CardFooter>
        <Button>Save Changes</Button>
      </CardFooter>
    </Card>
  )
}

import { Input } from '@workspace/ui/components/input'
import { PasswordInput } from '@workspace/ui/components/password-input'
import {
  FieldSet,
  FieldGroup,
  Field,
  FieldLabel,
  FieldError,
  FieldSeparator,
} from '@workspace/ui/components/field'
import { FieldErrorBag } from '@workspace/ui/components/field-error-bag'

function MyForm({ errors }) {
  return (
    <FieldSet>
      <FieldGroup>
        <Field>
          <FieldLabel htmlFor="email">Email</FieldLabel>
          <Input
            id="email"
            type="email"
            placeholder="[email protected]"
          />
          <FieldErrorBag errors={errors} field="email" />
        </Field>
        
        <Field>
          <FieldLabel htmlFor="password">Password</FieldLabel>
          <PasswordInput id="password" />
          <FieldErrorBag errors={errors} field="password" />
        </Field>
        
        <FieldSeparator>OR</FieldSeparator>
        
        <Field orientation="responsive">
          <Button type="submit">Submit</Button>
        </Field>
      </FieldGroup>
    </FieldSet>
  )
}

import { DataTable } from '@workspace/ui/components/data-table'
import { useDataTable } from '@workspace/ui/hooks/use-data-table'

const columns = [
  {
    accessorKey: 'name',
    header: 'Name',
  },
  {
    accessorKey: 'email',
    header: 'Email',
  },
]

function UsersTable({ data }) {
  const table = useDataTable({
    data,
    columns,
  })
  
  return <DataTable table={table} />
}

import { cn } from '@workspace/ui/lib/utils'

function MyComponent({ className, isActive }) {
  return (
    <div className={cn(
      "base-class",
      isActive && "active-class",
      className
    )}>
      Content
    </div>
  )
}

import { Mail, Lock, User, Settings } from 'lucide-react'

function MyComponent() {
  return (
    <div>
      <Mail className="size-4" />
      <Lock className="size-6 text-red-500" />
      <User />
      <Settings className="animate-spin" />
    </div>
  )
}