Pickers & navigationBranchPicker
Branch Picker
Tab switcher for alternate response branches.
BranchPicker ships with a full API table, a copyable example, and accessibility notes.
tsx
Installation
Install the package once, then import BranchPicker from its direct entry point or from the root.
bash
pnpm add @agent-ui/reacttsx
import { BranchPicker } from "@agent-ui/react/branch-picker";Tailwind CSS v4 users: add @source "../node_modules/@agent-ui/react/src" to the global stylesheet so the library utilities are generated.
Usage
The example below is the same code that renders the preview. Copy it, swap in your own handlers, and ship.
tsx
import { BranchPicker } from "@agent-ui/react"; <BranchPicker branches={branches} activeId={id} onSelect={(b) => setBranch(b.id)} />API reference
Every prop BranchPicker accepts, its type, default, and behaviour.
| Name | Type | Default | Description |
|---|---|---|---|
| branches | Branch[] | — | Branch tabs with id and label. |
| activeId | string | — | Selected branch. |
| onSelect | (branch: Branch) => void | — | Selection callback. |
| className | string | — | Inherits every native div attribute, including id, aria-*, data-*, onClick, and style. |
Accessibility
Tab semantics with arrow-key movement and aria-selected on the active branch.
Use it with the rest of the library
BranchPicker composes with MessageList, ChatShell, useChat, and the provider compose blocks. Browse the full reference or see all components in the gallery.
3 lines · copy-ready