Back to home

Component Kitchen Sink

All themed UI components available in this prototype.

Buttons

Variants

<Button variant="default | outline | secondary | ghost | link | destructive | success">

Sizes

<Button size="xs | sm | default | lg">

Icon buttons

<Button size="icon-xs | icon-sm | icon | icon-lg">

With icons

States

Inputs

Text Input

<Label htmlFor="id">Label</Label>
<Input id="id" placeholder="..." />

Email Input

Password Input

Search Input

<div className="relative">
  <Search className="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-gray-400" />
  <Input className="pl-9" placeholder="Search..." />
</div>

Disabled Input

Select

Default Select

<Select>
  <SelectTrigger>
    <SelectValue placeholder="..." />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="x">Label</SelectItem>
  </SelectContent>
</Select>

Small Select

<SelectTrigger size="sm">

Checkbox

Default Checkbox

<Checkbox id="id" />
<Label htmlFor="id" className="mb-0">Label</Label>

Badges

Variants

DefaultActiveDraftInactiveOutlineBlueGreenYellowRed
<Badge variant="default | active | draft | inactive | outline | blue | green | yellow | red">

Label

Usage

<Label htmlFor="input-id">Label text</Label>

Field & FieldGroup

FieldGroup with multiple fields

<FieldGroup>
  <Field>
    <Label>...</Label>
    <Input />
  </Field>
</FieldGroup>

Dialog

Default Dialog

<Dialog>
  <DialogTrigger asChild>
    <Button>Open</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Title</DialogTitle>
      <DialogDescription>Description</DialogDescription>
    </DialogHeader>
    <DialogFooter>...</DialogFooter>
  </DialogContent>
</Dialog>

Dropdown Menu

Default Dropdown

<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button>Actions</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuItem>Item</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

Tooltip

Default Tooltip

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger asChild>
      <Button>Hover</Button>
    </TooltipTrigger>
    <TooltipContent>Tip text</TooltipContent>
  </Tooltip>
</TooltipProvider>

Calendar

Date Picker

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

Custom Components

AvatarBadge

JD
3
AB
7
<AvatarBadge initials="JD" name="John Doe" count={3} size="sm | md" />

DaysProgressRing

45days
Blue (on track)
5days
Green (tasks today)
0days
Red (past due)
<DaysProgressRing daysRemaining={45} percent={30} color="blue | green | red" size={40} />

TooltipBadgeGroup

3512
<TooltipBadgeGroup badges={[
  { value: 3, tooltip: "Overdue", className: "bg-rose-100 text-rose-600" },
]} />

Form Example

A complete form using Field, FieldGroup, Label, Input, Select, Checkbox, and Button together.