Responsive Switcher

Components

Responsive Switcher

layout

static

<arc-responsive-switcher>

Overview

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 Responsive Switcher 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 Responsive Switcher 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: `
    <ResponsiveSwitcher threshold="600px" gap="md">
      <Card>First panel</Card>
      <Card>Second panel</Card>
      <Card>Third panel</Card>
    </ResponsiveSwitcher>
  `,
})
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>
  );
}

<!-- See HTML tab after running pnpm generate -->
<div class="arc-responsive-switcher">...</div>

<!-- See HTML (Inline) tab after running pnpm generate -->
<div class="arc-responsive-switcher" style="container-type:inline-size">...</div>

API

Prop	Type	Default	Description
`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`	`'sm' \| 'md' \| 'lg'`	`'md'`	Spacing between children in both horizontal and vertical modes, mapped to design system spacing tokens.

Overview

Guidelines

When to use

When not to use

Features

Preview

Usage

API

See Also

ARC UI

Arclight