Web

Un design system sur trois plateformes : où tourne chaque composant, pourquoi pas ailleurs, et comment installer chacune.

Krizaka UI est un seul design system sur trois plateformes : le web (React), le mobile (React Native et Expo) et le bureau (l'app Mac d'Orazaka, dont la fenêtre Tauri affiche les composants web). Chaque composant dit où il tourne et, là où il ne tourne pas, pourquoi — un manque à construire, suivi par une issue, ou une plateforme à laquelle il n'est pas destiné, avec ce qu'on y utilise.

React 19 et Tailwind CSS v4 : une entrée par composant, rendu serveur par défaut, chaque jeton une variable CSS.

212 composants · 2 à construire · 13 sans objet

Installer

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

Puis, dans votre CSS

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

Mobile

React Native et Expo : les mêmes noms et props depuis @krizaka/ui/native, sur les mêmes jetons, sombre et clair, avec rôles et libellés pour les lecteurs d'écran.

87 composants · 39 à construire · 101 sans objet

Installer

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

Puis, à la racine de l'app

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

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

Bureau

L'app Mac d'Orazaka est une fenêtre Tauri 2 : les composants web y tournent tels quels, et quelques-uns ont une forme bureau — la barre de titre, la densité et les touches de menu du shell d'application (ADR-002).

166 composants · 2 à construire · 59 sans objet

Installer

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

Puis, la fenêtre

// 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 }

La matrice de parité

Chaque composant de @krizaka/ui et @krizaka/charts, lu dans la parité que déclare son meta. Un nouveau composant web sans décision mobile et bureau ne compile pas.

✓ y tourne · ✗ à construire (son issue) · n/a sans objet (quoi utiliser). Pour ce qui diffère entre chaque composant mobile et son jumeau web : parité avec le web

Où tourne chaque composant : web, mobile, bureau

Account menu	✓	n/aOn a phone the account is a screen of the tab bar, not a menu. → Settings layout	✓
Account settings	✓	✗ à construireThe 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	✓	✗ à construireThe 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	✓	✗ à construireAn 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	✓ forme bureau
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	✓	✗ à construireNeeds an Expo audio module as an optional peer; voice notes will need it. issue #278	✓
Auth layout	✓	✗ à construireorazaka-mobile-client hand-rolls it (src/ui/AuthShell.tsx). issue #275	✓
Avatar	✓	✓	✓
Badge	✓	✓	✓
Bar chart	✓	✓	✓
Bird plate	✓	✗ à construireAn 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	✓	✗ à construireAdvanced 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	✓	✗ à construireAdvanced 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	✓	✗ à construireA 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	✓	✗ à construireA 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	✓	✗ à construireNeeds 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	✓	✗ à construireNo 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	✓	✗ à construireAdvanced 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	✓	✗ à construireSlice 3 of the data-driven UI epic: the same messages drawn with the native primitives. issue #207	✓
Generated view catalog	✓	✗ à construireSlice 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	✓	✗ à construireIt 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	✓	✗ à construireAdvanced 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	✓	✗ à construireAvatars and covers are sent uncropped from the phone today. issue #278	✓
Image viewer	✗ à construireThe web galleries need a full-screen viewer too. issue #279	✓	✗ à construireThe 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	✓	✗ à construireA 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	✓	✗ à construireA 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	✓	✗ à construireA 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	✓	✗ à construireOn 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	✗ à construireThe web sign-in asks for verification codes too. issue #279	✓	✗ à construireThe 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	✓	✗ à construireThe native twin is a `Card` with a `Meter`; it follows when a mobile screen shows a quota (Yomizaka's library). issue #275	✓
Radar chart	✓	✗ à construireAdvanced 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	✓	✗ à construireAdvanced tier: no phone screen needs it yet. issue #280	✓
Scatter chart	✓	✗ à construireAdvanced 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	✓	✗ à construireA 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	✓	✗ à construireIt 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	✓	✗ à construireA product app's status deserves the same tag; it comes with the native paper roles. issue #421	✓
Speed lines	✓	✗ à construireIt 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	✓	✗ à construireThe 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	✓	✗ à construireIt 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	✓	✗ à construireIt 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	✓	✗ à construireA 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	✓	✗ à construireAdvanced 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	✓	✗ à construireThe Expo apps get the same queue on @krizaka/ui/native. issue #511	✓
Usage	✓	✗ à construireThe 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	✓	✗ à construireIt comes with the native paper roles of the Cahier. issue #421	✓
Vertical video	✓	✓	✓
Video player	✓	✓	✓
Video trimmer	✓	✗ à construireAn 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	✓	✓	✓