Project overview
Main content
The host application supplies navigation, actions, and page content.
App shell
Application frame with a fixed sidebar, sticky inner header, and independently scrolling content area.
Included in the single kansho full pack. Components are not offered as separate installs.
- Source
components/shell/app-shell.tsx- Dependencies
react
Representative frame
Constrained previewComponent documentation
App Shell
components/shell/app-shell.tsxPurpose
Provides the top-level sidebar, header, and main-content layout for an application screen.
Appropriate use
Use as the structural frame when a product view has persistent navigation and a distinct main region.
Example
components/shell/app-shell.tsx has a representative live example in the "Representative frame" section on /components/app-shell.
States
Supports arbitrary sidebar, header, and content compositions with responsive overflow behaviour.
API and props
AppShell accepts sidebar, children, and className; AppShellHeader and AppShellContent accept children and className.
Dependencies
React and the Kansho cn utility.
Accessibility
Includes a keyboard-focusable skip link to the content container, while AppShellContent renders the main landmark.
Limitations
It does not choose navigation content, mobile collapse behaviour, routing, or application state for the caller.
Source
Source: components/shell/app-shell.tsx.
Full pack
components/shell/app-shell.tsx is documented at /components/app-shell and installs only through the single Kansho full pack; no individual component install is offered.