Every standard element, running

import { Button } from '$lib/ui';

<Button on:click={save}>Save</Button>
<Button variant="secondary">Cancel</Button>
<Button variant="ghost" size="sm">Skip</Button>
<Button variant="danger" loading={deleting}>Delete</Button>
<Button href="/documentation">Read the docs</Button>

import { Menu } from '$lib/ui';

<Menu
  label="Actions"
  items={[
    { id: 'edit', label: 'Edit' },
    { id: 'archive', label: 'Archive', disabled: true },
    { id: 'delete', label: 'Delete', danger: true }
  ]}
  on:select={(e) => run(e.detail.id)}
/>

import { DropdownMenu } from '$lib/ui';

<DropdownMenu
  label="View"
  bind:state={view}
  groups={[
    { items: [{ id: 'refresh', label: 'Refresh', shortcut: '⌘R' }] },
    { label: 'Show', items: [
      { id: 'hidden', label: 'Hidden files', checkbox: true },
      { id: 'ext', label: 'File extensions', checkbox: true }
    ] },
    { label: 'Sort by', radio: 'sort', items: [
      { id: 'name', label: 'Name' },
      { id: 'modified', label: 'Date modified' }
    ] }
  ]}
  on:select={(e) => run(e.detail.id)}
  on:change={(e) => save(e.detail.id, e.detail.value)}
/>

import { Command } from '$lib/ui';

import { isCommandShortcut } from '$lib/ui/overlay-logic';

<svelte:window on:keydown={(e) => {
  if (isCommandShortcut(e)) { e.preventDefault(); paletteOpen = true; }
}} />

<Command
  dialog
  bind:open={paletteOpen}
  shortcut="⌘K"
  items={[
    { id: 'new', label: 'New project', group: 'Projects', shortcut: '⌘N' },
    { id: 'settings', label: 'Settings', group: 'Account', keywords: ['preferences'] }
  ]}
  on:select={(e) => run(e.detail.id)}
/>

import { Toggle } from '$lib/ui';

<Toggle bind:pressed={bold}>Bold</Toggle>
<Toggle bind:pressed={pinned} label="Pin" variant="outline" size="sm">📌</Toggle>

import { ToggleGroup } from '$lib/ui';

<ToggleGroup label="Alignment" bind:value={align}
  items={[{ value: 'left', label: 'Left' }, { value: 'center', label: 'Centre' }]} />
<ToggleGroup label="Style" type="multiple" bind:value={styles}
  items={[{ value: 'b', label: 'Bold' }, { value: 'i', label: 'Italic' }]} />

import { ButtonGroup, Button } from '$lib/ui';

<ButtonGroup label="Text alignment">
  <Button variant="secondary">Left</Button>
  <Button variant="secondary">Centre</Button>
  <Button variant="secondary">Right</Button>
</ButtonGroup>

import { TextInput } from '$lib/ui';

<TextInput label="Email" type="email" bind:value={email}
  hint="We never share it." error={emailError} required />

import { Textarea } from '$lib/ui';

<Textarea label="Bio" bind:value={bio} maxlength={160} />

import { Select } from '$lib/ui';

<Select label="Plan" bind:value={plan} placeholder="Choose a plan"
  options={[{ value: 'free', label: 'Free' }, { value: 'pro', label: 'Pro' }]} />

import { Checkbox } from '$lib/ui';

<Checkbox label="Email me updates" hint="About once a month." bind:checked />

import { RadioGroup } from '$lib/ui';

<RadioGroup legend="Billing" bind:value={billing} inline
  options={[{ value: 'monthly', label: 'Monthly' }, { value: 'yearly', label: 'Yearly' }]} />

import { Switch } from '$lib/ui';

<Switch label="Notifications" bind:checked={notify} />

import { Slider } from '$lib/ui';

<Slider label="Volume" bind:value={volume} unit="%" />

import { Field } from '$lib/ui';

<Field label="Colour" hint="Any CSS colour" let:id let:describedBy>
  <input {id} type="color" aria-describedby={describedBy} />
</Field>

import { Combobox } from '$lib/ui';

<Combobox label="Timezone" bind:value={zone} creatable
  options={[{ value: 'Europe/Berlin', label: 'Berlin' }, { value: 'Europe/Zurich', label: 'Zürich' }]}
  on:create={(e) => add(e.detail.value)} />

import { Calendar } from '$lib/ui';

<Calendar bind:value={day} min="2026-01-01" weekStartsOn={1} locale="en-GB"
  isDisabled={(iso) => [0, 6].includes(new Date(iso).getUTCDay())} />

import { DatePicker } from '$lib/ui';

<DatePicker label="Start date" bind:value={start} min={today} hint="yyyy-mm-dd" />

import { InputOTP } from '$lib/ui';

<InputOTP bind:value={code} length={6} on:complete={(e) => verify(e.detail.value)} />

import { InputGroup, Button } from '$lib/ui';

<InputGroup label="Website" prefix="https://" suffix=".com" bind:value={site} />
<InputGroup label="Search" type="search" bind:value={q}>
  <Button slot="trailing" size="sm">Go</Button>
</InputGroup>

import { NumberInput } from '$lib/ui';

<NumberInput label="Guests" bind:value={guests} min={1} max={12} />
<NumberInput label="Weight" bind:value={kg} step={0.5} unit="kg" />

import { TagInput } from '$lib/ui';

<TagInput label="Topics" bind:tags max={5}
  validate={(t) => (t.length > 20 ? 'Keep it under 20 characters.' : '')} />

import { FileDrop } from '$lib/ui';

<FileDrop label="Attachments" bind:files accept="image/*,.pdf" maxSize={5 * 1024 * 1024}
  multiple on:reject={(e) => console.warn(e.detail.rejections)} />

import { Alert } from '$lib/ui';

<Alert tone="warning" title="Trial ends soon" dismissible>Three days left.</Alert>

import { Toaster, toast } from '$lib/ui';

<!-- once, in +layout.svelte -->
<Toaster />

toast.success('Saved');
toast.danger('Could not reach the server', 0); // 0 = stays until dismissed

import { Badge } from '$lib/ui';

<Badge tone="success">Live</Badge>

import { Progress } from '$lib/ui';

<Progress label="Uploading" value={uploaded} max={total} />

import { Spinner } from '$lib/ui';

<Spinner label="Saving" />

import { Skeleton } from '$lib/ui';

<Skeleton shape="circle" height="3rem" />
<Skeleton lines={3} />

import { Dialog, Button } from '$lib/ui';

<Dialog bind:open title="Delete project?" description="This cannot be undone.">
  <svelte:fragment slot="actions">
    <Button variant="secondary" on:click={() => (open = false)}>Cancel</Button>
    <Button variant="danger" on:click={remove}>Delete</Button>
  </svelte:fragment>
</Dialog>

import { Tooltip } from '$lib/ui';

<Tooltip text="Copies the link"><button>Copy</button></Tooltip>

import { Popover, Button, TextInput } from '$lib/ui';

<Popover title="Share" placement="bottom" align="start" bind:open>
  <Button slot="trigger" variant="secondary">Share</Button>
  <TextInput label="Link" value={link} readonly />
  <Button size="sm" on:click={copy}>Copy link</Button>
</Popover>

import { HoverCard } from '$lib/ui';

<HoverCard openDelay={500} closeDelay={200}>
  <a slot="trigger" href="/people/ada">@ada</a>
  <strong>Ada Lovelace</strong>
  <p>Wrote the first published program.</p>
</HoverCard>

import { Sheet, Button } from '$lib/ui';

<Sheet bind:open side="right" title="Filters" description="Narrow the list.">
  …
  <svelte:fragment slot="actions">
    <Button variant="secondary" on:click={() => (open = false)}>Close</Button>
    <Button on:click={apply}>Apply</Button>
  </svelte:fragment>
</Sheet>

import { AlertDialog } from '$lib/ui';

<AlertDialog
  bind:open
  title="Delete project?"
  description="The project and its deploys go for good."
  confirmLabel="Delete"
  tone="danger"
  on:confirm={remove}
/>

import { ContextMenu } from '$lib/ui';

<ContextMenu
  label="File actions"
  items={[
    { id: 'open', label: 'Open', shortcut: '↵' },
    { id: 'rename', label: 'Rename', shortcut: 'F2' },
    { separator: true },
    { id: 'delete', label: 'Delete', danger: true }
  ]}
  on:select={(e) => run(e.detail.id)}
>
  <button class="file">report.pdf</button>
</ContextMenu>

import { Tabs } from '$lib/ui';

<Tabs tabs={[{ id: 'code', label: 'Code' }, { id: 'preview', label: 'Preview' }]}
  bind:active let:active>
  {#if active === 'code'}…{:else}…{/if}
</Tabs>

import { Accordion } from '$lib/ui';

<Accordion exclusive items={[
  { title: 'Is it free?', content: 'Yes, MIT-licensed.' },
  { title: 'Where does it run?', content: 'Cloudflare.' }
]} />

import { Breadcrumbs } from '$lib/ui';

<Breadcrumbs items={[{ label: 'Home', href: '/' }, { label: 'Docs', href: '/documentation' }, { label: 'Tabs' }]} />

import { Pagination } from '$lib/ui';

<Pagination bind:page total={24} />
<Pagination page={2} total={24} href={(p) => `?page=${p}`} />

import { Menubar } from '$lib/ui';

<Menubar
  label="Editor"
  menus={[
    { id: 'file', label: 'File', items: [
      { id: 'new', label: 'New', shortcut: '⌘N' },
      { separator: true },
      { id: 'close', label: 'Close', shortcut: '⌘W' }
    ] },
    { id: 'edit', label: 'Edit', items: [{ id: 'undo', label: 'Undo', shortcut: '⌘Z' }] }
  ]}
  on:select={(e) => run(e.detail.menu, e.detail.id)}
/>

import { Sidebar } from '$lib/ui';

<Sidebar bind:collapsed current={$page.url.pathname} sections={[
  { heading: 'Workspace', items: [
    { id: 'home', label: 'Home', href: '/', icon: '⌂' },
    { id: 'inbox', label: 'Inbox', href: '/inbox', icon: '✉', badge: 3 },
    { id: 'settings', label: 'Settings', icon: '⚙', children: [
      { id: 'profile', label: 'Profile', href: '/settings/profile' }
    ] }
  ] }
]} />

import { NavigationMenu } from '$lib/ui';

<NavigationMenu current={$page.url.pathname} items={[
  { id: 'home', label: 'Home', href: '/' },
  { id: 'product', label: 'Product', links: [
    { label: 'Components', href: '/components', description: 'Every element, running' },
    { label: 'Docs', href: '/documentation', description: 'Set up and deploy' }
  ] }
]} />

import { Stepper } from '$lib/ui';

<Stepper current={step} clickable on:select={(e) => (step = e.detail.index)} steps={[
  { label: 'Account', description: 'Name and email' },
  { label: 'Plan' },
  { label: 'Payment', error: cardDeclined },
  { label: 'Done' }
]} />

import { Container } from '$lib/ui';

<Container size="md" as="main">…</Container>

import { Stack, Button } from '$lib/ui';

<Stack direction="row" gap="sm" justify="between" align="center" wrap>
  <h2>Projects</h2>
  <Button>New project</Button>
</Stack>

import { Separator } from '$lib/ui';

<Separator />
<Separator label="or" decorative={false} />
<Separator orientation="vertical" />

import { AspectRatio } from '$lib/ui';

<AspectRatio ratio="16/9">
  <img src={cover} alt="The launch event" />
</AspectRatio>

import { ScrollArea } from '$lib/ui';

<ScrollArea label="Release notes" maxHeight="16rem">
  {#each notes as note}<p>{note}</p>{/each}
</ScrollArea>

import { Resizable } from '$lib/ui';

<Resizable bind:size min={20} max={80}>
  <nav slot="first">Files</nav>
  <section slot="second">Editor</section>
</Resizable>

import { Collapsible } from '$lib/ui';

<Collapsible label="Show advanced options" bind:open>
  <TextInput label="Webhook URL" bind:value={webhook} />
</Collapsible>

import { Card, Button } from '$lib/ui';

<Card title="Pro plan">
  Everything in Free, plus custom domains.
  <svelte:fragment slot="footer"><Button>Upgrade</Button></svelte:fragment>
</Card>

import { Table } from '$lib/ui';

<Table caption="Deploys" {rows} columns={[
  { key: 'branch', label: 'Branch', sortable: true },
  { key: 'minutes', label: 'Minutes', sortable: true, align: 'end' }
]} />

import { Avatar } from '$lib/ui';

<Avatar name="Ada Lovelace" src={user.image} />

import { Kbd } from '$lib/ui';

<Kbd keys={['Ctrl', 'K']} />

import { EmptyState, Button } from '$lib/ui';

<EmptyState icon="✨" title="No projects yet" description="Make the first one.">
  <Button>New project</Button>
</EmptyState>

import { DataTable, Button } from '$lib/ui';

<DataTable caption="Team" {rows} rowKey="id" selectable bind:selected
  columns={[
    { key: 'name', label: 'Name', sortable: true },
    { key: 'role', label: 'Role' },
    { key: 'commits', label: 'Commits', sortable: true, align: 'end',
      format: (v) => Number(v).toLocaleString() }
  ]}
  on:selection={(e) => (picked = e.detail.selected)}>
  <svelte:fragment slot="toolbar" let:selected>
    <Button size="sm" variant="danger" disabled={!selected.length}>Remove</Button>
  </svelte:fragment>
</DataTable>

import { BarChart } from '$lib/ui';

<BarChart title="Deploys per day" labels={['Mon', 'Tue', 'Wed', 'Thu', 'Fri']}
  series={[
    { name: 'Production', values: [4, 7, 5, 9, 6] },
    { name: 'Preview', values: [12, 9, 14, 11, 8] }
  ]} />

import { LineChart } from '$lib/ui';

<LineChart title="Visitors" area labels={days}
  series={[
    { name: 'This week', values: [320, 410, 380, 520, 610, 450, 390] },
    { name: 'Last week', values: [280, 300, null, 410, 470, 400, 350] }
  ]} />

import { DonutChart } from '$lib/ui';

<DonutChart title="Traffic sources" data={[
  { label: 'Search', value: 5200 },
  { label: 'Direct', value: 3100 },
  { label: 'Social', value: 1400 }
]} />

import { Carousel } from '$lib/ui';

<Carousel label="Highlights" items={slides} bind:index autoplay={5000} let:item>
  <img src={item.image} alt={item.alt} />
</Carousel>

import { Item, Avatar, Button } from '$lib/ui';

<Item title="Ada Lovelace" description="Reviewed your pull request" meta="2h" href="/people/ada">
  <Avatar slot="media" name="Ada Lovelace" size="sm" />
  <Button slot="actions" size="sm" variant="ghost">Reply</Button>
</Item>

import { Timeline } from '$lib/ui';

<Timeline label="Deploy history" items={[
  { time: '9:41', datetime: '2026-10-03T09:41', title: 'Deployed to production', tone: 'success' },
  { time: '9:30', datetime: '2026-10-03T09:30', title: 'Checks failed on preview', tone: 'danger' }
]} />

import { Stat } from '$lib/ui';

<Stat label="Revenue" value="$48,210" delta={12.4} help="vs last month" series={revenue} />
<Stat label="Error rate" value="0.42%" delta={-18} invert />

import { AvatarGroup } from '$lib/ui';

<AvatarGroup label="Reviewers" max={3} people={[
  { name: 'Ada Lovelace' }, { name: 'Alan Turing' },
  { name: 'Grace Hopper' }, { name: 'Edsger Dijkstra' }
]} />

import { CodeBlock } from '$lib/ui';

<CodeBlock filename="src/routes/+page.svelte" language="svelte" lineNumbers code={source} />

import { Prose } from '$lib/ui';

<Prose>{@html post.html}</Prose>

{ type: 'stat', props: { label: 'Signups', value: '312', delta: -4, series: [42, 39, 44, 37] } }

{ type: 'meter', props: { label: 'Storage', value: 8.2, goal: 10, unit: ' GB', limit: true } }

{ type: 'clock', props: { label: 'Lisbon', timeZone: 'Europe/Lisbon' } }

{ type: 'checklist', props: { items: [{ id: 'a', text: 'Write tests', done: true }] } }

{ type: 'notes', props: { text: 'Remember the release notes.' } }

{ type: 'links', props: { links: [{ label: 'Docs', href: '/documentation' }] } }