LayoutBlank
Minimal page wrapper with full creative control
View Demo
LayoutCard
Centered card layout for login, signup, and focused pages
View Demo
LayoutDitto
Internal layout for Ditto design system demo pages
View Demo
LayoutFocus
Focused layout with TopBar for settings, forms, and focused activities
View Demo
LayoutShell
Primary app layout with sidebar navigation and PageHeader
View Demo
LayoutWizard
Multi-step process layout with progress tracking
View Demo
Usage
Import layout components from @/ui/layouts and use them at the page level. Never nest layouts within each other.
import { LayoutShell, LayoutCard, ... } from '@/ui/layouts';