Web uniquement — React, depuis @krizaka/ui/app-shell. Bêta : son API peut encore changer à une version mineure.

Pourquoi il est là. the web apps' adoption: Orochia (PS5), Orazaka (PS6): the shell of every authenticated web screen.

Installation

Installer

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

Styles

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

Importer

import { AppShell, useShortcuts, formatShortcut } from "@krizaka/ui/app-shell";

Exemples

Props

Accessibilité

• skipLabel on AppShell.Root adds the skip link (WCAG 2.4.1): the first tab stop, landing on AppShell.Main.
• The sidebar is a nav named by label; the current item carries aria-current="page".
• On a phone the drawer is a modal dialog (Radix): focus trapped inside, Escape and the overlay close it, the focus returns to the button.
• The header's title is the screen's h1; nested layouts use headingAs="h2".
• A combination is announced with aria-keyshortcuts (Control+K, Meta+K on a Mac); a sequence is not a chord, so it is only shown on its keys, never named to assistive technology.
• The platform's keys are known after the first client render (⌘ on a Mac, Ctrl elsewhere): the server and the first render agree.

Clavier

Bonnes pratiques

• Five to nine items, grouped by what the user does (AppShell.Group), the current one marked with current.
• Give every item an icon: it is all that remains when the sidebar collapses (its words become a tooltip).
• Persist the collapse with collapsed + onCollapsedChange; put the account in the sidebar's footer.
• Render your router's links with AppShell.Item asChild.
• Give the sections a shortcut (g p: G then P): it clicks the item, so a router link navigates, and the keys show on hover and focus.
• Put AppShell.Search in the header and open your CommandDialog from its onOpen: ⌘K (Ctrl+K) opens it from anywhere.

Composants liés

• Dashboard layoutA 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.
• Nav barThe Krizaka navigation bar, the same on every site of the family: a floating pill that tightens as the page scrolls, the family switcher on the brand, 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.
• DialogA window over the page — centred, a bottom sheet or a side panel — and AlertDialog for a confirmation.
• Skip linkThe first tab stop of a page: a link that skips the navigation and lands on the content — hidden until it is focused.
• CommandA command palette on cmdk: a search input over a filtered list of commands, inline or in a dialog.
• Page headerThe top of a page: a breadcrumb, the title, a description and the page's actions.
• Action barA 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.
• Data tableA 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.
• FormA 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.

Générée depuis le code de @krizaka/ui 3.9.0 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub