Molly Ollys UI Kit

Current Version: v1.5.1

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

Page loader:

Start Stop

<Header appName="Portal" />

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

<!-- Page loader — call setPageLoaderState() once in your root layout alongside Header.
     The Header reads it from context automatically. -->
// root layout (+layout.svelte)
setPageLoaderState();

// any component
const pageLoader = getPageLoaderState();
pageLoader.start();   // animate the bar
pageLoader.stop();    // return to static line

<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>

<LayoutSection cols={2}>
  <FormItem label="First name">...</FormItem>
  <FormItem label="Last name">...</FormItem>
  <!-- LayoutItem for non-labeled content that needs grid placement -->
  <LayoutItem fullWidth>
    <Button type="submit">Save</Button>
  </LayoutItem>
</LayoutSection>

<!-- With title only -->
<LayoutItem title="Personal details">
  <dl>...</dl>
</LayoutItem>

<!-- card: wraps content in a Card component -->
<LayoutItem title="Address" card>
  {#snippet actions()}
    <Button size="sm" variant="secondary">Edit</Button>
  {/snippet}
  <dl>...</dl>
</LayoutItem>

<!-- detailCard: --surface-alt background with border/padding; actions anchored top-right -->
<LayoutItem title="Notes" card detailCard>
  <p>Some content</p>
</LayoutItem>

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

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

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

<!-- detailCard: --surface-alt background with border and padding -->
<LayoutSection cols={2} detailCard>
  <FormItem label="City">...</FormItem>
  <FormItem label="Postcode">...</FormItem>
</LayoutSection>

<!-- card: wraps in a Card component -->
<LayoutSection cols={2} card>
  <FormItem label="City">...</FormItem>
  <FormItem label="Postcode">...</FormItem>
</LayoutSection>

<!-- dashed: dashed border only -->
<LayoutSection cols={2} dashed>
  <FormItem label="City">...</FormItem>
  <FormItem label="Postcode">...</FormItem>
</LayoutSection>

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

<BadgeList 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)}
    <BadgeList 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
/>

With footer row

<Table
  {headers}
  {records}
  footer={{ item: "Total", qty: 6, amount: "£155.00" }}
/>

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 },
  ]}
/>

Default

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

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

Large

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

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

<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>

<LayoutSection 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>
</LayoutSection>

<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>

spinner

pulse

backlit (dark bg only)

layers

text

graph

line

image

<Loader />

<!-- Named variant -->
<Loader variant="pulse" />
<Loader variant="backlit" />
<Loader variant="layers" />
<Loader variant="text" />
<Loader variant="graph" />
<Loader variant="line" />
<Loader variant="image" />

<!-- Custom size — sets width on all variants -->
<Loader size={32} />
<Loader variant="pulse" size={64} />

<!-- image variant: custom background colour (default: --surface-alt) -->
<Loader variant="image" bg="var(--pink-light)" />

<!-- Accessible saving indicator -->
<Loader aria-label="Saving…" aria-live="polite" />

// 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" title="My panel">
  ...content...
</SidePanel>

<!-- With header actions -->
<SidePanel bind:open title="Edit record">
  {#snippet actions()}
    <Button size="sm" variant="ghost">Export</Button>
  {/snippet}
  ...content...
</SidePanel>

<!-- With footer -->
<SidePanel bind:open title="Edit record">
  ...content...
  {#snippet footer()}
    <Button size="sm" type="submit">Save</Button>
    <Button size="sm" variant="ghost" onclick={() => (open = false)}>Cancel</Button>
  {/snippet}
</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} />

<!-- root +layout.svelte -->
<script>
  import { ThemeSync } from "@molly-ollys/ui-kit";
  let theme = $state<"light" | "dark" | "system">("system");
</script>

<ThemeSync {theme} />
<slot />

import { SortState } from "@molly-ollys/ui-kit";

const sort = new SortState<"name" | "date">("name", "asc");

// Read sort state to pass to your API
$effect(() => {
  fetchData({ sortBy: sort.field, sortDir: sort.dir });
});

// Render a sortable column header
<button onclick={() => sort.toggle("name")}>
  Name {sort.indicator("name")}
</button>

// Pass pre-sorted rows — disable Table's built-in sort
<Table headers={[{ label: "Name", key: "name" }]} {records} />