<Badge text="paid" color="green" />
<Badge text="draft" color="gray" type="outline" />
<Badge color="gray" href="https://ci.example.com/my-repo">
  <span>CI</span>
  <StatusMark status="ready" label="Passing" />
</Badge>
<Badge text="system page" href="/system" navigate={router.navigate} />

<StatusMark status="ready" />
<StatusMark status="known-issue" label="Flaky on Safari" />
<StatusMark status="outcome" label="Acquired 2023" />

<Button variant="primary" size="md" onClick={save}>Save</Button>
<Button variant="danger" disabled>Delete</Button>
<Button type="submit" busy={saving.value} busyLabel="Confirming…">Confirm</Button>
<Button href="/reports" navigate={router.navigate}>Reports</Button>
<Button href="/book" size="none" class="px-6 py-3">Book a call</Button>
<Button hotkey="n" onClick={addNote}>New note</Button>
<Button hotkey="mod+enter" onClick={send}>Send</Button>
useSucceeded(saving.value, error.value, closeDialog) // once a save ends well

const theme = createThemeStore()
useEffect(() => theme.attach(), [])

<ThemeToggle store={theme} hotkey="t" />

<Stack>
  <Field id="name" label="Name"><Input id="name" /></Field>
  <Field id="email" label="Email"><Input id="email" type="email" /></Field>
</Stack>

<Grid minColumnWidth="sm">
  <Card>…</Card>
  <Card>…</Card>
  <Card>…</Card>
</Grid>

<Page>
  <PageTitle>Billing</PageTitle>
  <Section title="Invoices">…</Section>
  <Section title="Payment methods">…</Section>
</Page>

<Stack>
  <PageTitle headingLevel={4}>Transactions</PageTitle>
  <PageTitle headingLevel={5} class="text-xl sm:text-xl">Nested detail</PageTitle>
</Stack>

<PageHeader
  title="Groceries for the long weekend"
  subtitle="Personal"
  back={{ href: "/lists", label: "Back to lists" }}
  navigate={navigate}
  action={<PageAction label="New task" Icon={IconPlus} onClick={addTask} />}
  menu={<DropdownItem onClick={share}>Share</DropdownItem>}
/>
<PageHeader
  title={name}
  heading={
    <InlineEdit
      class="[&>button]:text-xl [&>button]:font-semibold sm:[&>button]:text-2xl"
      value={name}
      onSave={rename}
      inputLabel="List name"
    />
  }
/>

// Every value lives in the URL; `useUrlFilters` is in @spy4x/preact-signals.
const { filters: f } = useUrlFilters({
  q: { signal: useSignal(""), urlParam: "q", initialValue: "" },
  tags: { signal: useSignal(""), urlParam: "tags", initialValue: "" },
  mine: { signal: useSignal(""), urlParam: "mine", initialValue: "" },
  sort: { signal: useSignal("updated"), urlParam: "sort", initialValue: "updated" },
})

<FilterBar
  search={{ value: f.q.value, onChange: (q) => f.q.value = q, label: "Search notes", hotkeyHint: "/" }}
  filters={[{
    id: "tags",
    label: "Tags",
    chipLabel: "Tag",
    multiple: true,
    options: [{ value: "design", label: "Design", count: 12 }, { value: "plans", label: "Plans", count: 5 }],
    value: f.tags.value === "" ? [] : f.tags.value.split(","),
    onChange: (next) => f.tags.value = next.join(","),
  }]}
  toggles={[{
    id: "mine",
    label: "Created by me",
    pressed: f.mine.value === "1",
    onChange: (on) => f.mine.value = on ? "1" : "",
  }]}
  sort={{
    options: [{ value: "updated", label: "Last updated" }, { value: "title", label: "Title (A–Z)" }],
    value: f.sort.value,
    onChange: (sort) => f.sort.value = sort,
  }}
  count={`${shown.length} notes`}
/>

<FormatContext.Provider value={createFormatters({ timeZone: "Asia/Tokyo" })}>
  <OnDay at="2026-10-17T22:30:00.000Z" />
</FormatContext.Provider>

<Progress id="upload" label="Upload" value={42} tone="success" />
<Progress value={null} ariaLabel="Sync" />

<UsageMeter
  label="Groceries"
  used={41200}
  limit={50000}
  format={(cents) => formatMoney(cents, "EUR", locale)}
/>

<RunSteps
  aria-labelledby="measurements"
  labels={{ pending: "Not measured" }}
  steps={[
    {
      id: "download",
      label: "Download the data",
      state: "done",
      hint: "Budget: under 10 s",
      value: "2.4 s",
      verdict: { label: "Within budget", tone: "success" },
    },
    {
      id: "save",
      label: "Save to this device",
      state: "running",
      progress: { value: 3200, max: 10000, label: "3,200 of 10,000 records" },
    },
  ]}
/>

<ComparisonTable
  caption="How our app compares"
  products={["Our app", "Product A", "Product B", "Product C"]}
  rows={[
    { capability: "Works offline", values: ["yes", "partial", "no", "yes"] },
    { capability: "Export to CSV", note: "every field", values: ["yes", "yes", "partial", "no"] },
  ]}
  checkedOn={new Date("2026-10-01")}
  method="We read each product's official feature, pricing and help pages."
  fit="Our app is not for teams over fifty people."
/>

<FaqList
  name="faq"
  items={[
    { question: "Can I export my data?", answer: "Yes, as CSV.", id: "faq-export" },
    { question: "Is there a free plan?", answer: "Yes, for one person." },
  ]}
/>

<div class="grid gap-6 lg:grid-cols-3">
  <FeatureCard id="feature-sync" title="Works offline" Icon={IconSprout} href="/features#sync">
    Every record is on your device and syncs when you are back online.
  </FeatureCard>
  <FeatureCard
    id="feature-admin"
    title="An admin panel"
    href="/features#admin"
    wide
    media={<img src="/admin.png" alt="The admin panel's list of users" />}
  >
    Every feature has its operator view on a host of its own.
  </FeatureCard>
</div>

<Steps
  orientation="horizontal"
  items={[
    { title: "Sign up", text: "Create an account with your email." },
    { title: "Import", text: "Bring your records in from a CSV file." },
    { title: "Invite", text: "Add the people you work with." },
  ]}
/>

<Explorable
  title="What a yearly fee takes from your savings"
  lead="Change the fee; the bars show where 100 a month ends up."
  caption="Assumes 6% a year before fees."
  controls={<Slider label="Yearly fee" value={fee.value} onInput={(next) => fee.value = next} />}
>
  <Bars data={rows} reference={{ value: paidIn, label: "Paid in" }} />
</Explorable>

// The app's stylesheet imports the palettes after tokens.css:
// @import "@spy4x/preact-theme/theme-preview.css";
<ThemePreview>
  <Button variant="primary">Save</Button>
  <Badge text="Live" color="green" />
</ThemePreview>

<ScreenTour
  frame="plain"
  onSelect={(id) => track("tour", { step: id })}
  steps={[
    {
      id: "tour-dashboard",
      label: "Dashboard",
      group: "Monitor",
      text: "Every device on one map, with its state.",
      image: { src: "/dashboard.webp", alt: "The dashboard, a map of devices", width: 1280, height: 800 },
    },
    {
      id: "tour-alerts",
      label: "Alerts",
      group: "Monitor",
      image: { src: "/alerts.webp", alt: "The alerts list, newest first", width: 1280, height: 800 },
    },
  ]}
/>
<ScreenTour frame="phone" numbered steps={steps} viewFullSizeClass="rounded-full" />

<WindowFrame variant="plain" caption="The dashboard">
  <img src="/dashboard.png" alt="The dashboard with this month's totals" />
</WindowFrame>
<WindowFrame variant="browser" title="app.example.com/pricing">
  <img src="/pricing.png" alt="The pricing page" />
</WindowFrame>
<WindowFrame variant="terminal" title="Install">
  {"$ docker compose up -d"}
</WindowFrame>
<WindowFrame variant="phone">
  <img src="/phone.png" alt="The app on a phone" />
</WindowFrame>

<Prose as="article" html={renderedMarkdown} anchors copyCode />

<PostList posts={posts.map((post) => ({ ...post, lang: "en" }))} eagerFirst />

<DocsNav groups={groups} current="/docs/deploy" />

<PrevNext previous={{ href: "/docs/apps", title: "The three apps" }} next={next} />

<ChangeList months={months} />

<LookTile
  href="/jackets/zip-brown"
  name="Zip jacket"
  price="590.000 ₫"
  photo={{ variants: photoVariants, alt: "A brown zip jacket, worn closed" }}
  sizes={[{ label: "S" }, { label: "M" }, { label: "L", soldOut: true }]}
  chosenSize="M"
  colors={[{ name: "Brown", color: "#7a5230" }, { name: "Grey", color: "#8a8d91" }]}
  viewTransitionName="look-zip-brown"
/>

<LookGrid label="Stories">
  {posts.map((post, index) => (
    <StoryTile
      key={post.id}
      href={post.href}
      title={post.title}
      topic={post.topic}
      publishedAt={post.publishedAt}
      readMinutes={post.readMinutes}
      cover={post.cover}
      lead={index === 0}
      priority={index === 0}
    />
  ))}
</LookGrid>

<h1 class="text-6xl leading-tight font-extrabold tracking-tighter text-balance lg:text-9xl">
  Made to move.
</h1>
<LookGrid label="New in">
  {looks.map((look, index) => <LookTile key={look.id} {...look} priority={index === 0} />)}
</LookGrid>

<OrderBar
  form="order"
  message={message}
  actions={[
    { label: "Order on Telegram", shortLabel: "Telegram", href: telegramLink },
    { label: "Order on Zalo", shortLabel: "Zalo", name: "via", value: "zalo" },
  ]}
  secondary={{ label: "Add to list", icon: <IconPlus />, name: "add", value: item.id }}
  note="Same-day delivery in Da Nang if you order before 16:00."
/>

<Table
  caption="February transactions"
  captionClass="sr-only"
  headerSlot={<th scope="col">Merchant</th>}
  bodySlots={rows.map((row) => <td>{row.merchant}</td>)}
  bodyKeys={rows.map((row) => row.id)}
  footerSlot={<tr>…</tr>}
/>

<DataTable
  caption="Invoices"
  columns={[
    { key: "date", header: "Date", sortable: true },
    { key: "merchant", header: "Merchant", sortable: true },
    { key: "amount", header: "Amount", sortable: true, align: "right" },
    { id: "flag", header: "Flag", render: (row) => <Checkbox aria-label={`Flag ${row.merchant}`} /> },
  ]}
  rows={invoices}
  rowKey={(row) => row.id}
  sort={sort.value}
  onSortChange={(next) => sort.value = next}
  paging={{ page: page.value, pageSize: 3, onChange: (next) => page.value = next }}
/>

// Server mode: the server sorts and pages; DataTable shows its page as given.
<DataTable
  mode="server"
  caption="Invoices"
  columns={columns}
  rows={response.rows}
  rowKey={(row) => row.id}
  sort={sort.value}
  onSortChange={(next) => sort.value = next}
  paging={{
    page: page.value,
    pageSize: 3,
    total: response.total,
    onChange: (next) => page.value = next,
  }}
/>

<Avatar name="Ada Lovelace" size="lg" />
<Avatar name="Ada Lovelace" src={user.avatarUrl} />
<Avatar src={user.avatarUrl} alt="" />

<Tabs
  tabs={[
    { id: "overview", label: "Overview", content: <Overview />, hotkey: "1" },
    { id: "detail", label: "Detail", content: <Detail />, disabled: true },
  ]}
  active={view.value}
  onChange={(id) => view.value = id}
  label="Report views"
/>

<Pagination page={page.value} pageCount={24} onChange={(next) => page.value = next} />

<Tooltip content="Supplements the trigger" label="Total revenue" placement="end">
  <span>Revenue</span>
</Tooltip>

<Tooltip content="Archive the invoice" label="Archive" focusable={false}>
  <button type="button">Archive</button>
</Tooltip>

<ImageGallery
  images={[
    { src: hero, alt: "A hero shot" },
    { src: team, alt: "The team", thumbSrc: teamThumb },
  ]}
/>

<ImageGallery
  layout="strip"
  images={[{ src: shot, alt: "The dashboard", width: 1600, height: 900 }]}
/>

<ImageGallery
  layout="strip"
  hero
  captions
  navigation
  snap="center"
  counterLabel={(position, total) => `${position} / ${total}`}
  images={[{ src: shot, webpSrc: shotWebp, alt: "The dashboard", width: 1600, height: 900 }]}
/>

<Lightbox
  images={[{ src: "/shot.png", webpSrc: "/shot.webp", alt: "A hero shot" }]}
  index={index}
  open={open}
  onClose={() => setOpen(false)}
  onIndexChange={setIndex}
  controls="below"
/>

<AttachmentList
  id="note-files"
  items={[
    { id: "1", name: "tickets.png", size: 839680, type: "image/png", status: "ready",
      thumbnailSrc: thumb, src: full },
    { id: "2", name: "map.jpg", size: 1153434, type: "image/jpeg", status: "uploading",
      progress: 70 },
  ]}
  removingId={removingId}
  onDownload={download}
  onRemove={confirmRemove}
  onCancel={cancel}
  onRetry={retry}
/>

const open = useSignal(false)
const bindings = [
  { keys: "?", description: "Show keyboard shortcuts", handler: () => open.value = true },
  { keys: "mod+k", description: "Search", group: "Navigation", handler: openSearch },
]
useHotkeys(bindings)
// A sequence row, bound by a sequence matcher of your own
const rows = [...bindings, { keys: "g t", description: "Go to Today", group: "Navigation" }]

<ShortcutsDialog
  open={open.value}
  onClose={() => open.value = false}
  shortcuts={rows}
  footer={<p class="text-sm text-muted">Shortcuts don't work while you type in a field.</p>}
/>

<KanbanBoard
  columns={[
    { id: "todo", title: "To do" },
    { id: "doing", title: "Doing" },
    { id: "done", title: "Done" },
  ]}
  items={tasks.value}
  renderItem={(task) => task.title}
  itemLabel={(task) => task.title}
  onMove={(move) => tasks.value = moveKanbanItem(tasks.value, move)}
  onOpen={(task) => openEditor(task)}
/>

<DashboardGrid label="Widgets" items={widgets.map((w) => ({ id: w.id, size: w.size, content: w.render() }))} />

<LayoutCustomiser
  open={open.value}
  onClose={() => open.value = false}
  title="Customise overview"
  items={mergeLayout(saved, available).map((e) => ({ ...e, title: titleOf(e.id) }))}
  onChange={save}
  onReset={() => save(mergeLayout(null, available))}
/>

<EmptyState
  icon={<IconFolder class="size-5" />}
  title="No invoices yet"
  description="Invoices appear here once a customer is billed."
  action={<Button size="sm">New invoice</Button>}
/>

// A 404 page whose whole content is the empty state:
<EmptyState headingLevel={1} title="Page not found" />

// An empty section inside a card, in place of its CardBody:
<Card>
  <CardHeader title="Devices" />
  <EmptyState inset title="No devices yet" />
</Card>

const textarea = useRef<HTMLTextAreaElement>(null)

<ErrorSummary
  title="2 problems in this post"
  items={problems.map((p) => ({ key: `${p.line}`, label: `Line ${p.line}`, message: p.message }))}
  onSelect={(_, index) => selectTextareaLine(textarea.current!, problems[index].line)}
>
  Readers won't see these lines. The rest of the post shows as written.
</ErrorSummary>