Reference elementsPro
Character, object and scene references for consistent video, with tags.
On this page
ProCharacters, objects and scenes for a short film; pick what this shot keeps consistent.
Installation
Usage
import { ReferenceElements } from "@/components/ui/chatcn/pro/reference-elements"
<ReferenceElements elements={elements} onElementsChange={setElements} selected={ids} onSelectedChange={setIds} onAdd={addReference} />Each reference has a cover, its other angles, a handle to call it by in prompts (click to copy it) and tags for what must not drift. Pick up to maxSelected for the current shot; they gather in the tray. A character with one image is flagged, since a single angle lets the face wander. References still being learned or failed cannot be picked until they are ready.
Examples
States
ProA full shot, read only, loading, and an empty library.
Props
| Prop | Type | Notes |
|---|---|---|
elements, onElementsChange | ReferenceElement[] | { id, kind, name, handle?, images, tags, status?, error? } |
selected, defaultSelected, onSelectedChange | string[] | Controlled or not |
maxSelected | number | Default 4 |
onAdd | (kind) => void | character, object or scene |
onRetry | (id) => void | Shows Retry on failed references |
loading, disabled | boolean | Placeholders, or no changes |
Accessibility
- Each cover is a toggle button named Use name in this shot; when the shot is full it says why and stays focusable.
- Tags are a list with a remove button each; Enter or a comma adds one, Backspace on an empty field removes the last.
- The shot count is a polite live region.