Utopia Container Queries

Component-level responsiveness using container queries with Utopia.fyi fluid scales

Core Philosophy

Container queries extend Utopia's declarative, fluid design approach from the viewport level to the component level. Instead of components responding only to viewport width, they respond to their container's dimensions, enabling truly modular, context-aware design.

Key Insight: Combine Utopia's fluid scales (viewport-based) with container query units (container-based) for layered responsiveness — global scaling + component adaptation.

When to Use This Skill

• Creating components that adapt to container size, not viewport size
• Implementing fluid typography that scales based on component width
• Building truly reusable components for design systems
• Combining Utopia fluid scales with container-level responsiveness
• Using container query units (cqi, cqw) with clamp() for component typography
• Enabling context-aware layouts (sidebar vs. main content area)
• Progressive enhancement from viewport-based to container-based fluidity