Container-first
responsive design
Components respond to their container, not the viewport.
True component-level responsiveness.
How Scope Works
The scope prop creates a container query boundary. Children respond to that container's width, not the browser viewport.Without scope
Responsive styles respond to viewport width. Resize your browser window to see changes.
With scope
Responsive styles respond to container width. The container with scope is measured.
Breakpoint Presets
Each preset defines when "narrow" becomes "wide". Choose based on your container size.Preset
Wide at
Typical use
tight
384px
Small widgets, badges
snug
448px
Cards, compact forms
compact
512px
Sidebars, panels
comfortable
768px
Content areas (default)
spacious
1024px
Main content, dialogs
expanded
1280px
Page layouts
ultrawide
1536px
Full-width pages
Try It: Resize the Container
Drag the slider. The content responds to the container width (not viewport). Cross 768px to see the state change.Container:600px
NARROWContainer is < 768px
A
B
C
scope="comfortable" sets the threshold at 768px. Below = narrow (red, stacked). At/above = wide (green, horizontal).
Same Viewport, Different Containers
Two containers in the same viewport can have different breakpoint states. Each measures itself independently.300px containerscope="comfortable" (768px threshold)
300 < 768 = NARROW
500px containerscope="compact" (512px threshold)
500 < 512 = NARROW
Key Concepts
1. Scope = BoundaryAdding scope to a container makes it the measurement point. Children measure that container, not the viewport.
2. Preset = ThresholdThe preset ("compact", "spacious", etc.) sets the pixel threshold where narrow becomes wide.
3. Absolute PixelsThresholds are absolute pixel values. A 400px container with "spacious" scope (1024px threshold) is always narrow, regardless of viewport size.
4. Independent ScopesMultiple containers can have different scopes. A sidebar and main content area can each respond to their own width independently.