Use case switcherPro

Tabs that swap a live demo per use case (support, coding, research, voice), with autoplay and a progress hairline per tab that holds whenever the visitor is busy.

Markdown

On this page

ProSupport, coding, research and voice tabs, each with a live demo. Autoplay with a hairline per tab that holds on hover and focus.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/use-case-switcher

Usage

tsx

import { UseCaseSwitcher } from "@/components/ui/chatcn/pro/use-case-switcher"

<UseCaseSwitcher
  title="One agent, four jobs."
  items={[
    { id: "support", label: "Support", description: "Looks up the order first.", demo: <SupportDemo /> },
    { id: "coding", label: "Coding", demo: <CodingDemo /> },
  ]}
/>

Each item's demo mounts when its tab opens and unmounts when it closes, so a scripted demo starts from the top every time. Autoplay moves on after interval with a hairline filling under the active tab; the hairline is the clock, so the two never drift. It holds while the pointer is over the section, while anything inside has focus, offscreen and in a background tab, and is off under reduced motion.

From 896 px of section width the tabs stand in a column beside the demo, with their descriptions; below, they are a scrolling row over it, with the description under the demo. Built on Base UI Tabs.

Examples

Controlled and narrow

Controlled with autoplay off, and a narrow column where the tabs become a scrolling row.

ProControlled with autoplay off, and a narrow column where the tabs become a scrolling row.

Props

Prop	Type	Notes
`title`	`ReactNode`	Optional section headline, an `h2`
`description`	`ReactNode`	The paragraph beside the headline
`items`	`{ id, label, description?, icon?, demo }[]`	Required
`value`, `defaultValue`, `onValueChange`	`string`	Controlled or uncontrolled
`autoplay`	`boolean`	Default true, off under reduced motion
`interval`	`number`	Ms on each use case. Default 8000
`label`	`string`	Accessible name of the tab list. Default "Use cases"
`height`	`number \| string`	Demo area height. Default 440

Keyboard

Key	Action
`ArrowLeft` / `ArrowRight`	Previous and next tab in the row (mirrored in right to left)
`ArrowUp` / `ArrowDown`	Previous and next tab in the column
`Home` / `End`	First and last tab
`Tab`	Moves into the demo

Accessibility

A real tab list with tab panels; the orientation follows the layout, so the arrow keys match what the visitor sees.
Focus anywhere inside stops autoplay, so a keyboard or screen reader visitor is never moved on mid sentence.
The hairlines are decoration.

Motion

The hairline fills linearly over interval by transform and freezes exactly where it is when autoplay holds.
A pointer or autoplay change fades the demo in over 200 ms; an arrow key swaps it at once.
Under reduced motion autoplay is off and the active tab shows a full line.