Krizaka UI
The design system every Krizaka product is built on — tokens, a Tailwind preset and accessible React primitives.
@krizaka/ui is one set of components — buttons, cards, dialogs, menus, fields — written once against semantic
tokens, for the web and for React Native, so a product changes its identity by changing values, never components.
The code writes this documentation. Every component page is generated, at each build of this site, from the package's own code: what the component is, when to use it and when not, its examples rendered live with the code you copy (web and React Native), its props read from its types and its accessibility. One list of components, one link to share.
All components
Actions
Forms
- CheckboxA box to check: checked, unchecked or indeterminate, with its words as one clickable label.
- ChipA selectable pill: alone a toggle, in a group a single or multiple choice, or a removable tag.
- FieldA form field: a label, a hint and an error around an
Input, aTextareaor a nativeSelect. - Radio groupOne choice among a few options, all visible: dots with their words, or whole cards.
- SliderA value or a range chosen by dragging a thumb along a track, with arrows and Page keys.
- SwitchAn on/off setting that applies at once.
Navigation
- CommandA command palette on cmdk: a search input over a filtered list of commands, inline or in a dialog.
- SegmentedA segmented control that switches between views of a screen — the native counterpart of the web's segmented tabs.
- TabsViews of the same page, one at a time: underlined sections, a segmented switch or pills.
Overlays
- DialogA window over the page — centred, a bottom sheet or a side panel — and
AlertDialogfor a confirmation. - Dropdown menuA menu of actions opened from a trigger: items with icons, checkbox items, labels, separators, a destructive item.
- PopoverA floating panel next to its trigger, for a small form or details, closed by Escape or a click outside.
- TooltipA short label shown on hover and on keyboard focus, next to its trigger.
Feedback
- AlertA message in the flow of the page: a tone, an icon, a title, a text and an optional action.
- Empty stateWhat a list, a search or a panel says when it has nothing to show: an icon, a title, a line and an action.
- ProgressHow far a task or a goal has come: a bar or a ring, determinate or indeterminate.
- SkeletonA placeholder the shape of what is loading: a line, a circle or a block.
- SpinnerAn indeterminate wait: a turning ring named by
label. - ToastA short message that comes and goes:
toast()from anywhere, oneToasterper app.
Data display
- AvatarA person or an account: their picture, or initials while it loads, when it fails or when there is none.
- BadgeA short status or label: a tone, two sizes, an optional dot that can pulse.
- CountdownThe time left until a moment, in tabular figures, turning urgent under a threshold.
- KbdA key or a keyboard shortcut, set as keys: one
Kbdper key. - StatA key figure: a label, a value in tabular digits, a hint and a trend said in words.
Layout
- CardThe composed chassis of every card: a media with overlays, a body with a title, a description, stats and a footer.
- Page headerThe top of a page: a breadcrumb, the title, a description and the page's actions.
- Section backdropThe backdrop of a page section: the brand's gradient, a light dome, an optional perspective grid and a blurred foreground.
- SeparatorA line between groups of content, horizontal or vertical, decorative by default.
Foundations
- cnJoins class names and resolves Tailwind conflicts: the last class wins.
- Slot
Slotmerges its props and classes into its only child — the engine ofasChild— andVisuallyHiddennames things for screen readers only. - ThemeDark, light or the system's:
ThemeProvider,ThemeScriptagainst the flash, andThemeToggle. - TxtText in the platform's type scale, coloured by a role of the current theme.
Install in four lines
npm install @krizaka/ui@beta @krizaka/tailwind@beta @krizaka/tokens@beta tailwindcss@import "tailwindcss";
@import "@krizaka/tailwind"; /* tokens + utilities + motion signature */
@import "@krizaka/ui/tailwind.css"; /* Tailwind generates the classes the primitives use */import { Button } from "@krizaka/ui/button";
export default function Save() {
return <Button variant="primary">Save</Button>;
}One entry point per primitive (@krizaka/ui/card, @krizaka/ui/dialog…): an app ships only what it imports.
The component contract
Every primitive follows the same rules, checked in the repository before it is released:
| Rule | What it means for you |
|---|---|
| Tokens only | No palette colour, no light: / dark: class: dark, light and a product theme only change --kz-* values. |
| Composable | Compound parts (Card.Root, Card.Media…) and asChild to render your own link or element. |
className wins | Your classes are merged last (tailwind-merge): override any part without forking. |
| Accessible | Radix behaviour for overlays and inputs, visible keyboard focus (--kz-ring), names required where a screen reader needs one. |
| Server-safe when it can be | A primitive without state or effect has no "use client": it renders in a Server Component. |
| Reduced motion | Entrance and idle motion stop under prefers-reduced-motion. |
| Documented by its code | Each component carries its documentation (meta.ts), its named examples and a description for every prop; the release fails without them. |
Where the pieces live
| Package | Role |
|---|---|
@krizaka/tokens | The --kz-* vocabulary: CSS, typed constants, React Native themes. |
@krizaka/tailwind | The Tailwind v4 preset: bg-surface-1, text-fg-secondary, border-border-default… |
@krizaka/ui | The primitives (this section), the brand marks and the motion signature. |
@krizaka/intl | Money, numbers, dates and plurals, formatted the same way everywhere. |
The source and the release notes are on GitHub.