50 components over a theme generated from one colour. Everything below is read from the registry and from the live theme, so it cannot drift from what this app actually ships — change the brand colour in the operator console (/admin/settings) and this page changes with it.
Generated from #36D6EE, then verified: every role that carries text declares a contrast obligation in APCA Lc and is moved until it clears it. This build moved 13 and failed 0.
Components never name a ramp step. They name a role, and the role resolves per mode — which is why light and dark are one declaration rather than two palettes that quietly diverge.
--k-bg-canvas--k-bg-surface--k-bg-accent--k-bg-success--k-bg-warning--k-bg-danger--k-fg-default--k-fg-muted--k-fg-accent--k-border-subtleNo per-component prop dialect — no colour, colorScheme, contained, primary. Every component takes the same four facets, and an unknown value throws with the legal set rather than rendering an unstyled control.
tone — accent · neutral · success · warning · danger · infovariant — solid · soft · outline · ghost · plainsize — xs · sm · md · lg · xlradius — none · sm · md · lg · full · inherit (set per component, or once on the theme)A few of them together, rendered by this page rather than pictured.
Label, description and error share one shell.
--k-fg-accentFilter by category or search the descriptions and examples. Import from @/components/kit for anything interactive — the registry ships no 'use client' directives, so the boundary is declared there once rather than at fifty import sites.
50 components
Sections that expand one at a time to reveal their content.
<Accordion
headingLevel={3}
items={[
{ value: 'refunds', title: 'How do refunds work?', content: <p>Within 30 days…</p> },
{ value: 'seats', title: 'Can I change seats mid-cycle?', content: <p>Yes…</p> },
]}
/>A message about the state of the system or the result of an action.
<Alert tone="danger" title="Upload failed" actions={<Button size="sm" tone="danger" variant="outline">Retry</Button>}>
The file is larger than the 25 MB limit.
</Alert>A text input that filters a long list of options as you type.
<Autocomplete
label="Country"
items={countries}
value={country}
onChange={setCountry}
/>ScopeFilters a list you pass in, synchronously. Async loading, pagination, and multi-select are not implemented.
A person or entity, shown as an image, initials, or a fallback glyph.
<Avatar name="Ada Lovelace" src="/ada.jpg" />
A count or status dot attached to the corner of another element.
<Badge content={3} label="3 unread">
<Button iconOnly variant="ghost" aria-label="Notifications">
<BellIcon />
</Button>
</Badge>Where the current page sits in the hierarchy above it.
<Breadcrumbs
maxItems={3}
items={[
{ label: 'Home', href: '/' },
{ label: 'Workspaces', href: '/workspaces' },
{ label: 'Acme', href: '/workspaces/acme' },
{ label: 'Billing' },
]}
/>A control that performs an action when activated.
<Button onClick={save}>Save changes</Button>| Sunday | Monday | Tuesday | Wednesday | Thursday | Friday | Saturday |
|---|---|---|---|---|---|---|
A month grid for choosing a date.
<Calendar label="Delivery date" value={date} onChange={setDate} min="2026-01-01" />ScopeGregorian calendar only, with locale-aware month and weekday names. No week numbers and no multi-month view.
A surface that groups related content into one unit.
<Card>
<CardHeader>Monthly usage</CardHeader>
<CardBody>You have used 4,210 of 10,000 credits.</CardBody>
<CardFooter>
<Button size="sm" variant="ghost">View details</Button>
</CardFooter>
</Card>An independent on/off choice.
<Checkbox label="Email me about outages" name="outage-emails" />
Several related checkboxes with one label, description, and error.
<CheckboxGroup
label="Notify me about"
value={channels}
onChange={setChannels}
items={[
{ value: 'outages', label: 'Outages' },
{ value: 'billing', label: 'Billing changes' },
{ value: 'product', label: 'Product updates' },
]}
/>A short, non-interactive label that categorises an item or states its status.
<Chip tone="success">Active</Chip>
Progress in a compact ring, for tight spaces and dashboards.
<CircularProgress label="Storage used" value={72} size="lg" showValue />--k-fg-accentAn inline fragment of code or a literal value.
<p>Set <Code>UI_KIT_TONES</Code> to override the vocabulary.</p>
A date the user types rather than browses to.
<DateInput label="Date of birth" max="2008-08-18" />
ScopeBuilt on the native date input, so the display format follows the platform and cannot be overridden.
A date field with a calendar beside it.
<DatePicker label="Invoice date" value={date} onChange={setDate} max="2026-12-31" />A start and end date, with a range calendar beside them.
<DateRangePicker label="Reporting period" value={period} onChange={setPeriod} />A rule that separates two groups of content.
<Divider />
A panel that slides in from an edge and blocks the page behind it.
<Drawer
open={filtering}
onClose={() => setFiltering(false)}
title="Filters"
footer={<Button onClick={apply}>Show 42 results</Button>}
>
<CheckboxGroup label="Status" items={statuses} value={selected} onChange={setSelected} />
</Drawer>A menu of commands opened from a control.
<Dropdown
trigger={<Button variant="ghost" iconOnly aria-label="Project actions"><MoreIcon /></Button>}
items={[
{ label: 'Rename', onSelect: rename, shortcut: 'R' },
{ label: 'Duplicate', onSelect: duplicate },
{ separator: true },
{ label: 'Delete project', onSelect: remove, tone: 'danger' },
]}
/>ScopeSingle-level menus. Submenus, checkbox items, and radio items are not implemented.
We only use it for receipts.
A text input wired to its label, description, and error message.
<Field label="Work email" type="email" name="email" />
A group of fields with a shared layout and one error summary.
<Form
errors={errors}
onSubmit={(event) => {
event.preventDefault()
setErrors(validate(new FormData(event.currentTarget)))
}}
>
<Field label="Work email" name="email" id="email" error={errors.email} />
<Field label="Company" name="company" id="company" error={errors.company} />
<FormActions>
<Button type="submit">Create account</Button>
<Button variant="ghost" type="button">Cancel</Button>
</FormActions>
</Form>%22%2F%3E%3C%2Fsvg%3E)
A picture with reserved space, a blurred placeholder, and a failure state.
<Image src="/photo.jpg" alt="A wide landscape photograph" ratio={16 / 9} />A short one-time code, shown as separate character cells.
<InputOtp
label="Verification code"
description="Sent to +1 555 0100."
length={6}
onComplete={verify}
/>A key or key combination the user should press.
<Kbd keys={['mod']}>K</Kbd>Navigation to another place. Not an action.
<Link href="/docs/billing">Read the billing guide</Link>
A list of options that can be selected, with keyboard navigation.
<Listbox
label="Environment"
value={env}
onChange={setEnv}
items={[
{ value: 'prod', label: 'Production', description: 'Serving live traffic' },
{ value: 'staging', label: 'Staging', description: 'Mirrors production' },
]}
/>ScopeOptions are rendered eagerly; there is no virtualisation for very long lists.
A dialog that blocks the page until it is resolved.
<Modal
open={confirming}
onClose={() => setConfirming(false)}
title="Delete this project?"
description="Its 1,204 documents will be permanently removed."
footer={
<>
<Button variant="ghost" onClick={() => setConfirming(false)}>Keep project</Button>
<Button tone="danger" onClick={remove}>Delete project</Button>
</>
}
/>The bar across the top of an application: brand, links, actions.
<Navbar
brand={<><Logo /> UI-Kit</>}
links={[
{ label: 'Overview', href: '/', current: true },
{ label: 'Usage', href: '/usage' },
{ label: 'Billing', href: '/billing' },
]}
actions={<Button size="sm">New project</Button>}
/>ScopeCollapses to a stacked menu at a CSS breakpoint. It does not include a mega-menu, nor submenu support.
A numeric value with steppers, bounds, and formatting.
<NumberInput label="Seats" min={1} max={50} value={seats} onValueChange={setSeats} />Moving between pages of a long result set.
<Pagination page={page} pageCount={42} onPageChange={setPage} />A small non-blocking surface anchored to the control that opened it.
<Popover
title="Rename project"
trigger={<Button variant="ghost" size="sm">Rename</Button>}
>
<Field label="Name" defaultValue={project.name} />
</Popover>ScopePositions against the viewport with a flip and a clamp. It does not reposition inside a scrolling container that clips its own overflow, and it draws no arrow.
How far along a task is, when the proportion is known.
<Progress label="Uploading contract.pdf" value={62} />One choice from a small set, with every option visible.
<RadioGroup
label="Billing period"
name="period"
value={period}
onChange={setPeriod}
items={[
{ value: 'monthly', label: 'Monthly' },
{ value: 'annual', label: 'Annual', description: 'Two months free.' },
]}
/>| Sunday | Monday | Tuesday | Wednesday | Thursday | Friday | Saturday |
|---|---|---|---|---|---|---|
A month grid for choosing a start and end date.
<RangeCalendar label="Stay" value={stay} onChange={setStay} min="2026-08-18" />ScopeA single month view. Two-month side-by-side selection is not implemented.
A scrollable region that fades at whichever edge has more content.
<ScrollShadow style={{ maxHeight: '12rem' }} label="Team members">
{members.map((m) => <User key={m.id} name={m.name} description={m.email} />)}
</ScrollShadow>A choice of one option from a known list.
<Select label="Plan" placeholder="Choose a plan" items={[
{ value: 'free', label: 'Free' },
{ value: 'pro', label: 'Pro' },
{ value: 'scale', label: 'Scale' },
]} />ScopeBuilt on the native `<select>`, so options are text only. For option icons, descriptions, or search, use Listbox or Autocomplete.
A placeholder occupying the shape of content that has not arrived.
<Skeleton loaded={!isLoading}>
<p>{user.biography}</p>
</Skeleton>A value chosen from a continuous range by dragging.
<Slider
label="Quality"
min={0}
max={100}
step={5}
value={quality}
onValueChange={setQuality}
formatValue={(v) => `${v}%`}
/>ScopeSingle-value only. A two-thumb range slider is not implemented.
npx create-quxkit-app my-app
A command or value shown with a copy button.
<Snippet prompt="$">npx ui-kit init --brand "#22409E"</Snippet>
A fixed gap, for the cases where layout cannot supply one.
<div style={{ display: 'flex' }}>
<strong>Project settings</strong>
<Spacer grow />
<Button size="sm">Save</Button>
</div>An indeterminate busy indicator, for a wait with no known length.
<Spinner label="Loading invoices" />
A setting that takes effect the moment it is changed.
<Switch
label="Two-factor authentication"
description="Required for accounts with billing access."
checked={enabled}
onChange={(e) => save(e.target.checked)}
/>| Plan | Seats |
|---|---|
| Free | 1 |
| Pro | 12 |
Rows of records with columns that can be sorted and selected.
<Table
caption="Invoices from the last 30 days"
columns={[
{ key: 'number', header: 'Invoice', sortable: true },
{ key: 'customer', header: 'Customer' },
{ key: 'amount', header: 'Amount', align: 'end', sortable: true },
]}
rows={invoices}
getRowId={(row) => row.id}
sort={sort}
onSortChange={setSort}
selected={selected}
onSelectionChange={setSelected}
/>ScopeSorting is reported and requested, not performed — you sort the data. No virtualisation, column resizing, or pinned columns.
Alternative views of the same region, one shown at a time.
<Tabs
items={[
{ value: 'overview', label: 'Overview', content: <Overview /> },
{ value: 'usage', label: 'Usage', content: <Usage /> },
{ value: 'billing', label: 'Billing', content: <Billing /> },
]}
/>A multi-line text input, wired to its label, description, and error.
<Textarea label="What went wrong?" autoSize />
A time of day.
<TimeInput label="Start time" description="Times are in UTC." step={900} />ScopeBuilt on the native time input, so its appearance follows the platform and it carries no time zone.
A transient message about something that just happened.
<ToastProvider position="bottom-right"> <App /> </ToastProvider>
ScopeIncludes a provider, a queue, and timers. It does not persist toasts across navigation or coordinate multiple viewports.
A short label revealed on hover or focus.
<Tooltip content="Delete permanently">
<Button iconOnly variant="ghost" tone="danger" aria-label="Delete permanently">
<TrashIcon />
</Button>
</Tooltip>ScopePositions against the viewport with a flip and a clamp. It does not reposition inside a scrolling container that clips its own overflow, and it draws no arrow.
A person shown as an avatar next to their name and a secondary line.
<User name="Ada Lovelace" description="[email protected]" src="/ada.jpg" />