Design System

import { Badge } from '@/components/ui/badge'

<Badge>Active</Badge>
<Badge variant="destructive">Failed</Badge>
<Badge variant="outline">Pending</Badge>
<Badge variant="secondary">Draft</Badge>

// Status with icon
<Badge className="bg-success text-success-foreground">
  <CheckCircle2 className="size-3" />
  Confirmed
</Badge>

// Eyebrow — purely typographic, no visual container
<Badge variant="eyebrow">Service category</Badge>

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

// Default
<Card>
  <CardHeader>
    <CardTitle>Service offer</CardTitle>
    <CardDescription>React performance audit</CardDescription>
    <CardAction><Badge>Active</Badge></CardAction>
  </CardHeader>
  <CardContent>Description goes here.</CardContent>
  <CardFooter><Button>View details</Button></CardFooter>
</Card>

// Feature (elevated shadow)
<Card variant="feature">...</Card>

import { Avatar, AvatarImage, AvatarFallback,
  AvatarGroup, AvatarGroupCount } from '@/components/ui/avatar'

// With image + fallback
<Avatar size="lg">
  <AvatarImage src="/photo.jpg" alt="Lucy Brandão" />
  <AvatarFallback
    style={{ backgroundColor: 'var(--avatar-bg-3)', color: 'var(--avatar-fg)' }}>
    LB
  </AvatarFallback>
</Avatar>

// Group
<AvatarGroup>
  <Avatar><AvatarFallback>AB</AvatarFallback></Avatar>
  <Avatar><AvatarFallback>CD</AvatarFallback></Avatar>
  <AvatarGroupCount>+5</AvatarGroupCount>
</AvatarGroup>

import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'

// Default
<div className="space-y-2">
  <Label htmlFor="title">Service title</Label>
  <Input id="title" placeholder="React performance audit" />
</div>

// Error state
<div className="space-y-2">
  <Label htmlFor="email" className="text-destructive">Email</Label>
  <Input id="email" aria-invalid="true"
    className="border-destructive focus-visible:ring-destructive/20" />
  <p className="text-xs text-destructive" role="alert">
    Enter a valid email address.
  </p>
</div>

// Disabled
<Input disabled value="locked@value.com" />

import { Select, SelectTrigger, SelectValue, SelectContent,
  SelectItem, SelectGroup, SelectLabel, SelectSeparator
} from '@/components/ui/select'

<Select>
  <SelectTrigger className="w-full">
    <SelectValue placeholder="Select category" />
  </SelectTrigger>
  <SelectContent>
    <SelectGroup>
      <SelectLabel>Technology</SelectLabel>
      <SelectItem value="web">Web development</SelectItem>
      <SelectItem value="mobile">Mobile apps</SelectItem>
    </SelectGroup>
    <SelectSeparator />
    <SelectGroup>
      <SelectLabel>Creative</SelectLabel>
      <SelectItem value="design">Graphic design</SelectItem>
    </SelectGroup>
  </SelectContent>
</Select>

import { Textarea } from '@/components/ui/textarea'
import { Label } from '@/components/ui/label'

<div className="space-y-2">
  <Label htmlFor="desc">Service description</Label>
  <Textarea id="desc"
    placeholder="Describe what's included…"
  />
  <p className="text-xs text-muted-foreground">
    Maximum 2 000 characters.
  </p>
</div>

import { Separator } from '@/components/ui/separator'

// Horizontal (default) — between sections
<Separator />

// Vertical — between inline items
<div className="flex items-center gap-4 h-8">
  <span>Overview</span>
  <Separator orientation="vertical" />
  <span>Reviews</span>
</div>

// Semantic (not decorative)
<Separator decorative={false} aria-label="Between navigation regions" />

import { Skeleton } from '@/components/ui/skeleton'

// Text lines
<div className="space-y-2">
  <Skeleton className="h-4 w-full" />
  <Skeleton className="h-4 w-5/6" />
</div>

// Avatar + text
<div className="flex items-center gap-3">
  <Skeleton className="size-10 rounded-full" />
  <div className="space-y-2">
    <Skeleton className="h-4 w-32" />
    <Skeleton className="h-3 w-20" />
  </div>
</div>

// Wrap loading region for screen readers
<div aria-busy="true" aria-label="Loading offers">
  <Skeleton className="h-48 w-full rounded-card" />
</div>

import { Checkbox } from '@/components/ui/checkbox'
import { Label } from '@/components/ui/label'

// Default
<div className="flex items-center gap-2">
  <Checkbox id="terms" />
  <Label htmlFor="terms">Accept terms of service</Label>
</div>

// Controlled
const [checked, setChecked] = useState(false)
<Checkbox checked={checked} onCheckedChange={setChecked} />

// Indeterminate (e.g. select-all with partial selection)
<Checkbox checked="indeterminate" />

import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs'

// Default (pill) variant
<Tabs defaultValue="overview">
  <TabsList>
    <TabsTrigger value="overview">Overview</TabsTrigger>
    <TabsTrigger value="reviews">Reviews</TabsTrigger>
  </TabsList>
  <TabsContent value="overview">Content A</TabsContent>
  <TabsContent value="reviews">Content B</TabsContent>
</Tabs>

// Line variant
<TabsList variant="line">
  <TabsTrigger value="overview">Overview</TabsTrigger>
</TabsList>

import { Tooltip, TooltipTrigger, TooltipContent,
  TooltipProvider } from '@/components/ui/tooltip'

// Wrap the tree once (typically in a layout)
<TooltipProvider>
  <Tooltip>
    <TooltipTrigger asChild>
      <Button variant="ghost" size="icon" aria-label="Escrow info">
        <ShieldCheck className="size-4" />
      </Button>
    </TooltipTrigger>
    <TooltipContent>
      Funds held in escrow until delivery is confirmed
    </TooltipContent>
  </Tooltip>
</TooltipProvider>

import { Dialog, DialogTrigger, DialogContent, DialogHeader,
  DialogTitle, DialogDescription, DialogFooter
} from '@/components/ui/dialog'

<Dialog>
  <DialogTrigger asChild>
    <Button variant="outline">Open dialog</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Confirm order</DialogTitle>
      <DialogDescription>
        Payment will be held in escrow until delivery.
      </DialogDescription>
    </DialogHeader>
    <DialogFooter>
      <Button variant="outline">Cancel</Button>
      <Button>Place order</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

import { Callout } from '@/components/ui/callout'
import { ShieldCheck, AlertTriangle } from 'lucide-react'

// Info (default) — escrow trust cue
<Callout icon={<ShieldCheck />}>
  Your payment is protected by escrow until delivery.
</Callout>

// Warning
<Callout variant="warning" icon={<AlertTriangle />}>
  This offer will be paused after 30 days of inactivity.
</Callout>

// Critical — add role="alert" for screen readers
<Callout variant="danger" icon={<AlertCircle />} role="alert">
  Payment failed. Please try again.
</Callout>

import { Breadcrumb, BreadcrumbList, BreadcrumbItem,
  BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator,
  BreadcrumbEllipsis } from '@/components/ui/breadcrumb'
import Link from 'next/link'

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink asChild>
        <Link href="/">Home</Link>
      </BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink asChild>
        <Link href="/buscar">Services</Link>
      </BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>React Performance Audit</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>