App Shell
The App Shell defines the main structure of your app.
Props#
The AppShell component and all sub components accept all Box properties.
| Prop | Type | Default | Description |
|---|---|---|---|
| aside | string | number | bigint | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> | Secondary sidebar, positioned on the right | |
| children | string | number | bigint | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> | The main content | |
| colorScheme | "whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram" | "primary" | "secondary" | "indigo" | The visual color appearance of the component | |
| footer | string | number | bigint | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> | The footer | |
| mainRef | RefObject<HTMLDivElement> | ||
| navbar | string | number | bigint | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> | The top header navigation | |
| sidebar | ReactElement<any, string | JSXElementConstructor<any>> | Main sidebar, positioned on the left | |
| size | string | The size of the AppShell | |
| variant | "static" | "fullscreen" | fullscreen | The variant of the AppShell |
Was this helpful?