Choose from four modern visual directions to kick off a creative moodboard.
Set your access key from API keys as NEXTUI_TOKEN in .env.local and add the @nextui namespace below to components.json once. Then every item installs by name. Each install counts as a copy on a free account.
$pnpm dlx shadcn@latest add @nextui/moodboard-generator
1{2"registries": {3"@nextui": {4"url": "https://nextui.dev/r/{name}.json",5"headers": { "Authorization": "Bearer ${NEXTUI_TOKEN}" }6}7}8}
1"use client";23import { MoodboardGenerator } from "@/components/blocks/moodboard-generator";45export function MoodboardHero() {6return (7<MoodboardGenerator8onValueChange={(direction) => console.log("Selected mood:", direction)}9/>10);11}
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | "Find your visual direction.\nBuild a moodboard" | Headline above the mood directions |
| description | string | "Choose a style to kick off your next creative idea." | Supporting line below the headline |
| directions | MoodboardDirection[] | Minimal, Future, Nature, Color Pop | Cards to show: id, name, description, four-color palette, and artwork style |
| value | string | – | Selected direction id for controlled usage |
| defaultValue | string | – | Initially selected direction id for uncontrolled usage |
| onValueChange | (id: string) => void | – | Called when a direction is selected |
| className | string | – | Additional classes for the section |
Sign in to see the code
Preview it freely. A free account copies code and prompts a few times a day.