# Krizaka UI

> Krizaka UI: React and React Native components, tokens, icons, fonts, charts and page templates — documented from their code, accessible, in dark and light. An open-source project by Krizaka, Montréal.

Every page is generated from the code of the packages in https://github.com/krizaka/krizaka-ui (apps/site), at every change: a component's page comes from its meta.ts, its named examples and the JSDoc of its props. French: https://ui.krizaka.com/fr/.
Krizaka UI is an open-source project of Krizaka (https://www.krizaka.com); its Java half is Krizaka Java (https://java.krizaka.com).

## Guides

- [Krizaka UI](https://ui.krizaka.com/): The design system every Krizaka product is built on — tokens, a Tailwind preset and accessible React primitives.
- [Brand marks](https://ui.krizaka.com/foundations/brand-marks/): The five marks of the Krizaka family — drawn in code, animated, still under reduced motion.
- [Icons](https://ui.krizaka.com/foundations/icons/): The Krizaka signature icons: cut corners, a node at the core — search, copy, and the rules of use.
- [Motion](https://ui.krizaka.com/foundations/motion/): One motion system: easing, durations, the arrival of blocks and the rule that stills it all under reduced motion.
- [Colours & tokens](https://ui.krizaka.com/foundations/tokens/): The --kz-* vocabulary: colours, surfaces, radii, shadows — one set of semantic roles compiled to CSS, TypeScript and React Native.
- [Typography](https://ui.krizaka.com/foundations/typography/): Plus Jakarta Sans speaks, Inter reads, JetBrains Mono labels: the Krizaka faces, their scale and their rules — self-hosted, web and mobile.
- [Installation](https://ui.krizaka.com/installation/): Install Krizaka UI in a Next.js or Expo app: the packages, the stylesheet, the first component.
- [Parity with the web](https://ui.krizaka.com/mobile/): What exists in React Native, and how each component differs from its web twin.
- [Config](https://ui.krizaka.com/packages/config/): The ESLint, TypeScript and Prettier presets, and the ratchet that counts the UI debt of an app.
- [i18n](https://ui.krizaka.com/packages/i18n/): Typed messages, formatting and rich text for every Krizaka app, with the CLI that checks both languages.
- [Intl](https://ui.krizaka.com/packages/intl/): Money, numbers, dates and plurals formatted the same way in every Krizaka product.
- [Push](https://ui.krizaka.com/packages/push/): Mobile notifications through the Expo Push Service: batching, receipts and dead tokens, with no dependency.
- [Query](https://ui.krizaka.com/packages/query/): Server state for every Krizaka app: TanStack Query behind one package — typed fetch, Problem Details errors, live invalidation, App Router hydration, an offline cache on Expo.
- [Realtime](https://ui.krizaka.com/packages/realtime/): The server bus and presence behind live screens: memory, PostgreSQL or Redis, delivered over SSE.
- [Tailwind preset](https://ui.krizaka.com/packages/tailwind/): The Tailwind CSS v4 preset that turns the --kz-* tokens into utilities.
- [All templates](https://ui.krizaka.com/templates/): Whole pages and screens, grouped by what the person must do — each with the reason for its layout, live, with its phone version.
- [Act](https://ui.krizaka.com/templates/act/): You come here when a person must do something once: reach the team, sign in or up, set up, pay.
- [Converse](https://ui.krizaka.com/templates/converse/): You come here when people talk: an inbox, a chat, comments, a notifications centre.
- [Convince](https://ui.krizaka.com/templates/convince/): You come here when a visitor must decide: a landing, a product, a price, a comparison, a proof.
- [Explain](https://ui.krizaka.com/templates/explain/): You come here when a reader must understand: how it works, a documentation hub or article, a changelog, a FAQ, a policy.
- [Operate](https://ui.krizaka.com/templates/operate/): You come here when a person works every day: a dashboard, a console with a table, settings, an app shell.
- [Recover](https://ui.krizaka.com/templates/recover/): You come here when the way is blocked: an empty list, an error, a missing page, maintenance, a product still being built.
- [Show](https://ui.krizaka.com/templates/show/): You come here when the work itself is the argument: a gallery, a story, a case study, an object and its details.
- [Theming a product](https://ui.krizaka.com/theming/): How a product wears Krizaka UI: brand scopes, dark and light, and the values a theme may change.

## Components

- [Button](https://ui.krizaka.com/components/button/): The action: six looks, three sizes, three shapes (rounded, pill, the Krizaka cut corners) — and the whole life of an action built in: a wait traced by the loader glyph, its progress, a success or a failure drawn and announced.
- [Confirm button](https://ui.krizaka.com/components/confirm-button/): A destructive action in two presses: the first arms it and says what will happen, the second runs it.
- [Continue prompt](https://ui.krizaka.com/components/continue-prompt/): The last call of a page or a flow: a short question, what counts (days, seats, seconds), and the one action that continues — a calm card by default, an arcade cabinet as a variant.
- [Floating action button](https://ui.krizaka.com/components/fab/): The screen's one main action, floating above the content in the accent, clear of the safe area and the tab bar.
- [Checkbox](https://ui.krizaka.com/components/checkbox/): A box to check: checked, unchecked or indeterminate, with its words as one clickable label.
- [Chip](https://ui.krizaka.com/components/chip/): A selectable pill: alone a toggle, in a group a single or multiple choice, or a removable tag.
- [Choice grid](https://ui.krizaka.com/components/choice-grid/): A line-up of choices as tiles — a visual, a name, a line: a radio group with roving focus when selectable, a named showcase otherwise; sober by default, a select screen in the arcade flavour.
- [Combobox](https://ui.krizaka.com/components/combobox/): A text field that suggests and completes — one value or several as chips, from a static list or a server, with values created from what was typed.
- [Date picker](https://ui.krizaka.com/components/date-picker/): Dates and times chosen the way the task asks — a calendar, a period with presets, a strip of days, wheels, time slots, a month, a date of birth — as ISO values (2026-10-11, 2026-10, 18:30) the form, the address and the API share, in the locale's own words.
- [Field](https://ui.krizaka.com/components/field/): A form field: a label, a hint and an error around an Input, a Textarea or a native Select.
- [Filter bar](https://ui.krizaka.com/components/filter-bar/): The bar above a list: the controls that narrow it, the filters in force as removable chips, “Clear filters”, and the count of results — the state kept by the app, in the address.
- [Form](https://ui.krizaka.com/components/form/): A form = a schema (zod 4) + the package's fields, on TanStack Form v1: each error shows once the field is left and goes as soon as it is fixed, in the person's language (i18n keys, never the engine's English), a value can be checked on the server as it is typed, and the server's refusals land under their fields — web and React Native, the same schema.
- [OTP input](https://ui.krizaka.com/components/otp-input/): A one-time code in boxes over one real input: the keyboard's suggestion of the code and pasting fill every box at once.
- [Radio group](https://ui.krizaka.com/components/radio-group/): One choice among a few options, all visible: dots with their words, whole cards, tactile keys that press in, or a segmented control.
- [Search field](https://ui.krizaka.com/components/search-field/): A search box: a clear button, a global ⌘K / Ctrl+K shortcut, a debounced onSearch, Enter to submit, and suggestions with the keyboard.
- [Slider](https://ui.krizaka.com/components/slider/): A value or a range chosen by dragging a thumb along a track — steps you can see, the value floating over the thumb, the brand’s gradient, horizontal or vertical — with arrows and Page keys.
- [Switch](https://ui.krizaka.com/components/switch/): An on/off setting that applies at once.
- [Tag input](https://ui.krizaka.com/components/tag-input/): Free words as removable chips — Enter or a comma adds one, a paste adds several, suggestions complete, normalize cleans and validate refuses with a reason.
- [Tag selector](https://ui.krizaka.com/components/tag-selector/): Interests, languages, what one is looking for: toggle chips with a limit and a count — the others rest once the limit is reached.
- [Chip link](https://ui.krizaka.com/components/chip-link/): A chip that is a link — a filter that is an address — with the look of Chip, the current one marked, and chipVariants to style anything else; server-safe.
- [Command](https://ui.krizaka.com/components/command/): A command palette on cmdk: a search input over a filtered list of commands, inline or in a dialog.
- [Header](https://ui.krizaka.com/components/header/): A screen's header: the bar under the status bar, and a large title that folds into it as the content scrolls.
- [Nav bar](https://ui.krizaka.com/components/nav-bar/): The Krizaka navigation bar: a floating pill that tightens as the page scrolls, one light that glides to the item under the pointer or the focus and rests on the current page, accessible menus with rich links, and a mobile panel.
- [Pagination](https://ui.krizaka.com/components/pagination/): Moves through a long list page by page: numbers with ellipses that fold into “Page 3 of 12” on a phone, or previous / next on a cursor.
- [Segmented](https://ui.krizaka.com/components/segmented/): A segmented control that switches between views of a screen — the native counterpart of the web's segmented tabs.
- [Skip link](https://ui.krizaka.com/components/skip-link/): The first tab stop of a page: a link that skips the navigation and lands on the content — hidden until it is focused.
- [Step progress](https://ui.krizaka.com/components/step-progress/): The head of a multi-step flow — a sign-up, a profile to fill: back, segments that fill, the position in words.
- [Stepper](https://ui.krizaka.com/components/stepper/): The steps of a journey or a job: done steps checked, the current one traced by the Krizaka glyph (growing to its value), failures crossed, connectors that fill — and every state said in words.
- [Tab bar](https://ui.krizaka.com/components/tab-bar/): The app's main sections at the bottom of the screen: an icon and a word each, a badge for what is new, clear of the home indicator.
- [Tabs](https://ui.krizaka.com/components/tabs/): Views of the same page, one at a time: underlined sections, a segmented switch or pills — one light glides from the active tab to the next, in every variant.
- [Action sheet](https://ui.krizaka.com/components/action-sheet/): A short list of actions on an item from the bottom edge, the destructive one in danger, cancel apart.
- [Dialog](https://ui.krizaka.com/components/dialog/): A window over the page — centred, a bottom sheet or a side panel — and AlertDialog for a confirmation.
- [Dropdown menu](https://ui.krizaka.com/components/dropdown-menu/): A menu of actions opened from a trigger: items with icons, checkbox items, labels, separators, a destructive item.
- [Match dialog](https://ui.krizaka.com/components/match-dialog/): The moment two people choose each other — a match, a pair, a deal: the two avatars meet at a heart in the brand gradient, the next step under them.
- [Popover](https://ui.krizaka.com/components/popover/): A floating panel next to its trigger, for a small form or details, closed by Escape or a click outside.
- [Tooltip](https://ui.krizaka.com/components/tooltip/): A short label shown on hover and on keyboard focus, next to its trigger.
- [Alert](https://ui.krizaka.com/components/alert/): A message in the flow of the page: a tone, an icon, a title, a text and an optional action.
- [Empty state](https://ui.krizaka.com/components/empty-state/): What a list, a search or a panel says when it has nothing to show: an icon, a title, a line and an action.
- [Loader](https://ui.krizaka.com/components/loader/): A wait from start to end: nothing for the first instants, then the Krizaka glyph with its words, a percentage and an ETA, held long enough to read, ending on a check or a cross that is drawn and announced — and LoadingRegion, which hands a region over to a skeleton of its shape.
- [Mascot state](https://ui.krizaka.com/components/mascot-state/): A moment told by a bird of the flock: nothing yet, a long wait, done, it failed, welcome — the bird of the job beside the words and the next action.
- [Mascots](https://ui.krizaka.com/components/mascots/): The Krizaka flock: seven birds (falcon, owl, duck, flamingo, pigeon, lovebird, crane) in five moods, drawn in the product's brand colours — and the phoenix, the comeback.
- [Permission prompt](https://ui.krizaka.com/components/permission-prompt/): Before the system's permission dialog, the app says why: a bird, what it is for, the button that asks — and the way to the settings once refused.
- [Progress](https://ui.krizaka.com/components/progress/): How far a task or a goal has come: a bar or a ring — with its words and time left, what is buffered ahead, its steps as segments, and a paused or failed state that says where it stopped.
- [Pull to refresh](https://ui.krizaka.com/components/pull-to-refresh/): The platform's pull to refresh in the theme's accent, for any ScrollView or FlatList — or BrandedRefresh, where the product's own mark is drawn as you pull and turns while it refreshes.
- [Skeleton](https://ui.krizaka.com/components/skeleton/): A placeholder the shape of what is loading — lines, circles, blocks, or the real component turned into its own skeleton (SkeletonShape) — crossed by one reflection of the brand light.
- [Spinner](https://ui.krizaka.com/components/spinner/): The Krizaka spinner: light traced around a hexagon, its node breathing — indeterminate, or growing to a value; still and legible under reduced motion.
- [Splash hand-off](https://ui.krizaka.com/components/splash-handoff/): The static native splash dissolves into the product's animated mark until the first screen is ready — same place, same size, same background, no flash.
- [Toast](https://ui.krizaka.com/components/toast/): A short message that comes and goes — with the time it has left drawn and paused under the pointer, an undo that waits before an action is final, a long task updated in place, and repeats folded into one toast that counts.
- [Verified badge](https://ui.krizaka.com/components/verified-badge/): A seal that says the person or the account was verified (a selfie, an ID) — the accent, named in words.
- [Achievement](https://ui.krizaka.com/components/achievement/): Something done, and what it replaced: a milestone reached, a dare completed, a problem out of the way — on one grid of hairlines in a list, their badges arriving one by one; with three line emblems.
- [Activity feed](https://ui.krizaka.com/components/activity-feed/): What happened, newest first: grouped by day, runs folded (“×3”), “2 min ago” kept fresh, new events announced — and Timeline, one thing's history on a rail.
- [Avatar](https://ui.krizaka.com/components/avatar/): A person or an account: their picture, or initials while it loads, when it fails or when there is none.
- [Badge](https://ui.krizaka.com/components/badge/): A short status or label: a tone, two sizes, an optional dot that can pulse.
- [Chat](https://ui.krizaka.com/components/chat/): A conversation's parts — MessageBubble (time, receipt, retry), TypingIndicator, MessageComposer, ConversationItem — the same API on the web and React Native.
- [Countdown](https://ui.krizaka.com/components/countdown/): The time left until a moment, in tabular figures, turning urgent under a threshold.
- [Data table](https://ui.krizaka.com/components/data-table/): A table of records on TanStack Table v9 — sort, filters and facets, groups, details, pages, selection, column visibility, pinning and resizing — in the browser or on the server, cards on a phone, windowing for long lists.
- [Description list](https://ui.krizaka.com/components/description-list/): Facts about one thing as term and value: stacked, inline like a receipt, or a grid of key figures (KeyValueGrid).
- [Goal gauge](https://ui.krizaka.com/components/goal-gauge/): A goal counted in steps — 6 of 10 backers, 3 dares done, 3 seats left: a meter whose reached steps light one by one (or whose spent ones drain) when its chapter plays.
- [Kanban](https://ui.krizaka.com/components/kanban/): Cards in columns moved by drag and drop — and by the keyboard (Space, the arrows, Space) — every move announced, column limits in the counts.
- [Kbd](https://ui.krizaka.com/components/kbd/): A key or a keyboard shortcut, set as keys: one Kbd per key.
- [List](https://ui.krizaka.com/components/list/): Records read top to bottom — a leading visual, a title and a line, details and actions beside — dense or comfortable, selectable, windowed when long.
- [Map](https://ui.krizaka.com/components/map/): Maps that cost nothing per view — MapLibre (open source) over Protomaps tiles on the Krizaka CDN, painted from the tokens in dark or light and in the product's accent — with markers, clusters, the person's position, a radius and a location picker.
- [Markdown](https://ui.krizaka.com/components/markdown/): A Markdown text on the tokens — headings, lists and tasks, quotes, tables, links, images, footnotes, fenced code in CodeBlock — parsed by TanStack Markdown, safe by default (raw HTML is never rendered), with a streaming mode for a text that arrives in pieces: an AI answer. React Native draws the same AST in Text and View.
- [Marquee](https://ui.krizaka.com/components/marquee/): A band of items that slides forever — at a speed in pixels per second, paused by the pointer, the focus or its own pause button, read once by assistive technology, and a still row you scroll under reduced motion.
- [Meter](https://ui.krizaka.com/components/meter/): A measure within a known range — a quota, a balance, a share: thresholds turn it to warning then danger (or the reverse when high is good), and split into parts it becomes a stacked bar or ring with its legend.
- [Number ticker](https://ui.krizaka.com/components/number-ticker/): A figure that climbs into view once, or rolls digit by digit to each new value — server-rendered at its final value, its width held from the first paint, read once by assistive technology.
- [Profile card](https://ui.krizaka.com/components/profile-card/): A profile at a glance — a portrait, a name, a headline gauge, a few stats with their values in words, a line and actions: a creator, a match, a member, a plan.
- [Promise card](https://ui.krizaka.com/components/promise-card/): A promise, the keys that call it and who carries it: a product's guarantee with its bird, a shortcut and what it does — a calm card with key-caps by default, a combo card whose keys light one by one in the arcade flavour.
- [Stat](https://ui.krizaka.com/components/stat/): A key figure: a label, a value in tabular digits, a hint and a trend said in words.
- [Swipe deck](https://ui.krizaka.com/components/swipe-deck/): Cards decided one by one — drag right to like, left to pass, or the buttons (← → on the web) — with PersonCard: a person's photos, name, age, seal, distance, bio and interests.
- [Swipeable row](https://ui.krizaka.com/components/swipeable-row/): A row whose actions show under a swipe: left for the trailing ones, right for the leading ones, a full swipe runs the outermost.
- [Virtual](https://ui.krizaka.com/components/virtual/): Long lists and galleries rendered by what is in view, on TanStack Virtual: a list in its own region or the page's, a grid that fits the width, measured items, the end announced for infinite loading.
- [Audio player](https://ui.krizaka.com/components/audio-player/): A sound with a waveform you seek on — the peaks given by the server or computed once with Web Audio — play, time and speed, paused when it leaves the screen.
- [File upload](https://ui.krizaka.com/components/file-upload/): A drop zone that checks type, size and count, a list of uploads with preview, progress, speed and the actions each state allows, and a queue that pauses and resumes — Tus-ready without depending on it.
- [Image cropper](https://ui.krizaka.com/components/image-cropper/): A fixed frame — square, round, 9:16, a banner — over a picture or a video the person drags and zooms; a focus point and a zoom out, cropRect for the pixels.
- [Image viewer](https://ui.krizaka.com/components/image-viewer/): Images full screen on black: pinch and double tap to zoom, swipe between images, swipe down to close.
- [Media capture](https://ui.krizaka.com/components/media-capture/): The camera in the page: a photo or a clip, front or back, the permission asked only on a gesture, and a way out every time the camera cannot start.
- [Media picker](https://ui.krizaka.com/components/media-picker/): Photos and videos picked from the library or the camera, as a grid of tiles with a remove button and a count.
- [Photo grid](https://ui.krizaka.com/components/photo-grid/): A profile's photos in slots: the first is the main one, empty slots invite to add, photos reorder by drag (web), by their menu (React Native) or by buttons — every move announced.
- [Terminal replay](https://ui.krizaka.com/components/terminal-replay/): A terminal session played back: each command typed at the prompt, its output line by line, the screen following the last line — or the whole session at rest, as the server renders it.
- [Vertical video](https://ui.krizaka.com/components/vertical-video/): A 9:16 short video with the action rail of a short-video feed — follow, like, comments, share, your own tip button — and the creator's caption over the picture; ShortFeed stacks them as a snap-scrolling feed that plays the one in view.
- [Video player](https://ui.krizaka.com/components/video-player/): A video with accessible controls — HLS through an hls.js loaded only when needed, signed sources resolved at the last moment, subtitles, speed, full screen, a pause when it leaves the screen.
- [Video trimmer](https://ui.krizaka.com/components/video-trimmer/): The trim timeline of a video editor: two edge handles over a filmstrip frame the part kept, the outside dimmed, a playhead to scrub — every part stylable, the keyboard included.
- [Area chart](https://ui.krizaka.com/components/area-chart/): A volume over time: a line over a soft wash, or stacked areas whose parts add up to a total.
- [Bar chart](https://ui.krizaka.com/components/bar-chart/): Amounts compared across categories: grouped, stacked or horizontal bars, each value written at its tip.
- [Calendar heatmap](https://ui.krizaka.com/components/calendar-heatmap/): One cell a day over a year, weeks in columns, in one sequential hue: streaks, rhythms and gaps at a glance.
- [Candlestick](https://ui.krizaka.com/components/candlestick/): Open, high, low and close per period, rising candles hollow and falling ones filled, the volume in its own panel, zoom and thresholds.
- [Chart (ECharts option)](https://ui.krizaka.com/components/chart/): Any ECharts option on the Krizaka frame: the theme resolved from the tokens, the lazy engine, the states, the table, the keyboard, the export.
- [Charts provider](https://ui.krizaka.com/components/charts-provider/): The locale, the brand palette and the words of every chart below it, set once; plus the sliding window for live data.
- [Credit usage](https://ui.krizaka.com/components/credit-usage/): What is left of an allowance: the remaining amount in large, a meter that turns to warning then danger, the use per day and the day it runs out.
- [Earnings chart](https://ui.krizaka.com/components/earnings-chart/): Earnings per period in money: the bars of the net amount, the total and the last period's change written above, the payout threshold as a line.
- [Funnel](https://ui.krizaka.com/components/funnel/): Stages that lose people on the way, with the conversion from each stage to the next and from the first written beside it.
- [Gauge](https://ui.krizaka.com/components/gauge/): One value against its range on a 240° arc: zones that change its tone, a target tick, the value written in the middle.
- [Geo map](https://ui.krizaka.com/components/geo-map/): Where: a world choropleth in one sequential hue, bubbles on places, country names in the reader's language — plain SVG, the world loaded on demand.
- [Globe](https://ui.krizaka.com/components/globe/): The world as a lit 3D sphere — places, great-circle arcs, tinted regions — turning slowly while on screen, dragged by hand, in SVG without WebGL.
- [Goal progress](https://ui.krizaka.com/components/goal-progress/): A pot towards its goal, in money: an arc that fills, “raised of $500” under the amount, the supporters and the time left.
- [Heatmap](https://ui.krizaka.com/components/heatmap/): A measure across two dimensions — activity by weekday and hour — in one sequential hue, with a step legend.
- [Job throughput](https://ui.krizaka.com/components/job-throughput/): Jobs per period stacked by status, with the total and the success rate of the finished jobs written above.
- [Latency chart](https://ui.krizaka.com/components/latency-chart/): Median and 95th-percentile latency per item, in the unit that fits (ms, s, min), against a service objective.
- [Line chart](https://ui.krizaka.com/components/line-chart/): Change over time: one line per series, the last value written at its end, thresholds, markers and a crosshair tooltip.
- [Pie and donut chart](https://ui.krizaka.com/components/pie-chart/): Part of a whole: slices sorted by size, folded into “Other” past six, each share written in the legend; a donut carries the total in its hole.
- [Price ticker](https://ui.krizaka.com/components/price-ticker/): A live auction's price: the current bid in large, the change since the opening and the number of bids, the bids as steps, the reserve as a line.
- [Radar chart](https://ui.krizaka.com/components/radar-chart/): Several measures of a few entities at once — models compared on quality, speed, cost — on axes around a centre.
- [Sankey](https://ui.krizaka.com/components/sankey/): Flows between stages — credits from plans to models to outcomes — with widths proportional to the amounts.
- [Scatter chart](https://ui.krizaka.com/components/scatter-chart/): The relation between two measures, a bubble's area for a third, a colour per group, and the correlation said in words.
- [Sparkline](https://ui.krizaka.com/components/sparkline/): A word-sized trend without axes — in a stat, a table cell or a sentence — drawn on the server when its width is known.
- [Treemap](https://ui.krizaka.com/components/treemap/): Nested parts of a whole as rectangles — storage by project then by kind — a click zooming into a part.
- [Action bar](https://ui.krizaka.com/components/action-bar/): A row of link actions — discuss, propose, report, read the docs, see the code: buttons with their words at the end of a page, or icon buttons whose words are a tooltip at the foot of a card.
- [Argument card](https://ui.krizaka.com/components/argument-card/): A compact card that argues — about a third of a full card: who (icon, name, the bird in the corner), the trap in one line, facts and one short action; the long version lives on a detail page or unfolds in place.
- [Call-to-action panel](https://ui.krizaka.com/components/cta-panel/): The invitation at the end of a section or a page: a title, why it matters, the ways to answer — in the hue of the page.
- [Card grid](https://ui.krizaka.com/components/card-grid/): A responsive grid of cards: as many columns as the width allows (one on a phone), the cells of a row at one height, a staggered reveal and the light that follows the pointer.
- [Code block](https://ui.krizaka.com/components/code-block/): A code sample: its language and file name, the code highlighted by TanStack Highlight on the tokens (TS, TSX, JS, JSON, YAML, Bash, HTML, CSS, Java, Kotlin, diff — it scrolls sideways, never shrinks), numbered lines, lines set apart (highlighted, added, removed, in focus) and a copy button that says it copied — CodeTabs puts several build tools side by side.
- [Decision list](https://ui.krizaka.com/components/decision-list/): The decisions behind a product, numbered: what was chosen, large, then side by side what was refused, why, and what it costs the reader — each with its mark and its colour.
- [Landscape](https://ui.krizaka.com/components/landscape/): The Krizaka valley at dusk — peaks, a phoenix over a river of two flames, trees of light and the flock at work: a decorative backdrop in its own colours or in the host brand's.
- [Link card](https://ui.krizaka.com/components/link-card/): An entry point where the whole card is one link: an icon tile, a title, one sentence and the way in — compact, the same on every page, lifting and lighting under the pointer or the focus.
- [Mascot quote](https://ui.krizaka.com/components/mascot-quote/): A rule, a promise or a decision told by a bird: the sentence in a speech bubble, the bird under its tail and who speaks — inline in a card, callout alone in a section.
- [Page](https://ui.krizaka.com/components/page/): The frame of every page: one width (--kz-page-max), one pair of gutters, one vertical rhythm — Page, Section (full-bleed, its heading, a hairline or the brand's backdrop as transition) and SectionHeading, with Facts and Ticks.
- [Page hero](https://ui.krizaka.com/components/page-hero/): The first screen of a page: the way back, an eyebrow, the h1, a lead, what follows them (facts, actions) and an aside (the page's bird) — on the brand's backdrop, painted at once.
- [Pointer light](https://ui.krizaka.com/components/pointer-light/): The light that follows the pointer over a group of cards: one passive listener writes the pointer's position into the card it is over, the card's CSS draws the light.
- [Stage banner](https://ui.krizaka.com/components/stage-banner/): The announcement of a chapter: a stage and its name on one line, or, large, a stage above a title and a line — a sober eyebrow by default, a stage call that slams in for the arcade flavour.
- [Table of contents](https://ui.krizaka.com/components/toc/): The sections of a reading page: sticky beside the content on a wide screen, a row of chips that scrolls sideways on a phone, the section being read marked — with TocLayout to place it.
- [App shell](https://ui.krizaka.com/components/app-shell/): The shell of an application screen: a sidebar of sections that collapses to its icons on a desktop and opens as a drawer on a phone, a sticky header with the screen's title, a search that opens the command palette and its actions, the content — and the keyboard shortcuts a console lives by (⌘B, ⌘K, g then a letter).
- [Auth layout](https://ui.krizaka.com/components/auth-layout/): An entry screen — sign in, sign up, verify, onboarding: the product's brand panel (its gradient, a promise, a quote) beside a calm form; one column on a phone with the mark above the form.
- [Dashboard layout](https://ui.krizaka.com/components/dashboard-layout/): A dashboard: the screen's heading with its actions and filters, then a responsive grid of widgets — one column on a phone, two from sm, four from xl — each a titled region that spans one to four columns.
- [Detail layout](https://ui.krizaka.com/components/detail-layout/): One object's page: the way back, its media, name, status, facts and actions, its tabs, the content and a side panel that goes under the content on a phone.
- [Docs layout](https://ui.krizaka.com/components/docs-layout/): A documentation page in the site's frame: the pages, the article and its contents on a wide screen; on a phone the pages fold into a disclosure above the article.
- [Marketing layout](https://ui.krizaka.com/components/marketing-layout/): A site's page: the link that skips to the content, the floating bar, the page made of a PageHero and Sections in one frame, the footer.
- [Settings layout](https://ui.krizaka.com/components/settings-layout/): Settings: the sections on the side (a row of chips that scrolls on a phone) and the current section's forms, each a titled card with its own save.
- [Split view](https://ui.krizaka.com/components/split-view/): A list and its open item: two panes on a desktop; on a phone one at a time, the open item with the way back — chosen by showDetail, from the address.
- [Catalogue page](https://ui.krizaka.com/components/catalogue-page/): A catalogue or an index: the search in the hero, the filters in a sticky column beside the results (folded above them on a phone), the count, the results.
- [Changelog page](https://ui.krizaka.com/components/changelog-page/): What changed and why: each entry with its date and version sticking beside it, its changes by kind in words and colour, its reasons under it.
- [Component page](https://ui.krizaka.com/components/component-page/): A component's page: its name, summary, status and platforms, the live preview, the import line, its sections, the related components aside.
- [Contact page](https://ui.krizaka.com/components/contact-page/): Reaching the team: the public channels as cards beside the form, then what happens after sending.
- [Docs article page](https://ui.krizaka.com/components/docs-article-page/): A documentation article in the docs frame: the pages, the breadcrumb, the title with its facts, the reading column, the contents, previous and next.
- [Docs hub page](https://ui.krizaka.com/components/docs-hub-page/): The entry of a documentation: the search in the middle of the hero, the collections each in its product's brand with their quick links, quick starts beside the most read pages, what is new, the owl's promise.
- [Error page](https://ui.krizaka.com/components/error-page/): When a page is not there: the code drawn huge, the bird that lost its way, one sentence, a search and the ways back — never a dead end.
- [Gallery page](https://ui.krizaka.com/components/gallery-page/): A demo or a gallery: the filters as links, then the pieces in staggered columns, each framed with how it was made.
- [How-it-works page](https://ui.krizaka.com/components/how-it-works-page/): How a product works, told in steps along a numbered line — each step its words beside its visual, the sides alternating on a wide screen.
- [Landing page](https://ui.krizaka.com/components/landing-page/): A landing page: the promise beside the product alive in a window, a band of proofs, the features as a bento where the main one takes the room, the closing call.
- [Legal page](https://ui.krizaka.com/components/legal-page/): A policy or terms: the date in force, the short version in plain words, the sections in a narrow column with their contents beside them.
- [Longform page](https://ui.krizaka.com/components/longform-page/): A long read — a story, an essay, a case: numbered chapters in a reading column, pull quotes in the margin, figures that break out.
- [Pricing page](https://ui.krizaka.com/components/pricing-page/): Plans and what they cost: the plans side by side with the featured one lifted, the comparison as a table, what a credit buys, the questions people ask.
- [Product page](https://ui.krizaka.com/components/product-page/): A product's overview in its brand: split hero with facts and the product alive, the traps it removes as compact argument cards, its decisions with their cost, the promise a bird keeps, the closing call.
- [Status page](https://ui.krizaka.com/components/status-page/): Where things stand: the overall state in words and colour, each service on its line, the incidents — or, for what is not built yet, its progress and how to hear about it.
- [Card](https://ui.krizaka.com/components/card/): The composed chassis of every card: a media with overlays, a body with a title, a description, stats and a footer.
- [Glow card](https://ui.krizaka.com/components/glow-card/): A card lit by the brand: a bloom of the accent follows the pointer across it, and its border is a ring of the brand gradient that turns and brightens under the pointer or the focus.
- [Iso](https://ui.krizaka.com/components/iso/): The isometric kit: luminous objects built from the Krizaka vocabulary (hexagons, cut corners, the node) on a perspective grid — a hero driven by data (IsoHub) or composed from primitives.
- [Onboarding](https://ui.krizaka.com/components/onboarding/): A first launch in a few slides: swipe or tap Next, Skip at any time, dots that say where you are.
- [Page header](https://ui.krizaka.com/components/page-header/): The top of a page: a breadcrumb, the title, a description and the page's actions.
- [Screen](https://ui.krizaka.com/components/screen/): A screen of the app — a header, the content (scrolling, rising with the keyboard), a footer — and the templates built on it: app shell, sign-in, profile, feed, chat, settings, a map, notifications.
- [Scroll stage](https://ui.krizaka.com/components/scroll-stage/): The conductor of a told page: chapters (Scene) that play their entrance once, in order, as they scroll into view — the visual, then the announcement, then the words — with one slow loop each, running only while on screen.
- [Section backdrop](https://ui.krizaka.com/components/section-backdrop/): The backdrop of a page section: the brand's gradient, a light dome, an optional perspective grid and a blurred foreground.
- [Separator](https://ui.krizaka.com/components/separator/): A line between groups of content, horizontal or vertical, decorative by default.
- [cn](https://ui.krizaka.com/components/cn/): Joins class names and resolves Tailwind conflicts: the last class wins.
- [Recipes](https://ui.krizaka.com/components/recipes/): The variants of a component written once, as classes of the Krizaka tokens: the web wears them with tv(recipe), React Native reads the same classes into styles on the theme's roles with nativeRecipe(recipe).resolve(props, theme). Button, Badge, Chip and Card are built this way, so the two platforms cannot name different tokens.
- [Slot](https://ui.krizaka.com/components/slot/): Slot merges its props and classes into its only child — the engine of asChild — and VisuallyHidden names things for screen readers only.
- [Theme](https://ui.krizaka.com/components/theme/): Dark, light or the system's: ThemeProvider, ThemeScript against the flash, and ThemeToggle.
- [Txt](https://ui.krizaka.com/components/txt/): Text in the platform's type scale, coloured by a role of the current theme.
- [Tree view](https://ui.krizaka.com/components/tree-view/): A hierarchy the keyboard walks — the ARIA tree: one tab stop, the arrows move and open, a letter jumps, branches load on demand.

## Packages

- @krizaka/ui@3.8.0 — The Krizaka front-end platform's components: the primitives (button, card, dialog, toast, menu, field, tabs, chip, switch, slider, command palette, theme, countdown…) on the semantic --kz-* tokens, the animated marks (Krizaka, Orazaka, Orochia, Yasakia, Yororis) and the motion signature — web and /native.: https://www.npmjs.com/package/@krizaka/ui
- @krizaka/tokens@3.8.0 — The Krizaka semantic design tokens (--kz-*) and the brand themes (Krizaka, Orazaka, Orochia, Yasakia, Yororis): one DTCG source compiled to CSS (dark, light, media invariants), typed constants and React Native themes.: https://www.npmjs.com/package/@krizaka/tokens
- @krizaka/tailwind@3.8.0 — The Krizaka Tailwind CSS v4 preset: the semantic --kz-* tokens as utilities (bg-surface-1, text-fg-secondary, border-border-default, text-accent, rounded-xl…), illustration-only light/dark variants and the Krizaka easing.: https://www.npmjs.com/package/@krizaka/tailwind
- @krizaka/icons@0.5.0 — The Krizaka signature icons: one drawing language (24 grid, cut corners, a node at the core) for every Krizaka product — React (tree-shakable, server-safe) and React Native (react-native-svg).: https://www.npmjs.com/package/@krizaka/icons
- @krizaka/fonts@0.2.0 — The Krizaka typefaces, self-hosted: Plus Jakarta Sans (display), Inter (text), JetBrains Mono (mono) — WOFF2 subsets (latin, latin-ext) with metric-matched fallbacks for the web, static TrueType for React Native / Expo, SIL OFL 1.1.: https://www.npmjs.com/package/@krizaka/fonts
- @krizaka/charts@0.3.0 — Krizaka's data visualisation: typed, declarative React charts (line, area, bar, pie, radar, heatmap, calendar, sankey, funnel, gauge, sparkline, candlestick, treemap, scatter, geo map, 3D globe) on the --kz-* tokens and the brand palettes — an accessible data table, a written summary and keyboard navigation in every chart, SSR without layout shift, and React Native for the simple types.: https://www.npmjs.com/package/@krizaka/charts
- @krizaka/intl@0.2.0 — Money, numbers, dates and plurals formatted the same way in every Krizaka product: zero dependency, built on Intl, money from integer minor units only.: https://www.npmjs.com/package/@krizaka/intl
- @krizaka/i18n@0.2.0 — The i18n engine of every Krizaka app: typed message keys and placeholders from en.json, format(), plurals through @krizaka/intl, <Rich> (<b>, <a>), a React provider, and the krizaka-i18n CLI that checks catalogues and finds hard-coded strings.: https://www.npmjs.com/package/@krizaka/i18n
- @krizaka/query@0.2.0 — Server state for every Krizaka app: TanStack Query v5 with the Krizaka defaults, a typed fetch that reads RFC 9457 Problem Details, typed query keys, live invalidation from a realtime stream, App Router hydration and an offline persister for Expo.: https://www.npmjs.com/package/@krizaka/query
- @krizaka/realtime@0.2.0 — Realtime for Node apps behind one interface: a bus (publish / subscribe by channel) and presence (who is connected, by heartbeat and TTL), with memory, PostgreSQL LISTEN/NOTIFY and Redis / Valkey adapters, plus Server-Sent Events framing.: https://www.npmjs.com/package/@krizaka/realtime
- @krizaka/push@0.2.0 — Mobile push without an SDK: the Expo Push Service relays to FCM (Android) and APNs (iOS) from one HTTP call.: https://www.npmjs.com/package/@krizaka/push
- @krizaka/config@0.4.0 — The shared configuration of every Krizaka JavaScript repository: ESLint flat configs (base, Next.js, the four UI rules, the three stack rules, no locale ternary), the dependency-cruiser boundary, tsconfig bases, Prettier, EditorConfig, and the krizaka-ratchet debt counter.: https://www.npmjs.com/package/@krizaka/config