Preview

Open in new tab

Workspace shell

Package navigation-heavy shells as reusable app compositions.

Navigation shells combine PageLayout, AppBar, Sidebar, and PageHeader into ready-made workspace frames.

3

navigation zones

3

shell variants

2

sticky regions

View	Owner	Status
Overview	Product ops	Ready
Approvals	Design systems	Live
Settings	Platform team	Draft

Primary use: Navigation-first products and internal tools.
Composes: PageLayout, AppBar, Sidebar, PageHeader, and Card.

Included patterns

• Sticky header

• Sidebar grouping

• Page header framing

Variants

Sidebar workspace

Classic operations shell with persistent side nav.

Top-nav workspace

Wider shell for dashboards and command centers.

Dual-nav shell

Top-level app nav plus secondary section rail.

Source

Copy this source into your app and own it. The theme imports are already included.

svelte

<script lang="ts">
  import '@dryui/ui/themes/default.css';
  import '@dryui/ui/themes/dark.css';
  import { AppBar, Card, DescriptionList, Fieldset, Heading, PageHeader, PageLayout, Sidebar, Stack, Table, Text } from '@dryui/ui';
</script>
<PageLayout.Root fullHeight>
  <PageLayout.Header sticky>
    <AppBar.Root>
      <AppBar.Title>Workspace shell</AppBar.Title>
    </AppBar.Root>
  </PageLayout.Header>
  <PageLayout.Sidebar sticky>
    <Sidebar.Root style="height: 100%;">
      <Sidebar.Content>
        <Sidebar.Group>
          <Sidebar.GroupLabel>Navigation</Sidebar.GroupLabel>
            <Sidebar.Item active href="#">Overview</Sidebar.Item>
            <Sidebar.Item href="#">Releases</Sidebar.Item>
            <Sidebar.Item href="#">Billing</Sidebar.Item>
            <Sidebar.Item href="#">Team settings</Sidebar.Item>
        </Sidebar.Group>
      </Sidebar.Content>
    </Sidebar.Root>
  </PageLayout.Sidebar>
  <PageLayout.Content>
    <Stack gap="lg">
      <PageHeader.Root>
        <PageHeader.Content>
          <PageHeader.Title level={1}>Package navigation-heavy shells as reusable app compositions.</PageHeader.Title>
          <PageHeader.Description>Navigation shells combine PageLayout, AppBar, Sidebar, and PageHeader into ready-made workspace frames.</PageHeader.Description>
        </PageHeader.Content>
      </PageHeader.Root>
    <Grid columns={3} gap="md">
      <Card.Root>
        <Card.Content>
          <Heading level={3}>3</Heading>
          <Text as="p">navigation zones</Text>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Content>
          <Heading level={3}>3</Heading>
          <Text as="p">shell variants</Text>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Content>
          <Heading level={3}>2</Heading>
          <Text as="p">sticky regions</Text>
        </Card.Content>
      </Card.Root>
    </Grid>
        <Table.Root>
          <Table.Header>
            <Table.Row>
              <Table.Head>View</Table.Head>
              <Table.Head>Owner</Table.Head>
              <Table.Head>Status</Table.Head>
            </Table.Row>
          </Table.Header>
          <Table.Body>
            <Table.Row>
              <Table.Cell>Overview</Table.Cell>
              <Table.Cell>Product ops</Table.Cell>
              <Table.Cell>Ready</Table.Cell>
            </Table.Row>
            <Table.Row>
              <Table.Cell>Approvals</Table.Cell>
              <Table.Cell>Design systems</Table.Cell>
              <Table.Cell>Live</Table.Cell>
            </Table.Row>
            <Table.Row>
              <Table.Cell>Settings</Table.Cell>
              <Table.Cell>Platform team</Table.Cell>
              <Table.Cell>Draft</Table.Cell>
            </Table.Row>
          </Table.Body>
        </Table.Root>
    <DescriptionList.Root>
      <DescriptionList.Item>
        <DescriptionList.Term>Primary use</DescriptionList.Term>
        <DescriptionList.Description>Navigation-first products and internal tools.</DescriptionList.Description>
      </DescriptionList.Item>
      <DescriptionList.Item>
        <DescriptionList.Term>Composes</DescriptionList.Term>
        <DescriptionList.Description>PageLayout, AppBar, Sidebar, PageHeader, and Card.</DescriptionList.Description>
      </DescriptionList.Item>
    </DescriptionList.Root>
    <Fieldset.Root>
      <Fieldset.Legend>Included patterns</Fieldset.Legend>
      <Fieldset.Content>
        <Text as="p">• Sticky header</Text>
        <Text as="p">• Sidebar grouping</Text>
        <Text as="p">• Page header framing</Text>
      </Fieldset.Content>
    </Fieldset.Root>
    </Stack>
  </PageLayout.Content>
</PageLayout.Root>

DRYui

Navigation Shells