Find a component. See it working. Ship the code.

import { CircleCheck } from "lucide-react";

<div className="flex gap-3 rounded-lg border border-brand-200 bg-brand-50 p-4">
  <CircleCheck className="mt-0.5 h-4 w-4 text-brand-700" />
  <div>
    <p className="font-semibold text-navy-900">Ready to ship</p>
    <p className="text-sm text-navy-600">Your latest audit has no blocking issues.</p>
  </div>
</div>

<div className="flex -space-x-2">
  {[
    ["AR", "bg-navy-900"],
    ["LM", "bg-brand-500"],
    ["+4", "bg-surface-subtle"],
  ].map(([label, color]) => (
    <span className={`grid h-9 w-9 place-items-center rounded-full border-2 border-surface text-xs font-bold ${color}`}>
      {label}
    </span>
  ))}
</div>

import { Command } from "cmdk";

<Command className="rounded-xl border bg-surface shadow-menu">
  <Command.Input placeholder="Search commands..." />
  <Command.List>
    <Command.Item>Open dashboard</Command.Item>
    <Command.Item>Run an audit</Command.Item>
  </Command.List>
</Command>

import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";

<Table>
  <TableHeader>
    <TableRow><TableHead>Page</TableHead><TableHead>Status</TableHead></TableRow>
  </TableHeader>
  <TableBody>
    <TableRow><TableCell>/pricing</TableCell><TableCell>Ready</TableCell></TableRow>
  </TableBody>
</Table>

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

<Card className="border-brand-400 shadow-hover">
  <CardHeader><CardTitle>Starter</CardTitle></CardHeader>
  <CardContent>
    <p className="text-3xl font-semibold">$0</p>
    <Button className="mt-5 w-full">Start free</Button>
  </CardContent>
</Card>

import { EmptyState } from "@/components/ui/empty-state";

<EmptyState
  title="No audits yet"
  description="Run your first audit to see issues and next steps here."
  action={<Button>Run an audit</Button>}
/>

import { UploadCloud } from "lucide-react";

<label className="grid cursor-pointer place-items-center rounded-xl border border-dashed border-line-strong bg-surface-subtle p-8 text-center">
  <UploadCloud className="mb-3 h-5 w-5 text-brand-700" />
  <span className="font-semibold">Drop a CSV here</span>
  <span className="mt-1 text-sm text-navy-500">or click to browse, up to 10 MB</span>
  <input type="file" className="sr-only" accept=".csv" />
</label>

<section className="rounded-2xl bg-navy-900 px-6 py-10 text-white">
  <Badge variant="brand">Built for fast teams</Badge>
  <h2 className="mt-4 max-w-lg text-3xl font-semibold">Ship the page, not the plumbing.</h2>
  <p className="mt-3 max-w-md text-sm text-navy-300">A strong hero earns attention with a single job.</p>
  <Button className="mt-6">Start building</Button>
</section>

import { Calendar } from "@/components/ui/calendar";

<Calendar
  mode="single"
  selected={date}
  onSelect={setDate}
  className="rounded-lg border"
/>

const steps = ["Brief approved", "Design reviewed", "Build in progress"];

<ol className="space-y-4">
  {steps.map((step, index) => (
    <li className="flex items-center gap-3">
      <span className="grid h-6 w-6 place-items-center rounded-full bg-brand-400 text-xs font-bold">
        {index + 1}
      </span>
      <span className="text-sm font-medium">{step}</span>
    </li>
  ))}
</ol>

import { toast } from "sonner";

toast.success("Audit shared", {
  description: "Anyone with the link can view the report.",
  action: { label: "Copy link", onClick: copyShareUrl },
});

<figure className="max-w-md rounded-xl border border-line bg-surface p-5 shadow-card">
  <blockquote className="text-base font-medium leading-relaxed text-navy-900">
    “We found the issue in minutes, then shipped the fix before lunch.”
  </blockquote>
  <figcaption className="mt-4 text-sm text-navy-500">Maya Chen, Northstar</figcaption>
</figure>

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";

<Accordion type="single" collapsible>
  <AccordionItem value="item-1">
    <AccordionTrigger>Is it accessible?</AccordionTrigger>
    <AccordionContent>Yes. It follows the WAI-ARIA pattern.</AccordionContent>
  </AccordionItem>
</Accordion>

import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem><BreadcrumbLink href="/">Home</BreadcrumbLink></BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem><BreadcrumbPage>Components</BreadcrumbPage></BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/components/ui/carousel";

<Carousel className="w-full max-w-sm">
  <CarouselContent>
    {items.map((item) => <CarouselItem key={item.id}>{item.title}</CarouselItem>)}
  </CarouselContent>
  <CarouselPrevious />
  <CarouselNext />
</Carousel>

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

<label className="flex items-center gap-2">
  <Checkbox id="terms" />
  <span>I agree to the terms and conditions.</span>
</label>

import {
  Combobox,
  ComboboxContent,
  ComboboxInput,
  ComboboxItem,
  ComboboxList,
} from "@/components/ui/combobox";

<Combobox items={["Next.js", "React", "Astro"]}>
  <ComboboxInput placeholder="Select a framework" />
  <ComboboxContent>
    <ComboboxList>{(item) => <ComboboxItem value={item}>{item}</ComboboxItem>}</ComboboxList>
  </ComboboxContent>
</Combobox>

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

<Dialog>
  <DialogTrigger>Open settings</DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Project settings</DialogTitle>
      <DialogDescription>Update the details for this project.</DialogDescription>
    </DialogHeader>
  </DialogContent>
</Dialog>

import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";

<DropdownMenu>
  <DropdownMenuTrigger>More actions</DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuItem>Duplicate</DropdownMenuItem>
    <DropdownMenuItem>Archive</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

import {
  Pagination,
  PaginationContent,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from "@/components/ui/pagination";

<Pagination>
  <PaginationContent>
    <PaginationItem><PaginationPrevious href="#" /></PaginationItem>
    <PaginationItem><PaginationLink href="#" isActive>2</PaginationLink></PaginationItem>
    <PaginationItem><PaginationNext href="#" /></PaginationItem>
  </PaginationContent>
</Pagination>

import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet";

<Sheet>
  <SheetTrigger>Open filters</SheetTrigger>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>Filters</SheetTitle>
      <SheetDescription>Refine the result set.</SheetDescription>
    </SheetHeader>
  </SheetContent>
</Sheet>

import { Sidebar, SidebarContent, SidebarGroup } from "@/components/ui/sidebar";

<Sidebar>
  <SidebarContent>
    <SidebarGroup>
      <nav className="space-y-1">
        <a href="/overview">Overview</a>
        <a href="/projects">Projects</a>
      </nav>
    </SidebarGroup>
  </SidebarContent>
</Sidebar>

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

<Tabs defaultValue="overview">
  <TabsList>
    <TabsTrigger value="overview">Overview</TabsTrigger>
    <TabsTrigger value="activity">Activity</TabsTrigger>
  </TabsList>
  <TabsContent value="overview">Project health at a glance.</TabsContent>
  <TabsContent value="activity">Recent changes and events.</TabsContent>
</Tabs>

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

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger aria-label="Copy link">Copy</TooltipTrigger>
    <TooltipContent>Copy share link</TooltipContent>
  </Tooltip>
</TooltipProvider>

import { AnimatedList } from "@/components/ui/animated-list";

<AnimatedList>
  <Notification title="Payment received" time="15m ago" />
  <Notification title="New workspace member" time="10m ago" />
  <Notification title="Report exported" time="5m ago" />
</AnimatedList>

import { BentoCard, BentoGrid } from "@/components/ui/bento-grid";

<BentoGrid>
  <BentoCard name="Save your files" description="A larger feature story." className="md:col-span-2" />
  <BentoCard name="Notifications" description="A supporting feature." />
  <BentoCard name="Integrations" description="A supporting feature." />
</BentoGrid>

import { Marquee } from "@/components/ui/marquee";

<Marquee pauseOnHover>
  <span>Next.js</span>
  <span>React</span>
  <span>TypeScript</span>
  <span>Tailwind CSS</span>
</Marquee>

import { NumberTicker } from "@/components/ui/number-ticker";

<div>
  <p className="text-sm text-muted-foreground">Pages improved</p>
  <NumberTicker value={1284} className="text-4xl font-semibold" />
</div>

import { ShimmerButton } from "@/components/ui/shimmer-button";

<ShimmerButton className="shadow-2xl">
  Start building
</ShimmerButton>

import { Dock, DockIcon } from "@/components/ui/dock";
import { Home, Search, Settings } from "lucide-react";

<Dock>
  <DockIcon><Home /></DockIcon>
  <DockIcon><Search /></DockIcon>
  <DockIcon><Settings /></DockIcon>
</Dock>

import { CardBody, CardContainer, CardItem } from "@/components/ui/3d-card";

<CardContainer>
  <CardBody>
    <CardItem translateZ="50" className="text-xl font-bold">
      Featured project
    </CardItem>
    <CardItem translateZ="60" className="mt-4">
      A layered card with depth on hover.
    </CardItem>
  </CardBody>
</CardContainer>

import { BackgroundBeams } from "@/components/ui/background-beams";

<section className="relative overflow-hidden rounded-2xl">
  <BackgroundBeams />
  <div className="relative z-10 px-6 py-16">
    <h1>Build a sharper interface.</h1>
  </div>
</section>

import { CardSpotlight } from "@/components/ui/card-spotlight";

<CardSpotlight className="rounded-xl border p-6">
  <h3 className="text-xl font-bold">Team workspace</h3>
  <p className="mt-2 text-sm text-muted-foreground">
    Keep the next action visible for everyone.
  </p>
</CardSpotlight>

import { InfiniteMovingCards } from "@/components/ui/infinite-moving-cards";

<InfiniteMovingCards
  items={testimonials}
  direction="right"
  speed="slow"
/>