Patterns
Empty Screen
A full-screen zero state — App Shell with a centered Empty in the main area.
A full-screen empty state keeps the App Shell chrome (nav
- header) and centers an
Emptyin the main content area — for first-run / no-data screens. The sidebar configuration is independent (see the App Shell stories).
Assembly
<AppShell>
<AppShellSidebar><SidebarPrimary … /></AppShellSidebar>
<AppShellBody>
<AppShellHeader><SearchGlobal … /></AppShellHeader>
<AppShellMain className="grid place-items-center p-6">
<Empty>
<EmptyHeader>
<EmptyIcon><InboxIcon /></EmptyIcon>
<EmptyTitle>No workloads yet</EmptyTitle>
<EmptyDescription>Add a workload to start protecting your data.</EmptyDescription>
</EmptyHeader>
<EmptyActions><Button>Add workload</Button></EmptyActions>
</Empty>
</AppShellMain>
</AppShellBody>
</AppShell>Anti-patterns
- Replacing the whole shell with a bare centered message — keeps neither the nav/header nor the user's place in the app.
- Using
Emptywithout centering it in the main area.