Layout
Layout primitives — grids, stacks, app shells, and page structure built on CSS logical properties and container queries, so they adapt to their container, not just the viewport.
27 layout components
- AppShell — Sticky-header + full-height side-nav + single-scroll-container layout with an animated, accessible nav toggle.
- AppShell — Full-page application shell with persisted collapsible sidebar. Includes a signal-driven top progress bar with determinate progress, error state, and dismissible error strip.
- AspectRatio — Constrains content to a fixed width-to-height ratio
- AuthLayout — Centered card layout for authentication pages (login, register, forgot password).
- AutoGrid — Media-query-free responsive grid — columns auto-fill based on available space.
- Center — Horizontally centered container with a configurable max-width.
- Columns — Equal-width multi-column layout that collapses to single column on narrow viewports.
- Cta — Call-to-action band — quiet hairline-bordered section with title, description, and centered actions. Replace demo content before shipping.
- DashboardLayout — Dashboard page layout with stats strip, main content area, and optional aside.
- FeatureGrid — Feature section — AutoGrid of items with optional title, description, and icon slots. Icons are optional; the grid works text-only. Replace demo content before shipping.
- Flex — Flex layout primitive for vertical or horizontal stacking with gap control. ⚠ Unlike CSS `flex-direction`, `direction` defaults to `vertical` — pass `direction="horizontal"` for a row.
- Grid — CSS grid layout primitive with responsive column collapsing. Establishes its own containment, so responsive `cols` adapt to the grid’s own slot width with no wrapper or container ancestor required.
- Hero — Page hero section — centered or split layout with eyebrow, title, description, actions and media slots. Replace demo content before shipping.
- Indicator — Positions an overlay element (badge, dot, count) at a corner of its child
- Join — Groups adjacent children into a seamless joined element by removing interior borders and radii
- Masonry — Masonry layout — native CSS masonry where supported, multi-column fallback elsewhere (fallback orders items top-to-bottom per column).
- MediaMasonry — Masonry gallery section — native CSS masonry where supported, multi-column fallback elsewhere (fallback orders tiles top-to-bottom per column). Tiles style themselves; section provides only the layout shell.
- PageFooter — Site footer — AutoGrid of link groups with a brand/meta bottom row. Renders a <footer> element with a <nav aria-label="Footer"> wrapping the link columns.
- PageHeader — Page-level header with title, description, breadcrumb, and actions slots.
- Resizable — Two-pane splitter whose divider can be dragged or keyboard-nudged to reallocate space
- ScrollArea — A scroll container with styled, slim scrollbars and overflow shadows
- Section — Page-section shell with block padding, centered inner width, and stack gap.
- SettingsLayout — Two-column settings page layout with a fixed-width menu and fluid content area.
- Spacer — Fixed-height spacing block using design token steps.
- SplitView — Resizable two-pane split layout with keyboard and pointer drag support.
- Stack — Overlaps children in a CSS grid stack with a configurable offset to create a card-pile effect
- StatsBand — KPI strip — horizontal band of stats with optional delta and inline sparkline trend. Wraps via AutoGrid on narrow containers. No visible heading; provide aria-label for accessibility.