<Button>Deploy</Button>
<Button variant="outline">Cancel</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="destructive">Delete Project</Button>
<Button variant="link">Docs</Button>

<Button size="xs">Save</Button>
<Button size="sm">Save</Button>
<Button>Save</Button>
<Button size="lg">Save</Button>
<Button size="icon" aria-label="More" />

<Button disabled>Save</Button>
<Button variant="outline" disabled>Cancel</Button>
<Button variant="destructive" disabled>Delete Project</Button>

<ButtonGroup>
  <Button variant="outline">Preview</Button>
  <Button variant="outline">Copy</Button>
  <Button>Deploy</Button>
</ButtonGroup>

<Toggle>Bold</Toggle>
<Toggle variant="outline" defaultPressed>Italic</Toggle>

<ToggleGroup defaultValue={['source']}>
  <ToggleGroupItem value="source">Source</ToggleGroupItem>
  <ToggleGroupItem value="output">Output</ToggleGroupItem>
</ToggleGroup>

<Input placeholder="Email Address" />

<Input disabled placeholder="Email Address" />

<Input aria-invalid defaultValue="not-an-email" />

<Field>
  <FieldLabel htmlFor="email">Email Address</FieldLabel>
  <Input id="email" placeholder="you@example.com" />
  <FieldDescription>We will never share your email.</FieldDescription>
</Field>

<Field data-disabled="true">
  <FieldLabel htmlFor="email">Email Address</FieldLabel>
  <Input id="email" disabled />
</Field>

<Field data-invalid="true">
  <FieldLabel htmlFor="email">Email Address</FieldLabel>
  <Input id="email" aria-invalid defaultValue="not-an-email" />
  <FieldError>Enter a valid email address.</FieldError>
</Field>

<Textarea placeholder="Describe Your Project" />

<Textarea disabled placeholder="Describe Your Project" />

<Textarea aria-invalid defaultValue="Too short." />

<InputGroup>
  <InputGroupAddon>
    <InputGroupText>https://</InputGroupText>
  </InputGroupAddon>
  <InputGroupInput placeholder="nin.dev" />
</InputGroup>

<InputGroup>
  <InputGroupInput placeholder="80" />
  <InputGroupAddon align="inline-end">
    <InputGroupText>ms</InputGroupText>
  </InputGroupAddon>
</InputGroup>

<Field orientation="horizontal">
  <Checkbox id="terms" />
  <FieldContent>
    <FieldLabel htmlFor="terms">Accept Terms</FieldLabel>
    <FieldDescription>Read the agreement before continuing.</FieldDescription>
  </FieldContent>
</Field>

<Field orientation="horizontal" data-disabled="true">
  <Checkbox id="terms" disabled />
  <FieldLabel htmlFor="terms">Accept Terms</FieldLabel>
</Field>

<Field orientation="horizontal" data-invalid="true">
  <Checkbox id="terms" aria-invalid />
  <FieldLabel htmlFor="terms">Accept Terms</FieldLabel>
</Field>

<RadioGroup defaultValue="email">
  <Field orientation="horizontal">
    <RadioGroupItem value="email" id="email" />
    <FieldLabel htmlFor="email">Email</FieldLabel>
  </Field>
</RadioGroup>

<RadioGroup defaultValue="email" disabled>…</RadioGroup>

<Field orientation="horizontal">
  <Switch id="mail" defaultChecked />
  <FieldContent>
    <FieldLabel htmlFor="mail">Email Notifications</FieldLabel>
  </FieldContent>
</Field>

<Switch size="sm" defaultChecked />
<Switch defaultChecked />

<Switch disabled defaultChecked />

<Select defaultValue="prod">
  <SelectTrigger>
    <SelectValue placeholder="Environment" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="prod">Production</SelectItem>
    <SelectItem value="preview">Preview</SelectItem>
  </SelectContent>
</Select>

<Select defaultValue="prod" disabled>…</Select>

<NativeSelect defaultValue="prod">
  <NativeSelectOption value="prod">Production</NativeSelectOption>
  <NativeSelectOption value="preview">Preview</NativeSelectOption>
</NativeSelect>

<NativeSelect defaultValue="prod" disabled>…</NativeSelect>

<Combobox>
  <ComboboxInput placeholder="Region" />
  <ComboboxContent>
    <ComboboxList>
      <ComboboxItem value="iad">Washington, D.C.</ComboboxItem>
      <ComboboxItem value="sfo">San Francisco</ComboboxItem>
    </ComboboxList>
  </ComboboxContent>
</Combobox>

<InputOTP maxLength={6}>
  <InputOTPGroup>
    <InputOTPSlot index={0} />
    {/* … index 1–5 */}
  </InputOTPGroup>
</InputOTP>

<InputOTP maxLength={6} disabled>…</InputOTP>

<InputOTP maxLength={6} aria-invalid>…</InputOTP>

<Slider defaultValue={[40]} />

<Slider defaultValue={[40]} disabled />

<Calendar mode="single" selected={date} onSelect={setDate} />

<DatePicker value={date} onValueChange={setDate} placeholder="Pick a date" />

<DropdownMenu>
  <DropdownMenuTrigger render={<Button variant="outline" />}>Open Menu</DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuItem>Edit Project</DropdownMenuItem>
    <DropdownMenuItem variant="destructive">Delete Project</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

<ContextMenu>
  <ContextMenuTrigger>Right click here</ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuItem>Open</ContextMenuItem>
    <ContextMenuItem variant="destructive">Delete</ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>

<Menubar>
  <MenubarMenu>
    <MenubarTrigger>File</MenubarTrigger>
    <MenubarContent>
      <MenubarItem>New Project</MenubarItem>
    </MenubarContent>
  </MenubarMenu>
</Menubar>

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger render={<Button size="icon" aria-label="Copy Link" />} />
    <TooltipContent>Copy Link</TooltipContent>
  </Tooltip>
</TooltipProvider>

<HoverCard>
  <HoverCardTrigger render={<Button variant="ghost" />}>@nin</HoverCardTrigger>
  <HoverCardContent>Product UI for nin.dev</HoverCardContent>
</HoverCard>

<Popover>
  <PopoverTrigger render={<Button variant="outline" />}>Open Popover</PopoverTrigger>
  <PopoverContent>
    <PopoverHeader>
      <PopoverTitle>Deploy Hook</PopoverTitle>
    </PopoverHeader>
  </PopoverContent>
</Popover>

<Dialog>
  <DialogTrigger render={<Button variant="outline" />}>Open Dialog</DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Delete Project</DialogTitle>
      <DialogDescription>This action cannot be undone.</DialogDescription>
    </DialogHeader>
    <DialogFooter>
      <DialogClose render={<Button variant="outline" />}>Cancel</DialogClose>
      <Button variant="destructive">Delete Project</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

<AlertDialog>
  <AlertDialogTrigger render={<Button variant="destructive" />}>Delete Project</AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Delete Project</AlertDialogTitle>
      <AlertDialogDescription>This cannot be undone.</AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction variant="destructive">Delete Project</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

<Sheet>
  <SheetTrigger render={<Button variant="outline" />}>Open Sheet</SheetTrigger>
  <SheetContent side="right">
    <SheetHeader>
      <SheetTitle>Project</SheetTitle>
    </SheetHeader>
    <SheetFooter>
      <Button>Save</Button>
    </SheetFooter>
  </SheetContent>
</Sheet>

<Drawer>
  <DrawerTrigger render={<Button variant="outline" />}>Open Drawer</DrawerTrigger>
  <DrawerContent>
    <DrawerHeader>
      <DrawerTitle>Filters</DrawerTitle>
    </DrawerHeader>
  </DrawerContent>
</Drawer>

<CommandDialog open={open} onOpenChange={setOpen}>
  <CommandInput placeholder="Search projects…" />
  <CommandList>
    <CommandEmpty>No results.</CommandEmpty>
    <CommandGroup heading="Projects">
      <CommandItem>nin</CommandItem>
    </CommandGroup>
  </CommandList>
</CommandDialog>

<Alert>
  <AlertTitle>Update Available</AlertTitle>
  <AlertDescription>A new version is ready to install.</AlertDescription>
</Alert>

<Alert variant="destructive">
  <AlertTitle>Delete Failed</AlertTitle>
  <AlertDescription>The project could not be removed. Try again.</AlertDescription>
</Alert>

<Empty>
  <EmptyHeader>
    <EmptyTitle>No Projects Yet</EmptyTitle>
    <EmptyDescription>Push a repository to create your first project.</EmptyDescription>
  </EmptyHeader>
  <EmptyContent>
    <Button>Create Project</Button>
  </EmptyContent>
</Empty>

<Button variant="outline" onClick={() => toast('Deploy queued')}>
  Show Toast
</Button>

<Skeleton className="h-4 w-40" />
<Skeleton className="h-4 w-64" />
<Skeleton className="h-8 w-full" />

<Progress value={64}>
  <ProgressLabel>Upload</ProgressLabel>
  <ProgressValue />
</Progress>

<Spinner />
<Spinner className="size-6" />

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/projects">Projects</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Settings</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

<Pagination>
  <PaginationContent>
    <PaginationItem>
      <PaginationPrevious href="?page=1" />
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="?page=1" isActive>1</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationNext href="?page=2" />
    </PaginationItem>
  </PaginationContent>
</Pagination>

<Tabs defaultValue="overview">
  <TabsList>
    <TabsTrigger value="overview">Overview</TabsTrigger>
    <TabsTrigger value="logs">Logs</TabsTrigger>
  </TabsList>
  <TabsContent value="overview">Deploy 14 finished in 38s.</TabsContent>
</Tabs>

<Tabs defaultValue="overview">
  <TabsList variant="line">
    <TabsTrigger value="overview">Overview</TabsTrigger>
    <TabsTrigger value="logs">Logs</TabsTrigger>
  </TabsList>
</Tabs>

<SidebarProvider>
  <Sidebar collapsible="none">
    <SidebarHeader>nin</SidebarHeader>
    <SidebarContent>
      <SidebarMenu>
        <SidebarMenuItem>
          <SidebarMenuButton isActive>Overview</SidebarMenuButton>
        </SidebarMenuItem>
      </SidebarMenu>
    </SidebarContent>
  </Sidebar>
  <SidebarInset>Main</SidebarInset>
</SidebarProvider>

<Avatar>
  <AvatarFallback>AL</AvatarFallback>
</Avatar>

<Avatar>
  <AvatarFallback className="animate-pulse" />
</Avatar>

<Avatar size="sm">…</Avatar>
<Avatar>…</Avatar>
<Avatar size="lg">…</Avatar>

<AvatarGroup>
  <Avatar><AvatarFallback>AL</AvatarFallback></Avatar>
  <Avatar><AvatarFallback>JD</AvatarFallback></Avatar>
  <AvatarGroupCount>+3</AvatarGroupCount>
</AvatarGroup>

<Avatar>
  <AvatarFallback>AL</AvatarFallback>
  <AvatarBadge />
</Avatar>

<Badge>12</Badge>
<Badge variant="secondary">Preview</Badge>
<Badge variant="outline">api / nin</Badge>
<Badge variant="destructive">Failed</Badge>

<Card>
  <CardHeader>
    <CardTitle>Production</CardTitle>
    <CardDescription>iad1 · ready</CardDescription>
  </CardHeader>
  <CardContent>Deploy 14 finished in 38s.</CardContent>
  <CardFooter>
    <Button>Open</Button>
  </CardFooter>
</Card>

<Table>
  <TableHeader>
    <TableRow>
      <TableHead>Project</TableHead>
      <TableHead>Status</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>nin</TableCell>
      <TableCell>Ready</TableCell>
    </TableRow>
  </TableBody>
</Table>

<Item>
  <ItemContent>
    <ItemTitle>Production</ItemTitle>
    <ItemDescription>iad1 · ready</ItemDescription>
  </ItemContent>
</Item>

<ChartContainer config={{ deploy: { label: 'Deploys', color: 'var(--chart-1)' } }}>
  <BarChart data={data}>
    <XAxis dataKey="month" />
    <ChartTooltip content={<ChartTooltipContent />} />
    <Bar dataKey="deploy" fill="var(--color-deploy)" />
  </BarChart>
</ChartContainer>

<KbdGroup>
  <Kbd>⌘</Kbd>
  <Kbd>K</Kbd>
</KbdGroup>

<p>Overview</p>
<Separator />
<p>Logs</p>

<Accordion defaultValue={['billing']}>
  <AccordionItem value="billing">
    <AccordionTrigger>Billing</AccordionTrigger>
    <AccordionContent>Invoices close on the first of the month.</AccordionContent>
  </AccordionItem>
</Accordion>

<Collapsible>
  <CollapsibleTrigger render={<Button variant="outline" />}>Show Details</CollapsibleTrigger>
  <CollapsibleContent>Commit 4530d29. Ready in 38s.</CollapsibleContent>
</Collapsible>

<ScrollArea className="h-32">
  {/* overflowing content */}
</ScrollArea>

<ResizablePanelGroup>
  <ResizablePanel defaultSize={50}>Source</ResizablePanel>
  <ResizableHandle withHandle />
  <ResizablePanel defaultSize={50}>Output</ResizablePanel>
</ResizablePanelGroup>

<AspectRatio ratio={16 / 9}>
  <img src="/cover.png" alt="" className="absolute inset-0 size-full object-cover" />
</AspectRatio>

<Carousel>
  <CarouselContent>
    <CarouselItem>Overview</CarouselItem>
    <CarouselItem>Logs</CarouselItem>
  </CarouselContent>
  <CarouselPrevious />
  <CarouselNext />
</Carousel>