The keyboard already works
⌘K opens it, arrows move through it, Enter picks and Escape backs out. Nobody has to file that ticket.
Type a command⌘K
- Open component
- Toggle theme
- Copy import
- Search docs
BetaOne package · zero config
The components youwere going to build.
Table, Toast, Dialog, Calendar and twenty more. Install once and keep the theme you already have. Variants are plain props, the awkward states are drawn, and everything is checked in light and dark before it ships.
- Accordion
- Alert
- Avatar
- Badge
- Breadcrumb
- Button
- Calendar
- Checkbox
- Dialog
- Drawer
- Dropdown
- Input
- Kbd
- Pagination
- Radio group
- Select
- Separator
- Skeleton
- Switch
- Table
- Tabs
- Textarea
- Toast
- Tooltip
Requirements
Built on the stackyou already run.
Those four are the whole list. There is no styling runtime, no provider to wrap the app in, and nothing new landing in package.json.
- React19
- Tailwind CSSv4 tokens
- TypeScriptstrict
- Next.jsapp router
Components
Most of the workis in the last ten percent.
Focus order, keyboard paths, the empty state nobody designs until launch week. That part is finished here.
Drag that reads as drag
Lift, hover target and drop each get their own visual state, so a card in motion never reads as a rendering glitch.
In progress2
Implement auth flow
AEAmelia EvansDoing
Optimize queries
NMNoah MitchellDoing
Ready for review1
Drop here
Ship empty states
GFGrace FosterReview
Controls that agree with each other
Checkbox, Switch and the slider share one token set, so a filter panel looks designed rather than assembled.
Filters
Price$0 – $250
Free shipping
Toasts that know when to leave
Timers pause on hover, and again when the tab goes to the background. A message can't expire while nobody is watching it.
Export complete
18 contacts written to contacts.csv
Queuedpaused on hover
- Draft savedjust now
- Upload failed — retry1 min ago
Errors that say what to fix
Validation lands on the field it belongs to and stays tied to that input through aria-describedby.
Billing detailsUnsaved
Legal name
Acme Inc.
As registered
Country
United Kingdom
Sets the tax rate
Billing email
amelia@acme
Enter a valid email address
VAT number
GB 428 1902
Optional
aria-invalid · aria-describedbyCancelSave
Anatomy
Here is the wholeshape of it.
The names it exports, the tokens it reads, the parts you compose. Nothing sits in between: no build step, no wrapper, no styling runtime.
One package, one import
Every component, and every part of every component, is a named export off the root. There is no deep path to remember.
Everything resolves from one set
Colour, radius and shadow are read at paint time. Swap the palette and React never hears about it.
Composed, not configured
Every piece is exported on its own, so you assemble the table your screen needs instead of talking one into existence through props.
Every path already drawn
Loading, empty and error ship as part of the component. They are usually the three you bolt on the week after the demo.
The whole library moves together
One version, one changelog, semver. Twenty-four files pasted in separately drift apart at their own pace; this doesn't.
Workflow
Three steps, thenyou're building.
Install the package, compose the parts, point them at your tokens. There is no fourth step waiting in a config file.
- 01Install
One package, every component.
Types come bundled, so the editor lists the variants while you type. Nothing to add per component, nothing to wire up afterwards.
$ npm install kipui - 02Compose
Every option is a prop.
You can read what a component does straight off the JSX. No class strings to merge, and no config file quietly deciding how it looks.
<Table hoverable
gridLines striped /> - 03Theme
One attribute swaps all five palettes.
Colour, radius and shadow all resolve from the same variable set. Set the attribute on the root and every component follows, in both light and dark.
<html data-theme="plum">
five palettes, light + dark
Scope
The work youdon't do twice.
Every row below is a ticket someone files eventually. The same seven, per component, on every project you have ever shipped.
| By hand · already here | Yours | Already here |
|---|---|---|
| Focus trapped in a dialog, and returned where it came from | Not provided | Dialog |
| aria-sort announced on a sortable column head | Not provided | Table |
| Toast timers that pause on hover and on a hidden tab | Not provided | Toast |
| Indeterminate checkbox that drives select-all correctly | Not provided | Checkbox |
| Empty, loading and error states for a data view | Not provided | Table |
| Contrast checked in light and dark, not just one | Not provided | Tokens |
| Reduced-motion path for every animation | Not provided | All of them |
API
Variants are props,not forks.
One component covers every surface it has to. When the design shifts, you change a prop and move on.
One API, twenty-four components
Learn Button once and you know the other twenty-three.
- 01
- Four prop names, carrying the same meaning everywhere
- 02
- No variant objects to look up, no class strings to merge
- 03
- Every combination has a live example under /components
One APIvariant · size
Button
Badge
Switch
Avatar
Readable at the call site
The JSX says what it does so the diff reads on its own.
- 01
- Flat named props instead of nested config objects
- 02
- Roles and keyboard paths arrive with the part
- 03
- Sortable heads announce aria-sort; dialogs trap and return focus
TableTableHeaderTableRowTableCellTableEmpty
composed
ContactsLive
Questions
The questionsworth asking first.
Answered from what the code actually does. Where the honest answer is a limitation, it is written down as one.
A package. Run npm install kipui, add two lines to your global stylesheet, then import components by name. Nothing else happens per component after that.
Still deciding?
The fastest answer is usually the source. Every component page puts the variants side by side with the props that produced them.
this FAQ is the Accordion component
Start with whichever component you need today.
Every component has a page of its own, with the variants laid out side by side. One install, your own tokens, and nothing else to set up.
© 2026 Kipui — MIT licensed
all systems nominal