MoodboardPro
A saved set of references that travel into prompts together: a masonry you reorder, a name edited in place, a share code, apply to prompt and a chip for the prompt bar.
On this page
ProA masonry board with a name, a share code, drag to reorder and apply to prompt.
Installation
Usage
import { Moodboard, MoodboardChip } from "@/components/ui/chatcn/pro/moodboard"
<Moodboard defaultName="Concrete and fog" defaultItems={items} onApply={addToPrompt} />
<MoodboardChip name={board.name} items={board.items} onRemove={removeBoard} />Give items their natural width and height so the masonry keeps its shape while images load. The share code comes from the item ids (MB-7K2Q-94XD), so the same set always has the same code; pass code to use your own. Tiles also drag out as images, so a board feeds a reference-tray directly.
Examples
Board to tray
ProDrag a tile from the board into the reference tray.
States
ProEmpty with a code field, loading, a shared read only board and the prompt chip.
Props
| Prop | Type | Notes |
|---|---|---|
items, defaultItems, onItemsChange | MoodboardItem[] | id, src, alt, width, height |
name, defaultName, onNameChange | string | Edited in place |
code | string | Defaults to a stable code from the ids |
onApply, applied | Apply to prompt; applied reads In prompt | |
onImportCode | (code) => void | Promise<void> | Throw to show the error |
createItem | (file) => MoodboardItem | Default object URLs |
columnWidth | number | Default 140 |
readOnly, loading, max | Max default 24 |
Keyboard
| Key | Action |
|---|---|
Alt + arrows | Move the focused tile one place |
Delete, Backspace | Remove it; focus moves to the next tile |
Enter in the name | Save; Esc reverts |
Accessibility
- The board is a labelled list; tiles announce their position and how to move them.
- The share code is a copy button named with the code; a bad code says what a good one looks like.
Motion
- Tiles glide in 220 ms while the masonry reflows underneath. Apply swaps its label with a blur crossfade. Reduced motion keeps only fades.