Layout
Breakpoints, grid patterns, and responsive conventions. Fluid tokens are covered in Spacing.
Breakpoints
Standard Tailwind v4 breakpoints — no custom values. Mobile-first: styles apply from the breakpoint upward.
Breakpoints
Tailwind v4 defaults. Resize the window to see the active breakpoint.
base
Mobile
sm
Large phone
md
Tablet
lg
Laptop
xl
Desktop
2xl
Large desktop
Grid patterns
Two layout modes. Web blocks use a centered container with responsive column counts. App blocks use a sidebar + content split with the sidebar collapsing to a Sheet on mobile.
Web blocks
Centered container, responsive columns: 1 → 2 → 3
App blocks
Sidebar + content area, sidebar hidden on mobile
Responsive component sizing
Components with size props (Button, etc.) don't support responsive values. Use the dual render pattern: render both sizes, toggle visibility with breakpoint utilities.
Responsive button sizing
Dual render pattern — two elements, one hidden per breakpoint. No fragile className overrides.
Three tiers based on context:
sm
tight spaces
md
mobile default
lg
desktop hero/CTA
Pattern:
<Button size="md" className="sm:hidden"> Get started <ArrowRight /> </Button> <Button size="lg" className="hidden sm:inline-flex"> Get started <ArrowRight /> </Button>
Aspect ratios
Placeholder is a ratio-locked primitive for media slots — hero visuals, blog thumbnails, team avatars, feature illustrations. Six presets, all pinned to the same baseline so the proportions are easy to compare. variant="dashed" reads as an empty / drop-zone state.
Placeholder ratios
Same height, width derived from the aspect ratio.