App shell API

Import

import { UNSTABLE_AppShell, UNSTABLE_AppShellBody } from '@cimpress-ui/react';

Side nav integration

App shell handles wiring up the side nav to the app header and managing the open/close state for you. The app header will display a button for toggling the side nav on smaller screens, and the open/close state is managed for you automatically.

API reference

UNSTABLE_AppShell

UNSTABLE_AppShellProps

children * Section titled “ children * ” ReactNode
id Section titled “ id ” string: The element's unique identifier. See MDN.
data-cim-style-root Section titled “ data-cim-style-root ” boolean: Use this attribute to "claim" the component tree for exclusive Cimpress UI usage.
UNSAFE_className Section titled “ UNSAFE_className ” string: Sets the CSS className for the element. Only use as a last resort. Use style props instead.

See styling guide.
UNSAFE_style Section titled “ UNSAFE_style ” CSSProperties: Sets the CSS style for the element. Only use as a last resort. Use style props instead.

See styling guide.

UNSTABLE_AppShellBody

UNSTABLE_AppShellBodyProps

children * Section titled “ children * ” ReactNode
id Section titled “ id ” string: The element's unique identifier. See MDN.
data-cim-style-root Section titled “ data-cim-style-root ” boolean: Use this attribute to "claim" the component tree for exclusive Cimpress UI usage.
UNSAFE_className Section titled “ UNSAFE_className ” string: Sets the CSS className for the element. Only use as a last resort. Use style props instead.

See styling guide.
UNSAFE_style Section titled “ UNSAFE_style ” CSSProperties: Sets the CSS style for the element. Only use as a last resort. Use style props instead.

See styling guide.