Swirski UI

Layout

AppShell

Composable application layout primitives for sidebars, navbars and bounded page content.

Component

20

Request Changes

Import

import {
  AppShell,
  AppShellBody,
  AppShellContent,
  AppShellMain,
  AppShellNavbar,
  AppShellSidebar,
} from "@swirski/ui";

Composition

AppShell
|-- AppShellSidebar
`-- AppShellBody
    |-- AppShellNavbar
    `-- AppShellMain
        `-- AppShellContent

Playground

4 controls

Studio workspace

Live

Dashboard

App chrome, content rail and regions move together.

Orders

Drafts

Revenue

Controls

Usage

<AppShell>
  <AppShellSidebar
    aria-label="Workspace navigation"
    side="left"
    width="md"
  >
    <nav>...</nav>
  </AppShellSidebar>
  <AppShellBody>
    <AppShellNavbar>Studio workspace</AppShellNavbar>
    <AppShellMain>
      <AppShellContent width="lg">
        Page content
      </AppShellContent>
    </AppShellMain>
  </AppShellBody>
</AppShell>

Props

36 generated
PropTypeDefaultNotes
AppShell.asChildbooleanfalseRenders the child as the root shell element.
AppShell.childrenRequiredReactNode-Composed shell regions, usually sidebar and body.
AppShell.size'sm' | 'md' | 'lg'"md"Controls shared spacing and navbar height.
AppShell.tone'default' | 'white' | 'black'"default"Applies the root shell surface treatment.
AppShell.variant'default' | 'compact'"default"Switches between regular and denser shell chrome.
AppShellSidebar.asChildbooleanfalseRenders the child as the root element.
AppShellSidebar.childrenRequiredReactNode-Shell content or composed AppShell regions.
AppShellSidebar.collapseBelow'md' | 'lg' | 'never'"md"Viewport where the sidebar is hidden below.
AppShellSidebar.side'left' | 'right'"left"Places the sidebar on either side of the shell.
AppShellSidebar.size'sm' | 'md' | 'lg'"md"Controls shell spacing and region height.
AppShellSidebar.stickybooleantruePins the sidebar during page scrolling.
AppShellSidebar.tone'default' | 'white' | 'black'"default"Applies the shell surface treatment.
AppShellSidebar.variant'default' | 'compact'"default"Controls the density of shell chrome.
AppShellSidebar.width'sm' | 'md' | 'lg'"md"Controls the responsive sidebar width.
AppShellBody.asChildbooleanfalseRenders the child as the root element.
AppShellBody.childrenRequiredReactNode-Shell content or composed AppShell regions.
AppShellBody.size'sm' | 'md' | 'lg'"md"Controls shell spacing and region height.
AppShellBody.tone'default' | 'white' | 'black'"default"Applies the shell surface treatment.
AppShellBody.variant'default' | 'compact'"default"Controls the density of shell chrome.
AppShellNavbar.asChildbooleanfalseRenders the child as the root element.
AppShellNavbar.childrenRequiredReactNode-Shell content or composed AppShell regions.
AppShellNavbar.size'sm' | 'md' | 'lg'"md"Controls shell spacing and region height.
AppShellNavbar.stickybooleantruePins the navbar to the top edge while scrolling.
AppShellNavbar.tone'default' | 'white' | 'black'"default"Applies the shell surface treatment.
AppShellNavbar.variant'default' | 'compact'"default"Controls the density of shell chrome.
AppShellMain.asChildbooleanfalseRenders the child as the root element.
AppShellMain.childrenRequiredReactNode-Shell content or composed AppShell regions.
AppShellMain.size'sm' | 'md' | 'lg'"md"Controls shell spacing and region height.
AppShellMain.tone'default' | 'white' | 'black'"default"Applies the shell surface treatment.
AppShellMain.variant'default' | 'compact'"default"Controls the density of shell chrome.
AppShellContent.asChildbooleanfalseRenders the child as the root element.
AppShellContent.childrenRequiredReactNode-Shell content or composed AppShell regions.
AppShellContent.size'sm' | 'md' | 'lg'"md"Controls shell spacing and region height.
AppShellContent.tone'default' | 'white' | 'black'"default"Applies the shell surface treatment.
AppShellContent.variant'default' | 'compact'"default"Controls the density of shell chrome.
AppShellContent.width'sm' | 'md' | 'lg' | 'xl' | 'full'"lg"Controls the maximum width of the content rail.
Previous: TableNext: Container