Lab Experiment / 01
React + Tailwind CSSInteractive Mood Calendar
A customizable calendar component with day and mood view toggles, inline mood logging, and smooth state transitions.
Calendarstable
August
Mon
Tue
Wed
Thu
Fri
Sat
Sun
Prerequisites & Install
Install the npm dependencies this component relies on.
shadcn
npx shadcn@latest initframer-motion
npm i motionlucide-react
npm i lucide-reactshadcn/ui Components Needed
Built on top of these shadcn/ui primitives — add them first.
popover
npx shadcn@latest add popover selectFile Structure
src/lab/experiments/mood-calendar/MoodCalendar.tsxMain calendar component + DayCellsrc/components/ui/popover.tsxshadcn popover primitivesrc/components/ui/select.tsxshadcn select primitiveUsage
import MoodCalendar from "@/src/lab/experiments/mood-calendar/MoodCalendar";
<MoodCalendar />Props
| Name | Type | Description |
|---|---|---|
| — | — | Self-contained — manages its own state internally. No external props required. |
