Skip to content

Blocks

11 dashboard patterns from the Sproutboat dashboards, built from ikada components and shipped with realistic sample data. Install one and it is your code: edit it, rename it, feed it your own data through its props.

D1 consoleA SQL console for a D1 database: the tables and their columns, an editor that runs with ⌘↵, and the result grid with its row count and timing.

Docs

Empty statesThe four things an empty view can mean, each with one way forward: nothing created yet, nothing matching a filter, nothing deployed, and a load that failed with a retry.

Docs

KV browserA KV namespace's keys, filtered by prefix or search, beside the selected key's value, metadata and expiry, with copy and a two-step delete that can be undone.

Docs

Logs panelA live log tail with level and source filter chips, search, and a Live or Paused stream that holds still while the pointer rests on it.

Docs

Metric rowA row of headline numbers for the last 24 hours: requests, error rate, response time and sprouts serving, each with its change and an hourly sparkline.

Docs

Project trayA recessed tray per project holding its sprouts as floating cards: each card has a status tile, the hostname and one state line, and an empty project offers to plant its first sprout.

Docs

Settings sectionSettings as titled cards: fields, switches that read as sentences, a choice of retention, a save bar that floats up once something changed, and a danger zone that confirms a delete in place.

Docs

Sign-in cardOne card for getting in: email a sign-in link or continue with GitHub, then a check-your-inbox state; in waitlist mode, a short join form whose confirmation sprouts.

Docs

Toast deckToasts in practice: a revoke that removes the row at once and offers Undo (also ⌘Z), a deploy that morphs one toast from Uploaded to Live or to a failure with Retry, and the history feed.

Docs

Traffic chartRequests and 5xx errors over time with deploys marked as dashed rules, a range switch (hour, day, week), the range's totals and a legend that names every line, so colour is never the only key.

Docs

Usage lineToday's quotas in one quiet row, each a figure and a small meter that turns amber near its limit, with the plan and reset time at the end.

Docs