Dashboard

Preview Available in release assets

Compose server-rendered operational summaries with durable links to authoritative detail views.

Server contract

Use .thin-dashboard on a stable identified region. Datastar 1.0.2 may request server fragments; the application owns permissions, validation, idempotency, persistence, and reconciliation.

Server-rendered content, real links, native controls, and ordinary submitted forms preserve the complete workflow without Datastar or JavaScript.

Dashboard primary example

<main class="thin-dashboard" id="operations-dashboard">
  <header>
    <h1>Operations</h1>
    <p class="thin-dashboard-status">Updated by the server at 14:30.</p>
  </header>
  <section class="thin-grid">
    <article class="thin-card">
      <h2>Open orders</h2>
      <p>24</p>
      <a href="/orders?status=open">View orders</a>
    </article>
    <article class="thin-card">
      <h2>Jobs running</h2>
      <p>2</p>
      <a href="/jobs">View jobs</a>
    </article>
  </section>
</main>

Show code

<main class="thin-dashboard" id="operations-dashboard">
  <header>
    <h1>Operations</h1>
    <p class="thin-dashboard-status">Updated by the server at 14:30.</p>
  </header>
  <section class="thin-grid">
    <article class="thin-card">
      <h2>Open orders</h2>
      <p>24</p>
      <a href="/orders?status=open">View orders</a>
    </article>
    <article class="thin-card">
      <h2>Jobs running</h2>
      <p>2</p>
      <a href="/jobs">View jobs</a>
    </article>
  </section>
</main>

Anatomy

Stable server-owned region
Heading and current status
Native links or form controls
Server result and error text

Variants and sizes

Metric cards
Operational overview

Gallery coverage: No structured variant fixtures are published yet; the primary example above is the only verified production markup.

States and difficult content

Rendered fixtures exercise authored content and constrained layouts with the same production assets.

Idle
Pending
Empty
Partial success
Error
Forbidden
Long content
Narrow container
Reconnect

Structured state fixtures are not published for this item yet.

Interaction and keyboard behavior

Links navigate normally; optional patches refresh complete summary regions without making displayed counts client-owned.

Accessibility

Use semantic headings, native controls, explicit labels, selected counts, text status/error messages, and predictable focus. Announce completed server changes, not every intermediate client event; preserve source and focus order across patches.

Contract

LIVE

Basis

Native forms, links, file inputs, status regions, and action buttons; async semantics must be chosen per update

Evidence

tests/unit/library/dashboard-recipes.test.ts

API

Use .thin-dashboard on a stable identified region. Datastar 1.0.2 may request server fragments; the application owns permissions, validation, idempotency, persistence, and reconciliation.

Behavior tier: datastar-required

Structured host, property, and example tables are not authored for this item yet. Use the summary above and the primary example.

Fallback

Server-rendered content, real links, native controls, and ordinary submitted forms preserve the complete workflow without Datastar or JavaScript.

Assets and dependencies

/components.css

Dependencies: datastar@1.0.2

Source: packages/ui/src/items/dashboard/style.ts

Composition

Derived from the examples and style specs, not authored.