Responsive Switcher

Container-query-based layout that flips between horizontal and vertical at a threshold width. No media queries needed.

Components

Responsive Switcher

layout

static

<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. This approach is superior to media queries for component-level responsiveness because the same ResponsiveSwitcher works correctly whether it lives in a full-width page section, a narrow sidebar, or a resizable split pane. The breakpoint is intrinsic to the component's container, not the viewport, making it truly reusable across different layout contexts. 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

threshold string ='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.

Responsive Switcher

Overview

Guidelines

When to use

When not to use

Features

Preview

Usage

API

See Also

Docs

Project

Arclight