Components
Empty Screen
A full-screen zero state — the App Shell with a centered Empty in the content body.
A full-screen empty state keeps the App Shell
chrome (nav + header) and centers an Empty in the content
body — for first-run / no-data screens. The sidebar configuration is independent
(see the App Shell stories), and the Chat slot is optional.
Assembly
<AppShellChat>
<AppShellChatSidebar><SidebarPrimary … /></AppShellChatSidebar>
<AppShellChatContent>
<AppShellChatContentHeader />
<AppShellChatContentBody className="grid place-items-center">
<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>
</AppShellChatContentBody>
</AppShellChatContent>
</AppShellChat>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 content body.