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.
Copies this page as Markdown# 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.
Quick start
In a React project with Tailwind CSS v4 and a components.json, add a component by its registry URL. The CLI copies the file into components/ikada (never over your own components/ui), installs its dependencies and merges the ikada theme into your CSS. The full setup is on Installation.
npx shadcn@latest add https://sproutboat.com/ikada/r/button.jsonComponents
Every component is one file with its own registry entry. Sizes are the gzipped files the CLI writes. ikada 0.2.0.
- MARAvataravatar.tsx1.1 kB gzipped
- LiveDegradedv12Badgebadge.tsx0.8 kB gzipped
- Bannerbanner.tsx1.2 kB gzippedDNS pendingAdd the CNAME record to finish.
- Breadcrumbsbreadcrumbs.tsx1.9 kB gzipped
- Buttonbutton.tsx1.6 kB gzipped
- Checkboxcheckbox.tsx1.6 kB gzipped
- Code Blockcode-block.tsx1.2 kB gzipped
Copiedsproutboat deploy - Search projects…⌘KCommand Palettecommand-palette.tsx4.6 kB gzipped
dpl_8f3a91c2CopiedCopy Idcopy-id.tsx1.1 kB gzipped- Region
- Frankfurt
- Runtime
- Node 24
- Dialogdialog.tsx1.6 kB gzipped
Delete project?
This cannot be undone.
- RenameDuplicateDeleteDropdown Menudropdown-menu.tsx1.7 kB gzipped
- Empty Stateempty-state.tsx0.8 kB gzipped
No deploys yet
- Fieldfield.tsx0.8 kB gzipped
Lowercase and dashes.
- Icon Buttonicon-button.tsx0.6 kB gzipped
- Press again to deleteInline Confirminline-confirm.tsx1.5 kB gzipped
- Inputinput.tsx0.6 kB gzipped
- ⌘Kto searchKbdkbd.tsx0.4 kB gzipped
- Labellabel.tsx0.5 kB gzipped
- Linklink.tsx0.8 kB gzipped
- Metermeter.tsx2.3 kB gzippedRequests62%xStorage91%x
- Metric Tilemetric-tile.tsx1.9 kB gzippedRequests1.28MUp 12%
- Page Headerpage-header.tsx1.6 kB gzipped
acme / web
Overview
- Paginationpagination.tsx1.6 kB gzipped
- Popoverpopover.tsx0.9 kB gzipped
Rollout
Send 10% of traffic first.
- Radio Groupradio-group.tsx1.6 kB gzipped
- Segmented Controlsegmented-control.tsx3.0 kB gzipped
- Selectselect.tsx1.6 kB gzipped
- Sensitive Inputsensitive-input.tsx1.3 kB gzipped
- Home Projects LogsSidebarsidebar.tsx3.3 kB gzipped
- Skeletonskeleton.tsx0.7 kB gzipped
- Sparklinesparkline.tsx3.1 kB gzipped
- DeployingSpinnerspinner.tsx0.7 kB gzipped
- LiveDNS pendingBuild failedStatus Dotstatus-dot.tsx0.8 kB gzipped
- Status Glyphstatus-glyph.tsx1.5 kB gzipped
- Switchswitch.tsx1.4 kB gzipped
- Tabletable.tsx2.9 kB gzippedVersionStatusv48Livev47Ready
- Tabstabs.tsx1.0 kB gzipped
- Textareatextarea.tsx0.6 kB gzipped
- Timeseries Charttimeseries-chart.tsx4.5 kB gzipped
- Toasttoast.tsx6.4 kB gzipped
Deployed
my-app is live.
- Roll back to v47Tooltiptooltip.tsx1.3 kB gzipped
Blocks
Whole dashboard patterns assembled from the components, with sample data. See them all live.
# id INTEGER name TEXT price REAL stock INTEGER 1 6 Epipremnum aureum 12.00 45 2 12 Philodendron hederaceum 13.90 38 3 5 Sansevieria trifasciata 19.90 32 4 11 Peperomia obtusifolia 11.50 27 5 10 Hoya carnosa 16.90 21 6 1 Monstera deliciosa 34.90 18 7 7 Zamioculcas zamiifolia 29.90 14 8 4 Calathea orbifolia 26.50 11 - Empty statesempty-states.tsx2.3 kB gzipped
First run
Create your first project
A project groups the sprouts that ship together, like a site and its API.
No results
Nothing matches this search
No sprout name contains “reed”. Check the spelling or clear the search to see all 5.
Nothing deployed
Nothing deployed yet
From the folder with your code, deploy once and this sprout goes live with its own URL.
Copiednpx sproutboat deployLoad failed
Could not load your projects
Check your connection, then try again.
Key Size Expires 78 B never 75 B never 42 B never 78 B never 56 B never 46 B never 103 B never 44 B in 51 s 44 B in 38 s 125 B in 6 h 90 B in 23 h 112 B in 2 h 89 B in 5 min 112 B in 5 min config:shippingCopiedValue
Copied{ "free_over": 60, "currency": "EUR", "zones": [ "PT", "ES", "FR", "DE" ] }- Size
- 78 B
- Expires
- Never
- Updated
- 14 d ago
- Metadata
- None
DeletedLogs
Time (UTC)LevelSourceMessageDuration- infohttpGET /api/search?q=raft20055 ms
GET /api/search?q=raft200
- infoconsolesession refreshed for user_19c
session refreshed for user_19c
- infohttpPOST /api/notes20153 ms
POST /api/notes201
- infocron*/5 * * * * digest: 3 notes summarised
*/5 * * * * digest: 3 notes summarised
- infohttpGET /api/notes/8f3a20018 ms
GET /api/notes/8f3a200
- infoconsolecache warm: 412 keys in 38 ms
cache warm: 412 keys in 38 ms
- infohttpGET /api/search?q=raft20043 ms
GET /api/search?q=raft200
- infohttpGET /api/notes/8f3a2007 ms
GET /api/notes/8f3a200
- warnconsoleslow query on notes_by_tag (812 ms)
slow query on notes_by_tag (812 ms)
- infoqueueemails: delivered batch of 14
emails: delivered batch of 14
- infohttpPOST /api/notes20155 ms
POST /api/notes201
- infohttpPOST /api/notes20168 ms
POST /api/notes201
- infohttpGET /healthz2003 ms
GET /healthz200
- infohttpGET /api/search?q=raft20044 ms
GET /api/search?q=raft200
- infohttpGET /api/notes/8f3a20016 ms
GET /api/notes/8f3a200
- infohttpGET /healthz2002 ms
GET /healthz200
- warnhttpGET /api/notes/8f3a40419 ms
GET /api/notes/8f3a404
- infoconsolecache warm: 412 keys in 38 ms
cache warm: 412 keys in 38 ms
- infohttpGET /api/notes/8f3a20015 ms
GET /api/notes/8f3a200
- infoconsolesession refreshed for user_19c
session refreshed for user_19c
- infohttpGET /healthz2002 ms
GET /healthz200
- infohttpPOST /api/notes20159 ms
POST /api/notes201
- errorconsoleTypeError: Cannot read properties of undefined (reading 'title')
TypeError: Cannot read properties of undefined (reading 'title')
- errorconsoleTypeError: Cannot read properties of undefined (reading 'title')
TypeError: Cannot read properties of undefined (reading 'title')
- infohttpGET /api/notes20020 ms
GET /api/notes200
- errorhttpGET /api/notes500upstream timed out20 ms
GET /api/notes500upstream timed out
- infohttpGET /api/search?q=raft20078 ms
GET /api/search?q=raft200
- warnhttpDELETE /api/notes/77d040438 ms
DELETE /api/notes/77d0404
- infohttpPUT /api/notes/2c9120037 ms
PUT /api/notes/2c91200
- errorhttpGET /api/search?q=raft500upstream timed out46 ms
GET /api/search?q=raft500upstream timed out
- infohttpPUT /api/notes/2c9120050 ms
PUT /api/notes/2c91200
- infohttpGET /api/notes20020 ms
GET /api/notes200
- errorhttpGET /api/search?q=raft500upstream timed out96 ms
GET /api/search?q=raft500upstream timed out
- infohttpGET /healthz2001 ms
GET /healthz200
- warnconsoleslow query on notes_by_tag (812 ms)
slow query on notes_by_tag (812 ms)
- infoqueueemails: delivered batch of 1
emails: delivered batch of 1
- infoconsolecache warm: 412 keys in 38 ms
cache warm: 412 keys in 38 ms
- warnconsoleslow query on notes_by_tag (812 ms)
slow query on notes_by_tag (812 ms)
- warnconsoleslow query on notes_by_tag (812 ms)
slow query on notes_by_tag (812 ms)
- infohttpPUT /api/notes/2c9120047 ms
PUT /api/notes/2c91200
Live · streaming · 40 lines
- Metric rowmetric-row.tsx1.7 kB gzippedRequests184KUp 12%Last 24 hoursError rate0.21%Up 0.08 pt5xx responsesResponse time38ms p50Down 9%p99 212 msSprouts serving5of 6One paused
- Project trayproject-tray.tsx3.2 kB gzipped
- Settings sectionsettings-section.tsx3.7 kB gzipped
General
The name is shown in the dashboard and in emails.
Part of every sprout's hostname, so it cannot change.
New sprouts run here.
Notifications
Sent to every member who has not opted out.
Log retention
How long request and console logs stay searchable.
Everything is saved.
SavedDelete project
Removes every sprout in it, their versions, logs and domains. Storage bound to them is kept.
- Sign-in cardsign-in-card.tsx3.4 kB gzippedSproutboat
- Toast decktoast-deck.tsx3.1 kB gzipped
API tokens
Revoke one: it goes at once, and Undo (or ⌘Z) brings it back.
- ci-deploysb_live_…4f2aUsed 2 min ago
- robin-laptopsb_live_…91c0Used yesterday
- staging-botsb_live_…07deUsed 3 days ago
- grafana-readsb_live_…b3e8Used never
Recent
What the toasts said this session.
Nothing yet. Revoke a token or deploy.
Traffic
118.8K requests · 1.94% errors, last 24 hours
- Requests
- Errors (5xx)
- Deploy
- TodayRequests61.4K / 100KCPU time42%xStorage912 MB / 1 GBxFree plan · resets 00:00 UTC. Open the usage pageUsage lineusage-line.tsx1.6 kB gzippedx
Guides
- Installation: the shadcn CLI, the registry alias, or the package.
- Theming and tokens: every colour, type size, radius and layer, light and dark.
- Motion: Afloat, the press, the springs and reduced motion.
- Changelog: what shipped in each release.