UI Kit
120+ token-driven components for SaaS products. Same design system as the blocks — restyle everything from one file.
11 groups( 01 ) Field + Input
Visible to your whole team.
This domain is already connected.
Read-only system identifier.
( 02 ) Textarea
Markdown supported.
Please tell us a bit more (min 20 chars).
( 03 ) Select
You need at least one admin.
Locked by your organization.
( 04 ) Checkbox
( 05 ) Radio Group
( 06 ) Switch
( 07 ) Slider Input
( 08 ) Search Input
( 09 ) Tag Input
Press Enter to add a tag.
( 10 ) Assembled — Create Project
Create project
Deploy from a Git repository in under a minute.
Invite more people later from settings.
StatCard
Badge
Tag
Avatar / AvatarGroup
Card
Deploy pipeline
Production deploy from main finished in 2m 14s. All 96 checks green.
Usage quota
DataTable
| Member | Role | Status | Usage |
|---|---|---|---|
| Mira VossMira Voss | Owner | Active | 84.2k req |
| Theo LangTheo Lang | Engineer | Invited | 12.7k req |
| June ParkJune Park | Designer | Active | 31.4k req |
| Sasha ReyesSasha Reyes | Analyst | Suspended | 0 req |
Progress
Skeleton
Kbd
EmptyState
No integrations yet
Connect your first data source to start streaming events into the workspace.
( modal )
( drawer )
( dropdown menu )
( tooltip )
( toast )
( command palette )
( tabs )
12 active projects · 4 pending deploys · uptime 99.98%.
( breadcrumbs )
( pagination )
( accordion )
( 01 ) Date Picker
( 02 ) Time Picker
( 03 ) Calendar View
Standalone month grid
Availability window (14 days)
( 04 ) OTP Input
Sent to +1 •••• 4567
Partially entered.
That code has expired.
Request a new code to continue.
( 05 ) Password Input
Minimum 8 characters.
Passwords don't match.
Managed by your identity provider.
( 06 ) Phone Input
London office, 9am–6pm GMT.
Enter a valid phone number.
Confirmed via SMS.
( 07 ) Number Stepper
( 08 ) Currency Input
Exceeds the original charge.
Set by finance, read-only.
( 09 ) Color Picker Input
Enter a valid hex value.
Fixed by the design system.
( 10 ) Range Slider
( 11 ) Rating
( 12 ) File Upload
( 01 ) Combobox
Type to filter the list.
Locked by your plan.
( 02 ) Multi Select
Applies to the whole workspace.
( 03 ) Segmented Control
( 04 ) Toggle Group
( 05 ) Inline Edit
Click the value to rename.
Managed by the platform.
( 06 ) Form Wizard
- 1Connect repository
- 2Configure build
- 3Invite the team
Connect repository
Import an existing Git repository to deploy from.
( 07 ) Copy Field
( 08 ) Password Strength Meter
- At least 8 characters
- One uppercase letter
- One lowercase letter
- One number
- One symbol
- At least 8 characters
- One uppercase letter
- One lowercase letter
- One number
- One symbol
( 09 ) Quantity Picker
( 10 ) Swatch Picker
Anodized aluminum.
( 11 ) Icon Picker
( 12 ) Emoji Rating
Okay
Blazing
Good
( charts — echarts, token-themed )
( timeline )
- Deploy shipped to production
v2.4.0 rolled out to all regions with zero downtime.
- Incident detected — elevated latency
edge.cdn p95 crossed 800ms for 6 minutes before recovering.
- Pull request merged
#4821 refactor auth middleware, reviewed by 2 engineers.
- New team member invited
Sasha Reyes invited as Analyst.
- Billing cycle closed
Invoice #2291 generated, $4,820 charged.
( activity feed )
Today
- Mira Voss
Mira Voss merged pull request #4821 refactor auth middleware
- Theo Lang
Theo Lang commented on Q3 roadmap
- June Park
June Park deployed v2.4.0 to production
Yesterday
- Sasha Reyes
Sasha Reyes created issue Billing webhook retries
- Noah Idris
Noah Idris invited Lena Brandt to the workspace
Jun 28
- Mira Voss
Mira Voss closed issue Flaky checkout test
- June Park
June Park starred design-system/tokens
( sparkline )
( progress ring )
( gauge )
( heatmap calendar )
( tree view / file tree )
- Product
- Roadmap
- Specs
- Engineering
- Frontend
- Backend
- Design
- src
- components
- Button.tsx
- Button.module.scss
- Card.tsx
- app.tsx
- theme.scss
- public
- package.json
- README.md
( code block )
export async function getUser(id: string) { // fetch from the primary replica, fall back to cache const cached = await redis.get(`user:${id}`); if (cached) return JSON.parse(cached); const res = await fetch(`/api/users/${id}`); if (!res.ok) { throw new Error('User not found'); } const user = await res.json(); return { ...user, fetchedAt: Date.now() };}( json viewer )
( diff viewer )
@@ -12,7 +12,9 @@ export function getUser(id: string) { const cacheKey = `user:${id}`; const cached = memoryCache.get(cacheKey); if (cached) return cached; const cached = await redis.get(cacheKey); if (cached) return JSON.parse(cached); const stale = staleCache.get(cacheKey); const user = await db.users.findUnique({ where: { id } }); return user;}( log viewer )
( comparison table )
| Compare plans | Starter | GrowthPopular | Scale |
|---|---|---|---|
| Team seats | 3 | 20 | Unlimited |
| Projects | 5 | Unlimited | Unlimited |
| API access | |||
| Audit log | |||
| SSO / SAML | |||
| Priority support |
( pricing table )
For solo builders trying things out.
- 1 project
- Community support
- 7-day log retention
For small teams shipping to production.
- Unlimited projects
- Priority support
- 90-day log retention
- API access
For orgs that need control and scale.
- Everything in Growth
- SSO / SAML
- Audit log
- Dedicated support
( kpi grid )
( metric tile )
( user card )
June Park
Product Designer at Kapustin
Theo Lang
Staff Engineer at Kapustin
( product card )
Fieldwork Tote
Bags & carry
Ridge Wallet
Accessories
Field Notebook
Stationery
( chat bubble )
( notification item )
Deploy finished
2m agoProduction build from main completed successfully in 2m 14s.
Usage nearing limit
1h agoYou have used 92% of this month's API request quota.
New comment
YesterdayTheo Lang commented on “Q3 roadmap” — “Let's revisit the timeline.”
( avatar stack )
( banner )
( callout )
Note
Blocks read their content from tokens in styles/theme.scss — restyling the whole library stays a one-file job.
Tip
Use `sectionStyle()` from `@/lib/section` to pick up tone/padding props on any block without touching its internals.
Heads up
Status hues are the one exception to the tokens-only rule — always route them through `color-mix(in oklab, …)` like Badge does.
( steps )
- AccountCreate your workspace
- BillingAdd a payment method
- Invite teamBring your collaborators
- LaunchGo live
- Order placedJun 28, 09:12
- PackedJun 28, 14:40
- ShippedJun 29, 08:05
- Delivered
( popover )
( hover card )
( context menu )
Right-click this card — “roadmap-q3.pdf”, 2.4 MB.
( sheet )
( lightbox )
( confirm dialog )
( coachmark )
( loading bar )
( workspace overview )
Data last synced 2 minutes ago.
( overlay spinner )
( billing details )
Card ending 4242 · expires 08/28.
( snackbar )
( split button )
( kebab )
Spinner
SkeletonGroup
ErrorState
Something went wrong
We couldn't load this data. Check your connection and try again.
Deploy failed
Build #4822 exited with code 1. Retry once the fix is pushed.
SuccessState
Payment successful
Your subscription is active. A receipt has been sent to your inbox.
Meter
Countdown
RelativeTime
CopyButton
ThemeToggle
BackToTop
Fixed bottom-right — scroll this page past ~480px to see it fade in and smooth-scroll back to top.
ShortcutsHelp
Keyboard shortcuts
Navigation
- Open command menu⌘K
- Go to homeGH
- Go to blocksGB
Actions
- Save changes⌘S
- Submit⌘Enter
- Dismiss dialogEsc
StatusDot
AnnouncementBar
Alert
Saved
Your changes were saved to the current workspace.
Deployed
Build 4821 is live on production.
Storage almost full
You have used 92% of the workspace quota.
Payment failed
The card ending in 4242 was declined.
Fieldset
AvatarUpload
ClampText
Design systems are promises about the future: every token you name is a decision the next project inherits for free. This library keeps those promises small and sharp — one palette, one type scale, one rhythm — so a rebrand is an afternoon in theme.scss instead of a quarter of rework. The blocks stay honest by never hardcoding a value, and the payoff is that inversion, dark mode and per-instance backgrounds come along without touching a single component.
TagCloud
ColorSwatchGrid
DividerLabel
ChartLegend
LiveClock
LanguageSwitcher
FilterBar
Scrollspy
Overview
A quick tour of the workspace: projects, teams, and the activity feed that ties them together.
Installation
Install the CLI, authenticate with your workspace token, and run the init command inside your repo.
Configuration
Environment variables, feature flags, and the config file schema used across staging and production.
API
REST and webhook endpoints for projects, members, and usage — all versioned under /v2.
Changelog
Every release, from breaking changes down to the smallest copy fix, in reverse chronological order.
TableOfContents
Introduction
What this library is, who it is for, and the design principles behind every block.
Getting started
Clone the repo, install dependencies, and run the dev server to browse the component gallery.
Installation
Copy the styles, lib helpers, and the block categories you need into your own Next.js project.
Configuration
Retheme everything from a single tokens file — palette, type scale, radii, and motion.
Components
Forms, display, overlays, and navigation primitives — all rendering realistically with zero props.
Theming
Dark mode and section inversion are free — components only ever read semantic color tokens.
API reference
Full prop tables for every exported component, generated from the TypeScript source.