Parallel tabsPro
Every tab an agent works in at once, each with its own status and progress.
On this page
ProFour stores checked at once. Open a tile to watch it large.
Installation
Usage
import { ParallelTabs } from "@/components/ui/chatcn/pro/parallel-tabs"
<ParallelTabs tabs={tabs} onTakeOver={takeOver} />Tiles never reorder: a tab stays where you last saw it, and the ones that need you are drawn in amber with a hand. Screens are sized in cqw units so live pages scale into tiles. Open a tile and it grows into the large view; the other tabs become chips above it.
Examples
States
ProSix tabs with queued and paused, one expanded, and opening.
Props
| Prop | Type | Notes |
|---|---|---|
tabs | ParallelTab[] | { id, title, url, status, progress?, activity?, result?, error?, screen? } |
status | "queued" | "running" | "waiting" | "paused" | "done" | "failed" | Per tab |
focused, defaultFocused, onFocusedChange | string | null | The expanded tab |
onTakeOver, onRetry | (id) => void | On waiting and failed tabs |
columns | 2 | 3 | 4 | Default 2, or 3 for five or more |
loading | boolean | Skeleton tiles |
Keyboard
| Key | Action |
|---|---|
| Arrow keys | Move between tiles |
Enter, Space | Open the tile |
Escape | Back to the grid, focus returns to the tile |
Accessibility
- Each tile is one button named by its title and status.
- Status never relies on color: every state has its own glyph and word.
Motion
- Opening grows the panel from the tile's rect with a transform, 280 ms. Keyboard opens swap instantly; reduced motion fades.
- Progress bars move by scaleX, 300 ms.