Web

One design system on three platforms: where every component runs, why not elsewhere, and how to install each.

Krizaka UI is one design system on three platforms: the web (React), mobile (React Native and Expo) and the desktop (the Orazaka Mac app, whose Tauri window renders the web components). Every component says where it runs and, where it does not, why — a gap to build, tracked by an issue, or a platform it is not meant for, with what to use there.

React 19 and Tailwind CSS v4: one entry per component, server-rendered by default, every token a CSS variable.

212 components · 2 to build · 13 not meant for it

Install

npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcss

Then, in your CSS

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";

Mobile

React Native and Expo: the same names and props from @krizaka/ui/native, on the same tokens, dark and light, with roles and labels for screen readers.

87 components · 39 to build · 101 not meant for it

Install

npx expo install react-native-svg
npm install @krizaka/ui

Then, at the root of your app

import { ThemeProvider, Button } from "@krizaka/ui/native";

<ThemeProvider>
  <Button variant="primary" label="Continue" />
</ThemeProvider>

Desktop

The Orazaka Mac app is a Tauri 2 window: the web components run there as they are, and a few have a desktop form — the app shell's title bar, density and menu keys (ADR-002).

166 components · 2 to build · 59 not meant for it

Install

npm create tauri-app@latest   # React + TypeScript
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcss

Then, the window

// The window: the title bar moves it, no drawer, the desktop's density (ADR-002).
<AppShell.Root desktop>…</AppShell.Root>

// tauri.conf.json → app.windows[0]
{ "titleBarStyle": "Overlay", "hiddenTitle": true, "minWidth": 960 }

The parity matrix

Every component of @krizaka/ui and @krizaka/charts, read from the parity its meta declares. A new web component without a mobile and a desktop decision does not build.

✓ runs there · ✗ to build (its issue) · n/a not meant for it (what to use). For how each mobile component differs from its web twin: parity with the web

Where every component runs: web, mobile, desktop

Account menu	✓	n/aOn a phone the account is a screen of the tab bar, not a menu. → Settings layout	✓
Account settings	✓	✗ to buildThe Expo apps get the same blocks on @krizaka/ui/native. issue #503	✓
Achievement	✓	n/aPart of the storytelling kit of scroll-driven site pages; a phone app tells its first steps with Onboarding. → Mascot state	n/aA public site's page, not a window of the Mac app.
Action bar	✓	n/aA block of a public site's page; an app screen on a phone is built from Screen, Header and Card. → Button	n/aA public site's page, not a window of the Mac app.
Action sheet	n/aThe web opens a menu next to its trigger. → Dropdown menu	✓	n/aThe Mac app opens a menu next to its trigger. → Dropdown menu
Activity feed	✓	✓	✓
Agenda	✓	✗ to buildThe native twin ships with Akinaza's mobile Today (the same props over the native List); the web one is first because the owner's day is read on a computer at the counter. issue #275	✓
Alert	✓	✗ to buildAn inline message above a form or a list; the apps use an empty state or a toast instead today. issue #275	✓
Analysis report	✓	✓	✓
Anatomy plate	✓	n/aA documentation figure on a reading page; an app explains a control in its own screen.	✓
App header	✓	✓	✓
App shell	✓	n/aOn a phone the app shell is a tab bar, a header and a screen. → Tab bar	✓ desktop form
Area chart	✓	✓	✓
Argument card	✓	n/aA block of a public site's page; an app screen on a phone is built from Screen, Header and Card. → Card	n/aA public site's page, not a window of the Mac app.
Audio player	✓	✗ to buildNeeds an Expo audio module as an optional peer; voice notes will need it. issue #278	✓
Auth layout	✓	✗ to buildorazaka-mobile-client hand-rolls it (src/ui/AuthShell.tsx). issue #275	✓
Avatar	✓	✓	✓
Badge	✓	✓	✓
Bar chart	✓	✓	✓
Bird plate	✓	✗ to buildAn app's welcome or empty state can carry its bird as a plate; it comes with the native paper roles. issue #421	✓
Button	✓	✓	✓
Calendar heatmap	✓	✗ to buildAdvanced tier: no phone screen needs it yet. issue #280	✓
Call-to-action panel	✓	n/aA block of a public site's page; an app screen on a phone is built from Screen, Header and Card. → Button	n/aA public site's page, not a window of the Mac app.
Candlestick	✓	✗ to buildAdvanced tier: no phone screen needs it yet. issue #280	✓
Captcha	✓	n/aTurnstile is a web widget; a phone app proves itself with its own session.	✓
Card	✓	✓	✓
Card grid	✓	n/aA block of a public site's page; an app screen on a phone is built from Screen, Header and Card. → Card	n/aA public site's page, not a window of the Mac app.
Catalogue page	✓	n/aA whole page of a public site; a phone app's screens are built from Screen, Header and the native primitives.	n/aA public site's page, not a window of the Mac app.
Changelog page	✓	n/aA whole page of a public site; a phone app's screens are built from Screen, Header and the native primitives.	n/aA public site's page, not a window of the Mac app.
Chapter	✓	n/aA long read's index and page frame on a public site; an app lists its items with List. → List	✓
Chart (ECharts option)	✓	n/aThe ECharts escape hatch needs the DOM; a phone draws the SVG charts of the native entry. → Line chart	✓
Chart card	✓	✗ to buildA phone dashboard frames its charts in a Card by hand today. issue #275	✓
Charts provider	✓	✓	✓
Chat	✓	✓	✓
Checkbox	✓	✓	✓
Chip	✓	✓	✓
Chip link	✓	n/aA block of a public site's page; an app screen on a phone is built from Screen, Header and Card. → Chip	✓
Chip row	✓	n/aA block of a public site's page; an app screen uses Chip.Group with `scrollable`. → Chip	✓
Choice grid	✓	n/aPart of the storytelling kit of scroll-driven site pages; a phone app tells its first steps with Onboarding. → Radio group	n/aA public site's page, not a window of the Mac app.
cn	✓	n/aClass names are the web's styling; React Native styles with StyleSheet and the theme's roles.	✓
Code block	✓	n/aCode on a phone is read inside an answer: the native Markdown renders its code blocks. → Markdown	✓
Combobox	✓	✓	✓
Command	✓	n/aA command palette is a keyboard tool; a phone searches. → Search field	✓
Comparison table	✓	n/aA block of a public site's landing page; a phone app does not argue against a competitor.	✓
Component page	✓	n/aA whole page of a public site; a phone app's screens are built from Screen, Header and the native primitives.	n/aA public site's page, not a window of the Mac app.
Confirm button	✓	✗ to buildA destructive action confirmed in place: no phone screen needs it yet beyond SwipeableRow. issue #276	✓
Contact page	✓	n/aA whole page of a public site; a phone app's screens are built from Screen, Header and the native primitives.	n/aA public site's page, not a window of the Mac app.
Continue prompt	✓	n/aPart of the storytelling kit of scroll-driven site pages; a phone app tells its first steps with Onboarding. → Onboarding	n/aA public site's page, not a window of the Mac app.
Countdown	✓	✓	✓
Cover hero	✓	n/aA shop's public storefront is a web page. → Profile card	✓
Credit usage	✓	✓	✓
Dashboard layout	✓	n/aA phone dashboard is one scrolling screen of cards. → Screen	✓
Data table	✓	n/aOn a phone the rows are a list of cards, each with its fields as a description list — not a table to scroll sideways. → List	✓
Date picker	✓	✓	✓
Decision list	✓	n/aA block of a public site's page; an app screen on a phone is built from Screen, Header and Card. → Description list	n/aA public site's page, not a window of the Mac app.
Description list	✓	✓	✓
Detail layout	✓	n/aA phone shows one object per screen, under its header. → Screen	✓
Dialog	✓	✓	✓
Docs article page	✓	n/aA whole page of a public site; a phone app's screens are built from Screen, Header and the native primitives.	n/aA public site's page, not a window of the Mac app.
Docs hub page	✓	n/aA whole page of a public site; a phone app's screens are built from Screen, Header and the native primitives.	n/aA public site's page, not a window of the Mac app.
Docs layout	✓	n/aDocumentation is read on the sites, not inside an app.	n/aA public site's page, not a window of the Mac app.
Docs nav	✓	n/aDocumentation is read on the sites, not inside an app.	n/aA public site's page, not a window of the Mac app.
Document viewer	✓	✗ to buildNeeds a PDF module; Yomizaka has no phone app yet. issue #278	✓
Doodle	✓	n/aA phone has no margin to scribble in.	✓
Drop overlay	✓	n/aA phone has no drag and drop from outside the app: the app offers the picker and the camera. → File upload	✓
Dropdown menu	✓	n/aA phone's menu of actions rises from the bottom. → Action sheet	✓
Earnings chart	✓	✓	✓
Elephant	✓	n/aA web mark for a page's hero or a chat's closing line; the app takes the same drawing from the mark assets until an app screen needs it. → Mascots	✓
Embed facade	✓	n/aA web page's embed; a native app opens the platform's own app or a link. → Video player	✓
Empty state	✓	✓	✓
Engine flow	✓	n/aA diagram of a public site's page; an app screen lists the same facts. → List	✓
Environment notice	✓	✓	✓
Error page	✓	n/aA whole page of a public site; a phone app's screens are built from Screen, Header and the native primitives.	✓
Field	✓	✓	✓
File upload	✓	n/aOn a phone files come from the camera roll or the camera. → Media picker	✓
Filter bar	✓	✗ to buildNo phone list screen filters yet; when one does, chips and a sheet. issue #277	✓
Floating action button	n/aA floating thumb-zone button is a touch idiom; a web screen puts its main action in the header. → Button	✓	n/aThe Mac app puts its main action in the toolbar. → Button
Flock	✓	n/aA decorative stage for a public page's first screen; an app screen speaks with MascotState. → Mascot state	✓
Footnote & caption	✓	n/aReading-page typography; an app says it in its own words. → Txt	✓
Force update screen	✓	✓	✓
Form	✓	✓	✓
Funnel	✓	✗ to buildAdvanced tier: no phone screen needs it yet. issue #280	✓
Gallery page	✓	n/aA whole page of a public site; a phone app's screens are built from Screen, Header and the native primitives.	n/aA public site's page, not a window of the Mac app.
Gauge	✓	✓	✓
Generated view	✓	✗ to buildSlice 3 of the data-driven UI epic: the same messages drawn with the native primitives. issue #207	✓
Generated view catalog	✓	✗ to buildSlice 3 of the data-driven UI epic: the same messages drawn by the native charts. issue #207	✓
Geo map	✓	n/aA choropleth over the world; a phone shows the MapLibre map of @krizaka/ui/native/map or a ranked list. → Bar chart	✓
Globe	✓	n/aA WebGL globe for a site's hero; a phone shows a map or a list. → Bar chart	n/aA public site's page, not a window of the Mac app.
Glossary	✓	n/aThe native twin is a follow-up; present the same catalogue in a native list for now. → Description list	✓
Glossary term	✓	n/aThe inline web tooltip has no native twin yet; a native screen can present the same definition in text. → Description list	✓
Glow card	✓	n/aA block of a public site's page; an app screen on a phone is built from Screen, Header and Card. → Card	n/aA public site's page, not a window of the Mac app.
Goal gauge	✓	✓	✓
Goal progress	✓	✓	✓
Grade stamp	✓	✗ to buildIt comes with the native paper roles of the Cahier. issue #421	✓
Header	n/aA web screen's title and actions are its page header. → Page header	✓	n/aThe Mac app's title bar is the shell's header. → App shell
Heatmap	✓	✗ to buildAdvanced tier: no phone screen needs it yet. issue #280	✓
How-it-works page	✓	n/aA whole page of a public site; a phone app's screens are built from Screen, Header and the native primitives.	n/aA public site's page, not a window of the Mac app.
Image cropper	✓	✗ to buildAvatars and covers are sent uncropped from the phone today. issue #278	✓
Image viewer	✗ to buildThe web galleries need a full-screen viewer too. issue #279	✓	✗ to buildThe Mac app renders the web's viewer once it exists. issue #279
Iso	✓	n/aAn isometric drawing of a site's hero.	n/aA public site's page, not a window of the Mac app.
Job throughput	✓	✓	✓
Kanban	✓	n/aA board needs width and dragging between columns; on a phone each column is a tab over a list. → Tabs	✓
Kbd	✓	n/aA phone has no keyboard shortcuts to show.	✓
Kind config editor	✓	✓	✓
KPI explained	✓	n/aThe native twin is a follow-up; compose the same data in a native screen for now. → Stat	✓
KPI stat	✓	✗ to buildA phone dashboard's head writes its figures by hand today. issue #275	✓
Landing page	✓	n/aA whole page of a public site; a phone app's screens are built from Screen, Header and the native primitives.	n/aA public site's page, not a window of the Mac app.
Landscape	✓	n/aA block of a public site's page; an app screen on a phone is built from Screen, Header and Card.	n/aA public site's page, not a window of the Mac app.
Language switch	✓	n/aAn app on a phone follows the system language, with a choice in its settings. → Settings layout	✓
Latency chart	✓	✓	✓
Legal page	✓	n/aA whole page of a public site; a phone app's screens are built from Screen, Header and the native primitives.	n/aA public site's page, not a window of the Mac app.
Line chart	✓	✓	✓
Link card	✓	n/aA block of a public site's page; an app screen on a phone is built from Screen, Header and Card. → Card	n/aA public site's page, not a window of the Mac app.
List	✓	✓	✓
Loader	✓	✓	✓
Longform page	✓	n/aA whole page of a public site; a phone app's screens are built from Screen, Header and the native primitives.	n/aA public site's page, not a window of the Mac app.
Maintenance screen	✓	✓	✓
Map	✓	✓	✓
Margin layout	✓	✗ to buildA phone is always the folded layout (the note under the item); the apps compose it from a numbered List until a screen asks for a twin. issue #645	✓
Markdown	✓	✓	✓
Marketing layout	✓	n/aA whole page of a public site; a phone app's screens are built from Screen, Header and the native primitives.	n/aA public site's page, not a window of the Mac app.
Marquee	✓	n/aDecorative scrolling logos of a site's page.	n/aA public site's page, not a window of the Mac app.
Mascot quote	✓	n/aA bird quoting a rule on a site's page; on a phone the bird carries a state. → Mascot state	n/aA public site's page, not a window of the Mac app.
Mascot state	✓	✓	✓
Mascots	✓	✓	✓
Match dialog	✓	✓	✓
Media capture	✓	✓	✓
Media gallery	✓	n/aA shop's public storefront is a web page. → Photo grid	✓
Media grid	✓	✗ to buildA mobile app hand-rolls its tiles and stories rail. issue #228	✓
Media picker	n/aThe web picks files with an upload field. → File upload	✓	n/aThe Mac app picks files with the upload field and drag and drop. → File upload
Meta row	✓	✓	✓
Meter	✓	✓	✓
Nav bar	✓	n/aA site's top bar; an app on a phone navigates with its tab bar. → Tab bar	n/aA public site's page, not a window of the Mac app.
Next actions	✓	n/aThe native twin is a follow-up; compose the same actions in a native screen for now. → Button	✓
Notification preferences	✓	✗ to buildOn a phone one switch per category in a `SettingsGroup` already does the job (a notifications screen); the matrix is a computer's idea. issue #275	✓
Number ticker	✓	✓	✓
Onboarding	n/aA web first run is a few steps on one page. → Stepper	✓	n/aThe Mac app's first run is the install wizard, a stepper. → Stepper
Opening hours	✓	n/aA shop's public storefront is a web page. → List	✓
OTP input	✗ to buildThe web sign-in asks for verification codes too. issue #279	✓	✗ to buildThe Mac app signs in with the web's form. issue #279
Page	✓	n/aA block of a public site's page; an app screen on a phone is built from Screen, Header and Card. → Screen	n/aA public site's page, not a window of the Mac app.
Page header	✓	n/aA phone screen's title and actions are its header. → Header	✓
Page hero	✓	n/aA block of a public site's page; an app screen on a phone is built from Screen, Header and Card. → Header	n/aA public site's page, not a window of the Mac app.
Page index	✓	n/aA documentation sidebar; an app's navigation is its tab bar and lists. → List	✓
Pagination	✓	✓	✓
Permission prompt	n/aThe browser asks for a permission itself; the page explains it beforehand. → Alert	✓	n/amacOS asks for a permission itself; the app explains it beforehand. → Alert
Photo grid	✓	✓	✓
Pie and donut chart	✓	✓	✓
Pointer light	✓	n/aIt follows a mouse pointer; a phone has none.	n/aA public site's page, not a window of the Mac app.
Popover	✓	n/aA phone shows extra content in a sheet. → Dialog	✓
Price ticker	✓	✓	✓
Pricing page	✓	n/aA whole page of a public site; a phone app's screens are built from Screen, Header and the native primitives.	n/aA public site's page, not a window of the Mac app.
Product page	✓	n/aA whole page of a public site; a phone app's screens are built from Screen, Header and the native primitives.	n/aA public site's page, not a window of the Mac app.
Profile card	✓	✓	✓
Progress	✓	✓	✓
Promise card	✓	n/aPart of the storytelling kit of scroll-driven site pages; a phone app tells its first steps with Onboarding. → Card	n/aA public site's page, not a window of the Mac app.
Pull to refresh	n/aA web page refreshes by reloading or with a button. → Button	✓	n/aA desktop window refreshes with Cmd+R or a toolbar button. → Button
Quota meter	✓	✗ to buildThe native twin is a `Card` with a `Meter`; it follows when a mobile screen shows a quota (Yomizaka's library). issue #275	✓
Radar chart	✓	✗ to buildAdvanced tier: no phone screen needs it yet. issue #280	✓
Radio group	✓	✓	✓
Rail nav	✓	n/aOn a phone the rail is already a bottom tab bar; a native app uses the TabBar. → Tab bar	✓
Recipes	✓	n/aThe recipes are already shared: the native Button, Badge, Chip and Card read the same definitions through nativeRecipe.	✓
Retro TV	✓	n/aThe CSS cabinet and SVG static belong to the web presentation; use the native video player for mobile playback. → Video player	✓
Reviews	✓	n/aA public storefront's block; the native apps read reviews in their own lists. → Card	✓
Route state	✓	n/aA native app routes with its navigator's params, not with a web address.	✓
Sankey	✓	✗ to buildAdvanced tier: no phone screen needs it yet. issue #280	✓
Scatter chart	✓	✗ to buildAdvanced tier: no phone screen needs it yet. issue #280	✓
Screen	n/aA web screen's frame is the application shell. → App shell	✓	n/aThe Mac app's window is the application shell. → App shell
Scroll stage	✓	n/aPart of the storytelling kit of scroll-driven site pages; a phone app tells its first steps with Onboarding.	n/aA public site's page, not a window of the Mac app.
Search field	✓	✓	✓
Section backdrop	✓	n/aA block of a public site's page; an app screen on a phone is built from Screen, Header and Card.	n/aA public site's page, not a window of the Mac app.
Segmented	n/aThe web's segmented control is the radio group's segments. → Radio group	✓	n/aThe Mac app uses the web's segments. → Radio group
Separator	✓	✗ to buildA hairline between rows; Orazaka's settings group draws its own. issue #275	✓
Service card	✓	n/aA shop's public storefront is a web page; the apps book through their own lists. → List	✓
Settings layout	✓	✓	✓
Showcase	✓	✓	✓
Signature	✓	✗ to buildIt comes with the native paper roles of the Cahier. issue #421	✓
Site Cahier	✓	n/aA whole page of a public site; a phone app's screens are built from Screen, Header and the native primitives.	n/aA public site's page, not a window of the Mac app.
Site footer	✓	n/aA site's footer; an app has none.	n/aA public site's page, not a window of the Mac app.
Sites	✓	n/aThe Krizaka family as data for the sites' bars; the apps are independent products.	n/aA public site's page, not a window of the Mac app.
Skeleton	✓	✓	✓
Skip link	✓	n/aScreen readers on a phone move by headings and the rotor; there is no keyboard to skip with.	✓
Slider	✓	✓	✓
Slot	✓	n/aasChild merges props into a DOM child; React Native composes with Pressable instead.	✓
Slot picker	✓	n/aThe apps pick a time in their own booking flow; a native twin of the weeks follows the first app that needs it. → Date picker	✓
Sparkline	✓	✓	✓
Specimen tag	✓	✗ to buildA product app's status deserves the same tag; it comes with the native paper roles. issue #421	✓
Speed lines	✓	✗ to buildIt comes with the native paper roles of the Cahier. issue #421	✓
Spinner	✓	✓	✓
Splash hand-off	n/aA web page has no splash screen; a wait shows the loader. → Loader	✓	n/aThe Mac app opens on its window; a wait shows the loader. → Loader
Split view	✓	n/aA phone shows one pane at a time: the list, then the item on its own screen. → Screen	✓
Stage banner	✓	n/aPart of the storytelling kit of scroll-driven site pages; a phone app tells its first steps with Onboarding.	n/aA public site's page, not a window of the Mac app.
Stat	✓	✗ to buildThe phone dashboards (a creator's earnings, Orazaka usage) write a figure and its caption by hand. issue #275	✓
Status chip	✓	✓	✓
Status page	✓	n/aA whole page of a public site; a phone app's screens are built from Screen, Header and the native primitives.	n/aA public site's page, not a window of the Mac app.
Step progress	✓	✓	✓
Step showcase	✓	n/aA product site's tour of the app; inside the phone app the real screens are the tour.	✓
Stepper	✓	✓	✓
Sticky action	✓	n/aA native screen has its own bottom bar. → Floating action button	✓
Stuck	✓	✗ to buildIt comes with the native paper roles of the Cahier. issue #421	✓
Swipe deck	✓	✓	✓
Swipeable row	n/aSwiping a row is a touch gesture; on the web a row's actions are a menu. → Dropdown menu	✓	n/aOn the Mac a row's actions are a menu. → Dropdown menu
Switch	✓	✓	✓
Tab bar	n/aA web app navigates with its sidebar or a site's bar. → App shell	✓	n/aThe Mac app navigates with its sidebar. → App shell
Table of contents	✓	n/aA reading page's sticky contents; a phone screen is short and scrolls.	n/aA public site's page, not a window of the Mac app.
Tabs	✓	✓	✓
Tag input	✓	n/aTyping free tags is a keyboard task; on a phone the tags are chosen. → Tag selector	✓
Tag selector	✓	✓	✓
Taped photo	✓	✗ to buildIt comes with the native paper roles of the Cahier. issue #421	✓
Terminal replay	✓	n/aA recorded terminal session shown on a site's page.	n/aA public site's page, not a window of the Mac app.
Text style	✓	✗ to buildA shop owner styles the storefront's text from a computer; the native picker is a follow-up when a mobile admin needs it. `StyledText`'s value is the same on a phone. issue #561	✓
Theme	✓	✓	✓
Toast	✓	✓	✓
Tooltip	✓	n/aA phone has no hover: say it in the label or the hint.	✓
Tree view	✓	n/aDeprecated: no product uses it.	n/aDeprecated: no product uses it.
Treemap	✓	✗ to buildAdvanced tier: no phone screen needs it yet. issue #280	✓
Txt	n/aText on the web is HTML styled by the type scale's classes.	✓	n/aThe Mac app renders the web's HTML text.
Update prompt	✓	✓	✓
Upload queue	✓	✗ to buildThe Expo apps get the same queue on @krizaka/ui/native. issue #511	✓
Usage	✓	✗ to buildThe phone apps show their credits through Meter and Stat by hand; a native twin of the blocks follows the first app that moves onto them. issue #728	✓
Verified badge	✓	✓	✓
Versus card	✓	✗ to buildIt comes with the native paper roles of the Cahier. issue #421	✓
Vertical video	✓	✓	✓
Video player	✓	✓	✓
Video trimmer	✓	✗ to buildAn upload from the phone will need it. issue #278	✓
Virtual	✓	n/aThe native list windows its rows already (FlashList). → List	✓
Wall	✓	n/aAn ornamental storefront surface belongs to web pages; native content should stay in a scrolling gallery. → Media grid	✓
Waveform	✓	✓	✓