The Sproutboat design system: calm, dense dashboard components on Base UI and Tailwind v4 with OKLCH tokens, toasts with undo, and charts.
The aria-label or deprecated ariaLabel prop type that the chart components share.
Every ikada component, its helpers and the theme, installed under components/ikada.
A person's picture with their initial when there is none (or it fails to load).
A short status or label in a soft tinted pill.
An inline notice about the page it sits on: a deploy is blocked, a quota is near.
A breadcrumb trail for the org, project and environment you are in, collapsing on narrow screens.
The action control: primary (green, one per view), secondary, ghost and danger, in three sizes.
Chart colour tokens as CSS variable references, so TanStack Charts follow light and dark.
Builds the hover card (a title over swatch rows) that Sparkline and TimeseriesChart share.
A yes/no choice for forms, with a checked, unchecked and indeterminate state and a springy tick.
ikada's class helper (clsx plus tailwind-merge that understands the text-sb-* sizes) and the shared style primitives: focus ring, press motion, popup motion and field surfaces. Installs to components/ikada/lib, never to lib/utils.
A monospace block for commands and output, with a copy button.
Global search and jump on Cmd or Ctrl K: grouped results, prefix filters and keyboard navigation.
An ID or token in a mono well with a copy button; "Copied" confirms in place, never as a toast.
Crossfades between versions of its content: the old layer blurs out while the new one blurs in (the blur hides that two different things overlap), and for text the box animates to the new height.
A 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.
Term and details pairs: an account, a deployment.
ikada's design tokens as typed data: colours, type, spacing, radii, shadows, motion, springs and layers.
A modal dialog with title, description and actions; a click opens it with a spring, a key press opens it instantly.
A menu of actions that opens from a trigger.
What an empty list or page says: a title, one line on what goes here, and one action.
The 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.
A form control with its label, hint and error, wired together for screen readers.
Number and byte formatting shared by every ikada component: compact, grouped and locale-aware.
A Button that shows only an icon, with a required accessible label and a tooltip-ready target.
The ikada icon set: 16px line icons on a 1.6px stroke that inherit the text colour.
ikada's tokens for Tailwind v4: OKLCH colours for light and dark, an ikada-scoped type scale (text-sb-*), radii, shadows, motion springs, layers and density. Light by default, dark with a .dark class.
Feedback next to the control that was used, not in the corner: Copied, Saved.
A single-line text field: a well with the control edge as an inset ring, and the focus wake.
Keyboard-opened overlays do not animate: they answer a deliberate key press and are opened constantly.
A keycap for shortcut hints, such as the K in Cmd K.
A 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.
A form label that pairs with Input, Select and the other controls, with a required marker.
An inline link with an underline that follows the text colour; renders any element through the render prop.
The number and date locale for a subtree, with `en` as the default.
A 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.
A labelled bar for a bounded measurement, with normal, warning and danger tones and a usage variant.
A 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.
One headline number with its unit, change and trend.
The title row of a page: breadcrumbs, title, status, actions and optional page tabs.
Previous, next and numbered pages for a long list, with gaps past the neighbours of the current page.
Interactive content anchored to a trigger, such as a small form.
Where floating layers mount, so menus and dialogs can sit inside a themed container.
A 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.
One choice out of a few, all visible at once, with keyboard arrows and a springy dot.
One choice out of a few, always one selected (a click on the selected segment does nothing).
Pick one value from a list that opens like a menu.
A password or token field: masked by default, with a button that reveals it and an optional one that copies it.