Without userName

Molly Ollys My App

Sign in

With userName

Molly Ollys My App

Joe Herbert Account Sign out

With inline links and userMessage

Molly Ollys My App

Account Sign out

<Header appName="Portal" />

<!-- With inline nav links -->
<Header
  appName="500 Club"
  links={[
    { href: "#how-it-works", label: "How it works" },
    { href: "#faq", label: "FAQ" },
  ]}
/>

<Nav
  links={[
    { href: "/dashboard", label: "Overview", active: true },
    { href: "/numbers", label: "My numbers" },
    { href: "/history", label: "Draw history" },
  ]}
/>

<Breadcrumb items={[
  { label: "Supporters", href: "/supporters" },
  { label: "Jane Smith", href: "/supporters/abc-123" },
  { label: "Edit" },
]} />

<SectionTitle>Personal details</SectionTitle>

<HorizontalRule />

<HorizontalRule>or</HorizontalRule>

<Badge variant="success">Active</Badge>

<TagList tags={["Svelte", "TypeScript", "bits-ui"]} />

<Card variant="elevated" padding="lg">Content</Card>

<CardBlob>
  <h3>Supporters</h3>
  <span class="number">1,284</span>
</CardBlob>

Basic

<Table
  headers={[{ label: "Name", key: "name", sort: true }, ...]}
  records={rows}
  onrowclick={(row) => console.log(row)}
/>

With cell snippets

<Table {headers} {records}>
  {#snippet cell_status(row)}
    <Badge variant={statusVariant[row.status]}>{row.status}</Badge>
  {/snippet}
  {#snippet cell_tags(row)}
    <TagList tags={row.tags} />
  {/snippet}
</Table>

Multi-select rows (shift+click)

<Table
  clickable
  multiselect
  {headers}
  {records}
  onrowclick={(row) => console.log(row)}
  onrowcontextmenu={(rows) => console.log(rows)}
  onselectionchange={(rows) => (selected = rows)}
  bind:clearSelection
/>

Single

<AccordionTable title="FY 2025/26" {headers} {records}>
  {#snippet meta()}<span>4 donations</span><span>£2,400</span>{/snippet}
</AccordionTable>

Grouped

<AccordionTableGroup
  tables={[
    { title: "FY 2025/26", meta: ["4 donations", "£2,400"], headers, records },
    { title: "FY 2024/25", meta: ["2 donations", "£900"], headers, records },
  ]}
/>

<Accordion title="Users (3)">
  ...content...
</Accordion>

<!-- Controlled -->
<Accordion title="Settings" bind:open={isOpen}>
  ...content...
</Accordion>

<AccordionDetailSection title="Personal details">
  <dl>...</dl>
</AccordionDetailSection>

<!-- With meta -->
<AccordionDetailSection title="Pledge">
  {#snippet meta()}(optional){/snippet}
  <dl>...</dl>
</AccordionDetailSection>

<DetailSection title="Personal details">
  <dl>...</dl>
</DetailSection>

<DetailSection title="Address" card>
  <dl>...</dl>
</DetailSection>

<Form method="POST" action="?/add" result={form} successMessage="Saved." enhance={(el) => enhance(el)}>
  <Input name="name" placeholder="Name" />
  <FieldError field="name" />

  <Input name="email" type="email" placeholder="Email" />
  <FieldError field="email" />

  <Button type="submit" size="sm">Submit</Button>
</Form>

<FormSection cols={2}>
  <FormItem label="First name">...</FormItem>
  <FormItem label="Last name">...</FormItem>
  <!-- span={2} stretches across a specific number of columns -->
  <FormItem label="Email address" required span={2}>...</FormItem>
  <!-- fullWidth always spans all columns regardless of count -->
  <FormItem label="Notes" fullWidth>...</FormItem>
</FormSection>

<!-- Fixed columns -->
<FormSection cols={3}>
  <FormItem label="Title">...</FormItem>
  <FormItem label="First name" span={2}>...</FormItem>
  <FormItem label="Email" span={3}>...</FormItem>
</FormSection>

<!-- Responsive: wraps when items would be narrower than 160px -->
<FormSection minWidth={160}>
  <FormItem label="City">...</FormItem>
  <FormItem label="Postcode">...</FormItem>
</FormSection>

<!-- Nested: fullWidth spans parent grid, then defines its own -->
<FormSection cols={2}>
  <FormItem label="City">...</FormItem>
  <FormItem label="Postcode">...</FormItem>
  <FormSection fullWidth cols={3}>
    <FormItem label="Month">...</FormItem>
    <FormItem label="Day">...</FormItem>
    <FormItem label="Year">...</FormItem>
  </FormSection>
</FormSection>

<!-- Card: wraps in --surface-alt background with border and padding -->
<FormSection cols={2} card>
  <FormItem label="City">...</FormItem>
  <FormItem label="Postcode">...</FormItem>
</FormSection>

<Form result={form}>
  <Input name="username" placeholder="Username" />
  <FieldError field="username" />
</Form>

<Fieldset title="Personal details">
  <Input name="first-name" placeholder="First name" />
</Fieldset>

<!-- With actions -->
<Fieldset title="Address">
  {#snippet actions()}
    <Button size="sm" variant="secondary">Edit</Button>
  {/snippet}
  ...
</Fieldset>

<Input name="email" type="email" placeholder="you@example.com" bind:value />

<Textarea name="notes" rows=4 placeholder="Notes…" bind:value />

<UnitInput name="weight" before="kg" bind:value />
<UnitInput name="percentage" after="%" bind:value />

<MoneyInput name="price" bind:value />

<FileInput label="Attachment" onchange={f => (files = f)} />

<!-- Multiple + type filter -->
<FileInput label="Documents" multiple accept=".pdf,.docx" buttonText="Choose Files" onchange={handler} />

<Checkbox name="accept" label="I agree" bind:checked />

<Toggle name="feature" label="Enable feature" bind:checked />

<ToggleGroup type="single" {options} {value} allowEmpty={false} {onValueChange} />

<Select name="type" options={opts} bind:value clearable />

<SelectSearch name="country" options={opts} bind:value />

<MultiSelect label="Status" options={opts} {selected} {onchange} />

<MultiSelectSearch options={opts} {selected} {onchange} showChips {onChipClick} />

<DatePicker name="date" bind:value />

<DateRangePicker startName="from" endName="to" bind:startValue bind:endValue />

<DateSingleMultiPicker startName="from" endName="to" bind:startValue bind:endValue bind:multiDay />

<Button variant="secondary" size="sm" onclick={handler}>Label</Button>

<SearchButton bind:value onsearch={handler} placeholder="Search…" />

<Link href="/supporters/123">View supporter</Link>

<!-- External -->
<Link href="https://example.com" target="_blank" rel="noopener noreferrer">External</Link>

<CopyButton text={value} title="Copy email" oncopy={() => toast.success("Copied.")} />

<ConfirmDialog title="Delete?" message="This cannot be undone." onclose={close} open={showDialog}> 
  <Button variant="danger" onclick={confirm}>Delete</Button>
  <Button variant="ghost" onclick={close}>Cancel</Button>
</ConfirmDialog>

// root layout
setToastState();
<Toast />

// any component
const toast = getToastState();
toast.success("Saved!");

<Modal open={showModal} title="My Modal" onclose={() => (showModal = false)}>
  <p>Modal content here.</p>
</Modal>

<SidePanel bind:open width={400} side="right" ariaLabel="My panel">
  ...content...
</SidePanel>

<DocumentViewerPanel bind:open src={url} filename="photo.jpg" mimeType="image/jpeg" downloadUrl={url} />
<DocumentViewerPanel bind:open src="/dummy-pdf.pdf" filename="dummy-pdf.pdf" mimeType="application/pdf" downloadUrl="/dummy-pdf.pdf" />

<HistoryPanel bind:open {history} fieldLabels={{ first_name: "First name" }} />

<AddressAutofill onselect={addr => console.log(addr)} />

<!-- Single-select -->
<EntitySearch bind:value endpoint="/api/supporters" label="Supporter" currentLabel="Jo Smith" onselect={handleSelect} />

<!-- Multi-select -->
<EntitySearch multiple bind:selected endpoint="/api/supporters" label="Supporters" onmultiselect={handleMultiSelect} />