Branch
betaAlternative versions of a conversation turn — regenerated answers, edited prompts — with a wrapping pager between them.
- AI
- 1 file
- 1 npm package
- Accessibility notes
The first answer.
A regenerated answer.
A third take.
pnpm dlx @dowel-ui/cli add ai-branchnpm packages installed: class-variance-authority.
import { Branch } from "@/components/ui/ai-branch";Default
Gallery
<Branch>
| Prop | Type | Default |
|---|---|---|
defaultValueInitial index when uncontrolled. | number | 0 |
onValueChange | (index: number) => void | — |
valueControlled index of the visible version. | number | — |
Plus every attribute of <div> except defaultValue.
<BranchMessages>
| Prop | Type | Default |
|---|---|---|
children (required) | ReactNode | — |
<BranchSelector>
| Prop | Type | Default |
|---|---|---|
from | "user" | "assistant" | "assistant" |
Plus every attribute of <div>.
<BranchPage>
Plus every attribute of <span>.
The pager is a group named "Versions" with real Previous/Next buttons (their chevrons mirror in right-to-left layouts) and a polite, atomic "2 of 3" indicator, so paging says where it went. Inactive versions are hidden rather than unmounted, keeping their state. The pager disappears when there is only one version. The entrance is decoration and stops under reduced motion.
7/7
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — does not apply
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — does not apply
- className merged — passes
- Visible focus — does not apply
- No fixed widths — passes