App shell usage guidelines

Caution

This component is currently in an unstable state and may undergo significant changes in future releases.

The app shell is a layout component that provides the foundational structure for applications. It creates a consistent layout that accommodates header, navigation, and main content areas.

When to use

• As the root layout component for applications to provide consistent structure.
• When you need a responsive layout that adapts to different screen sizes.
• To create applications with persistent navigation and header elements.

Usage

Preview

My app

Hello, world!

Code

import {
  AppHeader,
  UNSTABLE_AppShell as AppShell,
  UNSTABLE_AppShellBody as AppShellBody,
  Text,
} from '@cimpress-ui/react';

export default function Demo() {
  return (
    <AppShell>
      <AppHeader title="My app" titleLink={{ href: '#', target: '_self' }} />
      <AppShellBody>
        <Text as="p" margin={16}>
          Hello, world!
        </Text>
      </AppShellBody>
    </AppShell>
  );
}

Copy code Open in playground

The basic app shell provides a simple layout structure with a header and main content area.

With side navigation

Preview

My app

Menu item 1Menu item 2Menu item 3

Hello, world!

Code

import {
  AppHeader,
  UNSTABLE_AppShell as AppShell,
  UNSTABLE_AppShellBody as AppShellBody,
  UNSTABLE_AppHeaderNavButton as AppHeaderNavButton,
  UNSTABLE_Hidden as Hidden,
  UNSTABLE_SideNav as SideNav,
  UNSTABLE_SideNavList as SideNavList,
  UNSTABLE_SideNavListItem as SideNavListItem,
  Text,
} from '@cimpress-ui/react';
import { IconPlaceholder } from '@cimpress-ui/react/icons';
import { useState } from 'react';

export default function Demo() {
  const [isOpen, setIsOpen] = useState(true);

  return (
    <AppShell>
      <AppHeader
        title="My app"
        titleLink={{ href: '#', target: '_self' }}
        UNSTABLE_navButton={
          <Hidden hide={{ md: true }}>
            <AppHeaderNavButton isOpen={isOpen} onPress={() => setIsOpen((x) => !x)} />
          </Hidden>
        }
      />
      <SideNav isOpen={isOpen} onOpenChange={setIsOpen}>
        <SideNavList>
          <SideNavListItem href="#1" isActive={true} icon={<IconPlaceholder />}>
            Menu item 1
          </SideNavListItem>
          <SideNavListItem href="#2" isActive={false} icon={<IconPlaceholder />}>
            Menu item 2
          </SideNavListItem>
          <SideNavListItem href="#3" isActive={false} icon={<IconPlaceholder />}>
            Menu item 3
          </SideNavListItem>
        </SideNavList>
      </SideNav>
      <AppShellBody>
        <Text as="p" margin={16}>
          Hello, world!
        </Text>
      </AppShellBody>
    </AppShell>
  );
}

Copy code Open in playground

The app shell can be enhanced with a side nav to provide persistent navigation throughout the application. The side nav automatically handles responsive behavior, collapsing to a drawer overlay on smaller screens.