Data Shell
Page ShellsData shell with collapsible gel-glass sidebar, solid main canvas, and full-viewport coverage with background gaps
Desktop · 12/12 cols · 1024px
Description
Data/admin layout with a collapsible sidebar (gel-glass + specular shine) that toggles between icon-only and icon+text modes. Solid main canvas panel with header breadcrumb and theme toggle. Full-viewport coverage with gaps on all sides so the page background peeks through. Includes sectioned navigation, Quick Create button, and user profile footer.
Component Info
- ID
- data-shell
- Slug
- /components/data-shell
- Category
- Page Shells
- Status
- Stable
Import
import { DataShellLayout } from "@/patterns/layouts";Usage
<DataShellLayout />
Use When
- data-heavy application
- admin panel with sidebar
- CRM or ERP interface
- document management UI
Avoid When
- simple content app (use App Shell)
- marketing/landing page
Keywords
datashellsidebaradminlayoutpagecollapsible