Reference trayPro
Style, character and composition references with a weight each: drop files or page images, reorder by drag or keyboard, and see before the drop whether the tray will take it.
On this page
ProStyle, character and composition references with a weight each, reorderable and droppable.
Installation
Usage
import { ReferenceTray } from "@/components/ui/chatcn/pro/reference-tray"
<ReferenceTray value={references} onValueChange={setReferences} max={6} />A reference is { id, src, name, kind, weight } with kind one of style, character or composition and weight from 0 to 100. Dropped files become object URLs by default; pass createReference to upload first. Images dragged from the page (including moodboard tiles) arrive as URLs.
Examples
States
ProEmpty, full at its limit with a broken image and disabled.
Props
| Prop | Type | Notes |
|---|---|---|
value, defaultValue, onValueChange | StudioReference[] | |
max | number | Default 6 |
defaultKind | "style" | "character" | "composition" | For new references. Default style |
accept, maxFileSize | Default image/*, 20 MB | |
createReference | (file | url, kind) => StudioReference | |
onReject | (reason: "type" | "size" | "full", count) => void | |
disabled, label |
Keyboard
| Key | Action |
|---|---|
Tab | Focus a card, then its kind menu and weight slider |
Alt + ← → | Move the focused card one place (mirrored in RTL) |
Alt + Home, End | Move it to the start or end |
Delete, Backspace | Remove the focused card |
← → on a slider | Weight in steps of 5 |
Accessibility
- Each card names its image, kind and weight and how to move or remove it. Moves and removals are announced.
- Drop states say what will happen before the drop: add, only images, or tray full. Red and amber always come with the words.
Motion
- Cards glide to their new place in 220 ms (transform only, interruptible); keyboard moves snap. New cards fade in from scale 0.96. Reduced motion keeps only fades.