Skip to content
UI Kit
Accent color

App shells

The frame of an application. It places navigation, header, panes and content on desktop, tablet and phone, with a sidebar that turns into a rail and a drawer, navigation in the header, three panes that push on phones, an inspector that becomes a sheet and a focus mode for one task.

5 variants
Switch category

App shell

Sidebar and header

A full sidebar on desktops, an icon rail with tooltips on tablets, a header with a drawer on phones. Search and notifications sit in the header.

Open in Studio

Top navigation

Sections in the header with a gliding underline. Tablets get them as a second row with icons, phones a drawer.

Open in Studio

Three panes

Rail, list and detail as in a support inbox. Tablets keep list and detail, phones show the list and push the detail in with a back button.

Open in Studio

With inspector

Content with a details column on the right, the header button shows and hides it. Below 1024 px it opens as a sheet, from the right on tablets and from the bottom on phones.

Open in Studio

Focus mode

One task without distraction. A slim header with close, a step bar that fills, the content in a narrow column and back and continue at the bottom.

Open in Studio

Details

What App shell brings along, read from the registry and the source.

Area
Layout
Variants
5
Version
1.0.0 · since 1.1.0
File
components/ui/app-shell.tsx
Brings along
utilskiticon
npm packages
None
Languages
English and German, 11 texts of its own
Studio
All 5 variants editable
In collections
App dashboard
Build with AI
Over MCP in Claude, Cursor, Copilot and Codex

Props

The AppShellProps interface from components/ui/app-shell.tsx, with the comments from the code.

  • variantoptional
    AppShellVariant

    sidebartop-navthree-paneinspectorfocus

  • brandrequired
    { name: string; logo?: React.ReactNode }
  • navoptional
    AppShellNavItem[]
  • secondaryNavoptional
    AppShellNavItem[]

    Help, settings: at the bottom of the sidebar or rail

  • useroptional
    { name: string; email?: string }
  • titleoptional
    string

    The page title in the header

  • searchoptional
    string

    A search field in the header with this placeholder

  • actionsoptional
    React.ReactNode

    Buttons at the right end of the header

  • listTitleoptional
    string

    three-pane: the list and its title, the children are the detail of the picked item

  • itemsoptional
    AppShellListItem[]
  • defaultItemoptional
    number
  • onItemChangeoptional
    (index: number) => void
  • inspectoroptional
    React.ReactNode

    inspector: the panel and its title

  • inspectorTitleoptional
    string
  • defaultInspectorOpenoptional
    boolean
  • stepsoptional
    string[]

    focus: the steps and the current one, the labels of the footer buttons

  • stepoptional
    number
  • onStepChangeoptional
    (step: number) => void
  • backLabeloptional
    string
  • nextLabeloptional
    string
  • doneLabeloptional
    string
  • notificationsHrefoptional
    string

    sidebar: address of the notifications, shows the bell in the header

  • exitHrefoptional
    string

    focus: where the close button leads, or what it does

  • onExitoptional
    () => void
  • filloptional
    boolean

    Fill the parent instead of the window height

  • childrenoptional
    React.ReactNode

Built-in texts

App shell writes these texts itself. The language follows the KitProvider, the labels prop replaces single ones.

Show all 11 texts
navEnglish MainGerman Hauptnavigation
menuEnglish Open menuGerman Menü öffnen
closeEnglish CloseGerman Schließen
searchEnglish SearchGerman Suchen
notificationsEnglish NotificationsGerman Benachrichtigungen
backEnglish BackGerman Zurück
inspectorEnglish Show detailsGerman Details zeigen
hideInspectorEnglish Hide detailsGerman Details ausblenden
stepEnglish StepGerman Schritt
ofEnglish ofGerman von
listEnglish ListGerman Liste

Accessibility

Read from the source of the component.

  • App shell handles the keys Escape itself.
  • Sets aria-controls, aria-current, aria-expanded, aria-label, aria-modal and aria-pressed, so screen readers announce purpose and state.
  • Uses the role dialog.
  • Every field has a label, visible or for screen readers.
  • Adds text for screen readers where icons and graphics stand alone.
  • Shows a visible focus ring when used with the keyboard.
  • The server renders the starting state in full, JavaScript only adds the interaction.

Motion

  • Rises in briefly the first time it comes into view (kit-rise, useInView).
  • With reduced motion (prefers-reduced-motion) it stays still. 5 places in the code switch motion off then.

Frequent questions

How do I install App shell?

With aiw add @ai-website/app-shell. The command puts components/ui/app-shell.tsx into your project, the code is yours from then on. It brings along icon. It needs no further npm packages.

Which variants does App shell have?

5 variants, Sidebar and header, Top navigation, Three panes, With inspector and Focus mode. You pick one with the variant prop, for example variant="top-nav".

Can I translate the texts of App shell?

Yes. App shell carries 11 texts of its own in English and German, such as “Main”, “Open menu” and “Close”. The language follows the KitProvider, single texts change through the labels prop.

Can an AI assistant build with App shell?

Yes. Through the MCP server of the aiw CLI, Claude, Cursor, GitHub Copilot, Windsurf, Codex and Gemini find App shell with aiw_components and install it with aiw_add @ai-website/app-shell. Name the variant in your prompt, for example variant="sidebar", and the assistant writes your content straight into the props.

Can I adjust App shell without code?

Yes, in the Studio. All 5 variants are editable there, texts, lists and switches. The Studio writes the matching AppShell code to copy.

Similar components

More from Layout, the same area of the kit.

Often combined with

Sections that usually sit next to App shells on a page.

Often searched

Jump to

Copied to the clipboard