Responsive Switcher
Container-query-based layout that flips between horizontal and vertical at a threshold width. No media queries needed.
<arc-responsive-switcher>Overview
ResponsiveSwitcher is a layout primitive that uses CSS container queries to automatically switch its children between a horizontal (row) and vertical (column) arrangement based on the component's own width, not the viewport width. When the container is wider than the threshold, children are laid out side by side; when it narrows below the threshold, they stack vertically.
Container queries beat media queries for component-level responsiveness because the same ResponsiveSwitcher works whether it lives in a full-width page section, a narrow sidebar, or a resizable split pane. The breakpoint depends on the component's container, not the viewport, so it can be reused across layouts.
Common use cases include form layouts that go from two-column to single-column in narrow containers, card groups that stack when a sidebar is expanded, and hero sections with side-by-side text and image that stack on smaller screens. The threshold prop accepts any CSS length value (px, rem, ch), and the gap prop uses design system spacing tokens for consistent rhythm.
Guidelines
When to use
- Use for form layouts that should go from multi-column to single-column in narrow containers
- Use for hero sections with side-by-side text and image that stack on small screens
- Set threshold to the minimum width at which horizontal layout is comfortable (e.g. "600px")
- Combine with Container to get both width constraints and responsive switching
- Use inside resizable panels or split panes where viewport media queries are unreliable
When not to use
- Do not use ResponsiveSwitcher for complex multi-breakpoint layouts; use CSS Grid directly
- Do not set threshold too low: the horizontal layout becomes cramped
- Do not nest Responsive Switchers deeply: one level of switching is usually sufficient
- Do not confuse ResponsiveSwitcher with Stack: Stack is always vertical, Switcher is conditional
- Do not use for navigation menus; use a dedicated responsive navigation component instead
Features
- CSS container queries for intrinsic responsive behavior: no media queries
- Flips between horizontal (row) and vertical (column) layout at a configurable threshold
- Threshold prop accepts any CSS length value (px, rem, ch)
- Design-token-based gap spacing (sm, md, lg) for consistent rhythm
- Works correctly regardless of where the component is placed (sidebar, main, split pane)
- Pure CSS: no JavaScript resize observers or breakpoint calculations
- CSS part: `switcher` for targeted ::part() styling
Preview
Wide container (horizontal):
Child A
Child B
Child C
Narrow container (vertical):
Child A
Child B
Child C
Usage
<arc-responsive-switcher threshold="600px" gap="md">
<arc-card>First panel</arc-card>
<arc-card>Second panel</arc-card>
<arc-card>Third panel</arc-card>
</arc-responsive-switcher>import { ResponsiveSwitcher, Card } from '@arclux/arc-ui-react';
function AdaptiveLayout() {
return (
<ResponsiveSwitcher threshold="600px" gap="md">
<Card>First panel</Card>
<Card>Second panel</Card>
<Card>Third panel</Card>
</ResponsiveSwitcher>
);
}<script setup>
import { ResponsiveSwitcher, Card } from '@arclux/arc-ui-vue';
</script>
<template>
<ResponsiveSwitcher threshold="600px" gap="md">
<Card>First panel</Card>
<Card>Second panel</Card>
<Card>Third panel</Card>
</ResponsiveSwitcher>
</template><script>
import { ResponsiveSwitcher, Card } from '@arclux/arc-ui-svelte';
</script>
<ResponsiveSwitcher threshold="600px" gap="md">
<Card>First panel</Card>
<Card>Second panel</Card>
<Card>Third panel</Card>
</ResponsiveSwitcher>import { Component } from '@angular/core';
import { ResponsiveSwitcher, Card } from '@arclux/arc-ui-angular';
@Component({
imports: [ResponsiveSwitcher, Card],
template: `
<arc-responsive-switcher threshold="600px" gap="md">
<arc-card>First panel</arc-card>
<arc-card>Second panel</arc-card>
<arc-card>Third panel</arc-card>
</arc-responsive-switcher>
`,
})
export class AdaptiveLayoutComponent {}import { ResponsiveSwitcher, Card } from '@arclux/arc-ui-solid';
function AdaptiveLayout() {
return (
<ResponsiveSwitcher threshold="600px" gap="md">
<Card>First panel</Card>
<Card>Second panel</Card>
<Card>Third panel</Card>
</ResponsiveSwitcher>
);
}import { ResponsiveSwitcher, Card } from '@arclux/arc-ui-preact';
function AdaptiveLayout() {
return (
<ResponsiveSwitcher threshold="600px" gap="md">
<Card>First panel</Card>
<Card>Second panel</Card>
<Card>Third panel</Card>
</ResponsiveSwitcher>
);
}<!-- Auto-generated by @arclux/prism — do not edit manually -->
<!-- arc-responsive-switcher — requires responsive-switcher.css + base.css (or arc-ui.css) -->
<div class="arc-responsive-switcher">
<div class="switcher">
ResponsiveSwitcher
</div>
</div><!-- Auto-generated by @arclux/prism — do not edit manually -->
<!-- arc-responsive-switcher — self-contained, no external CSS needed -->
<div class="arc-responsive-switcher" style="display: block; container-type: inline-size">
<div style="display: flex; flex-direction: row; gap: 16px">
ResponsiveSwitcher
</div>
</div>API
thresholdstring'600px'- The container width at which the layout switches between horizontal and vertical. Accepts any CSS length value. When the container is wider than this value, children are in a row; below it, they stack.
gap'xs' | 'sm' | 'md' | 'lg' | 'xl''md'- Spacing between children in both horizontal and vertical modes, mapped to design system spacing tokens.