# AppShell

> Root of the app frame (sidebar + topbar + page).

Source: https://ui.jcsoftdev.com/docs/components/app-shell

Root of the app frame (sidebar + topbar + page). It is the `app` container: the sidebar turns
into a drawer and the topbar shows its menu button when the SHELL is under 900 px wide,
whatever the viewport is, so the same shell works in a full page, a preview or a story.

## Import

```ts
import { AppShell } from "@jcsoftdev/ui/shell";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/shell/app-shell`.

## Usage

```tsx
export const Default: Story = {
  render: (args) => (
    <Frame>
      <ShellDemo className={args.className} />
    </Frame>
  ),
};
```

_Source of the Storybook story._

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` * | `ReactNode` |  |  |
| `className` | `string` |  |  |

`*` marks a required prop.

## Storybook stories

- [Default](/storybook/?path=/story/shell-appshell--default)
- [Compact](/storybook/?path=/story/shell-appshell--compact)

## Source

`packages/ui/src/shell/app-shell/app-shell.tsx`