Web only — React, from @krizaka/ui/app-shell. Beta: its API may still change in a minor version.

Installation

Install

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

Styles

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

Import

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

Examples

Props

Accessibility

• 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".

Keyboard

Best practices

• 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.

Related components

• 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: 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.
• DialogA window over the page — centred, a bottom sheet or a side panel — and AlertDialog for a confirmation.

Generated from the code of @krizaka/ui 2.10.0: its meta.ts, its examples and its types.Edit this documentation on GitHub