UI Components

Overview

The template includes 14+ UI components that look native inside Figma. They're built with shadcn/ui and styled with Tailwind CSS.

Import them from @repo/ui:

import { Button, Input, Select } from "@repo/ui";

Run bun run storybook to see all components live in your browser.

Input components

Button

<Button onClick={handleClick}>Primary action</Button>
<Button variant="secondary">Cancel</Button>
<Button variant="outline">Settings</Button>
<Button variant="destructive">Delete</Button>
<Button disabled>Loading...</Button>

Variants: default, secondary, outline, ghost, destructive, link

Input

<Input placeholder="Enter a name..." value={name} onChange={e => setName(e.target.value)} />

Textarea

<Textarea placeholder="Longer text..." rows={3} />

Select

<Select value={selected} onValueChange={setSelected}>
  <SelectTrigger><SelectValue placeholder="Choose..." /></SelectTrigger>
  <SelectContent>
    <SelectItem value="opt1">Option 1</SelectItem>
    <SelectItem value="opt2">Option 2</SelectItem>
  </SelectContent>
</Select>

Checkbox, Switch, RadioGroup

<Checkbox checked={enabled} onCheckedChange={setEnabled} />
<Switch checked={on} onCheckedChange={setOn} />
<RadioGroup value={choice} onValueChange={setChoice}>
  <RadioGroupItem value="a" /> Option A
  <RadioGroupItem value="b" /> Option B
</RadioGroup>

Display components

Icon

<Icon name="lucide:plus" />
<Icon name="lucide:info" />
<Icon name="lucide:star" />

Built-in icons: lucide:plus, lucide:info, lucide:star. Add more with registerIcons().

Type (text)

<Type size="large" weight="bold">Heading</Type>
<Type size="small">Body text</Type>
<Type as="h2" size="xlarge">Page Title</Type>

Alert

<Alert>
  <AlertDescription>Select at least one layer.</AlertDescription>
</Alert>

SectionTitle

<SectionTitle>Settings</SectionTitle>

Layout components

Accordion

<Accordion type="single" collapsible>
  <AccordionItem value="advanced">
    <AccordionTrigger>Advanced Settings</AccordionTrigger>
    <AccordionContent>Content here</AccordionContent>
  </AccordionItem>
</Accordion>

Styling with Tailwind CSS

All components accept a className prop for custom styling:

<div className="flex flex-col gap-2 p-4">
  <Button className="w-full">Full width button</Button>
</div>

UI Components

On this page