# ikada overview

ikada is the design system behind Sproutboat’s dashboards: 42 React components and 11 blocks on Base UI and Tailwind CSS v4, with typed OKLCH tokens and Afloat spring motion. Add one file at a time with the shadcn CLI and the source is yours, or install the package and take updates.

Source page: https://sproutboat.com/ikada/docs

## Quick start
```sh
npx shadcn@latest add https://sproutboat.com/ikada/r/button.json
```
## Components
- Avatar (1.1 kB gzip): A person's picture with their initial when there is none (or it fails to load).
- Badge (0.8 kB gzip): A short status or label in a soft tinted pill.
- Banner (1.2 kB gzip): An inline notice about the page it sits on: a deploy is blocked, a quota is near.
- Breadcrumbs (1.9 kB gzip): A breadcrumb trail for the org, project and environment you are in, collapsing on narrow screens.
- Button (1.6 kB gzip): The action control: primary (green, one per view), secondary, ghost and danger, in three sizes.
- Checkbox (1.6 kB gzip): A yes/no choice for forms, with a checked, unchecked and indeterminate state and a springy tick.
- Code Block (1.2 kB gzip): A monospace block for commands and output, with a copy button.
- Command Palette (4.6 kB gzip): Global search and jump on Cmd or Ctrl K: grouped results, prefix filters and keyboard navigation.
- Copy Id (1.1 kB gzip): An ID or token in a mono well with a copy button; "Copied" confirms in place, never as a toast.
- Description List (0.8 kB gzip): Term and details pairs: an account, a deployment.
- Dialog (1.6 kB gzip): A modal dialog with title, description and actions; a click opens it with a spring, a key press opens it instantly.
- Dropdown Menu (1.7 kB gzip): A menu of actions that opens from a trigger.
- Empty State (0.8 kB gzip): What an empty list or page says: a title, one line on what goes here, and one action.
- Field (0.8 kB gzip): A form control with its label, hint and error, wired together for screen readers.
- Icon Button (0.6 kB gzip): A Button that shows only an icon, with a required accessible label and a tooltip-ready target.
- Inline Confirm (1.5 kB gzip): Feedback next to the control that was used, not in the corner: Copied, Saved.
- Input (0.6 kB gzip): A single-line text field: a well with the control edge as an inset ring, and the focus wake.
- Kbd (0.4 kB gzip): A keycap for shortcut hints, such as the K in Cmd K.
- Label (0.5 kB gzip): A form label that pairs with Input, Select and the other controls, with a required marker.
- Link (0.8 kB gzip): An inline link with an underline that follows the text colour; renders any element through the render prop.
- Meter (2.3 kB gzip): A labelled bar for a bounded measurement, with normal, warning and danger tones and a usage variant.
- Metric Tile (1.9 kB gzip): One headline number with its unit, change and trend.
- Page Header (1.6 kB gzip): The title row of a page: breadcrumbs, title, status, actions and optional page tabs.
- Pagination (1.6 kB gzip): Previous, next and numbered pages for a long list, with gaps past the neighbours of the current page.
- Popover (0.9 kB gzip): Interactive content anchored to a trigger, such as a small form.
- Radio Group (1.6 kB gzip): One choice out of a few, all visible at once, with keyboard arrows and a springy dot.
- Segmented Control (3.0 kB gzip): One choice out of a few, always one selected (a click on the selected segment does nothing).
- Select (1.6 kB gzip): Pick one value from a list that opens like a menu.
- Sensitive Input (1.3 kB gzip): A password or token field: masked by default, with a button that reveals it and an optional one that copies it.
- Sidebar (3.3 kB gzip): The account navigation: a collapsible rail on desktop and a drawer on mobile, with grouped items and a footer.
- Skeleton (0.7 kB gzip): Decorative placeholder (a fade, so it stays under reduced motion).
- Sparkline (3.1 kB gzip): A 44px trend line with no axes, a dot on the current point, a hover value and the same tokens as TimeseriesChart.
- Spinner (0.7 kB gzip): A turning ring for pending work, in three sizes; it stays still under reduced motion.
- Status Dot (0.8 kB gzip): A status shape with its label, for lists and headers.
- Status Glyph (1.5 kB gzip): A 10px shape per status (circle, bullseye for live, triangle, cross, half ring, square).
- Switch (1.4 kB gzip): An on/off setting that applies at once, with a label slot and a thumb that settles on a spring.
- Table (2.9 kB gzip): A semantic table in a scroll container, with sortable headers, loading, empty and error rows.
- Tabs (1.0 kB gzip): Switches between views of one subject in place.
- Textarea (0.6 kB gzip): A multi-line text field in the Input's surface, wired into Field like Input is.
- Timeseries Chart (4.5 kB gzip): A line (and optional area) chart on TanStack Charts, themed by the chart tokens: grid and tooltip follow light and dark, and the deploy marker is a dashed rule so a before and after read at a glance.
- Toast (6.4 kB gzip): Toasts as a deck at the bottom end: hover or focus fans out the history, ↩ undoes (⌘Z), a flick dismisses.
- Tooltip (1.3 kB gzip): A short plain-text label on hover or focus, after a delay.
## Blocks
- D1 console: 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.
- Empty states: 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.
- KV browser: 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.
- Logs panel: 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.
- Metric row: 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.
- Project tray: 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.
- Settings section: Settings 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.
- Sign-in card: One 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.
- Toast deck: Toasts 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.
- Traffic chart: Requests 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.
- Usage line: Today'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.