Back to components
ComponentBoardFree
Mood Board Canvas React component
An editable visual reference board with image, palette and typography tiles, drag reordering, keyboard-friendly move controls and reference editing.
About the Mood Board Canvas component
An editable visual reference board with image, palette and typography tiles, drag reordering, keyboard-friendly move controls and reference editing.
When to use it
Explore a visual direction with photos, typography and color references.
Collect inspiration for a brand or product.
Installation
Add the Mood Board Canvas component to your project with the shadcn CLI. It lands in components/mood-board-canvas.tsx as plain React + Tailwind CSS source you own and can edit.
Install
Copied!
npx shadcn@latest add @reactframe/mood-board-canvasOr copy the source by hand and install its dependencies:
Install
Copied!
npm install lucide-react clsx tailwind-mergeProps
<MoodBoardCanvas /> accepts 5 props, all optional.
| Prop | Type | Default |
|---|---|---|
| title | string | "A direction worth exploring." |
| theme | "dark" | "light" | "dark" |
| initialTiles | { id: string; type: "image" | "palette" | "text"; title: string; content: string; colors?: string[] }[] | initial |
| onTilesChange | (tiles: MoodTile[]) => void | — |
| className | string | — |
- titlestringDefault: "A direction worth exploring."
- theme"dark" | "light"Default: "dark"
- initialTiles{ id: string; type: "image" | "palette" | "text"; title: string; content: string; colors?: string[] }[]Default: initial
- onTilesChange(tiles: MoodTile[]) => void
- classNamestring
npm dependencies
Installed for you by the shadcn CLI.
Mood Board Canvas FAQ
- Can I add my own images and colors?
- Add an image by URL, a text reference, or comma-separated six-digit hex colors. References can be reordered with drag and drop or the arrow buttons. Use onTilesChange to save your board.
