Skip to content

NewMCP server for your coding agent. Set it up ›

Nexus UI
Get Pro

Magic Calendar, animated React component

A month calendar that knows the world's festivals, about fifty of them, and celebrates each one when you open it. Christmas snows into a drift along the bottom, New Year's Eve fires fireworks, Lunar New Year hangs red lanterns, Eid brings a crescent moon and swinging lanterns, Hanukkah and Kwanzaa light their candles one by one, Diwali strings lights, Holi bursts colour, Easter drops painted eggs, Songkran splashes water, Makar Sankranti flies kites, a birthday sends up balloons and April Fools' Day turns the calendar upside down. Every effect is drawn on one canvas over the card with its own small sound. Marked days carry a dot and an icon, and the panel below names the day or counts down to the next one. The days are a real grid you can move through with the arrow keys.

  • Pro
  • Inputs & Controls
  • Spring

Soft bell notes as the snow falls, a whoosh, boom and crackle for each firework, a pop and a rising chime for confetti, wing flaps for the bats, and a short phrase of its own for every other celebration. Sound is off on this site until you switch it on.

Play with it

Move the controls and watch it change. Copy code gives you a snippet with only the props you changed.

November 2026

13
Friday, November 2026
Maya's birthday in 8 days

Props

PropTypeDefaultWhat it does
birthday{ month: number; day: number; name?: string } | null{ month: 11, day: 21, name: "Maya" }Someone's birthday, celebrated with balloons. Month is 1 to 12; null for none.
momentsCalendarMoment[][]More days to celebrate, added to the built-in festivals: { month, day, year?, title, effect, color? }.
weekStart0 | 100 starts weeks on Sunday, 1 on Monday.
enableSoundbooleantrueA small sound for each celebration. They also follow the site-wide sound switch.
volumenumber0.8Sound level, 0 to 1.
autoplaybooleanfalseTours the year's festivals by itself until the visitor touches it. Never runs under reduced motion.
classNamestring—Extra classes for the card.

Add it to your project

  1. 1

    Set up your project once

    You need a Next.js project with Tailwind CSS and the @/ import alias. In its root folder, run this once. It creates components.json and the cn() helper in src/lib/utils.ts:

    npx shadcn@latest init -d

    Starting from nothing? The Quick Start walks through the whole thing.

  2. 2

    Connect the registry with your API key

    Magic Calendar is a Pro item, so the CLI has to send your API key. Do this once per project:

    1. Create a key at nexus-ui.com/dashboard/api-key. Copy it straight away: it starts with nxs_ and is shown only once.
    2. In your project root, next to package.json, create a file named .env.local with this line, using your own key:
      NEXUS_API_KEY=nxs_your_key_here
    3. Open components.json and add this entry inside the outermost braces, next to "aliases". Leave {name} and ${NEXUS_API_KEY} exactly as written; the CLI fills them in:
      "registries": {
  "@nexus-labs": {
    "url": "https://www.nexus-ui.com/api/registry/{name}",
    "headers": {
      "Authorization": "Bearer ${NEXUS_API_KEY}"
    }
  }
}

How Magic Calendar works

A month calendar where the special days celebrate when you open them. Christmas Day turns the card into a winter night and it snows, the flakes drifting and settling in a soft drift up balloons. Every effect is drawn on one canvas over the card, with its own little synthesised sound. Marked days selection springs between dates, arrow keys move through days. Reduced motion keeps the scenes but freezes them.

The source, the install command and the build prompt come with Pro.

Magic Calendar questions

Does it make sound, and how do I turn it off?

Soft bell notes as the snow falls, a whoosh, boom and crackle for each firework, a pop and a rising chime for confetti, wing flaps for the bats, and a short phrase of its own for every other celebration. Sounds are synthesised with the Web Audio API, so there are no audio files, and they only play after a click or key press. Pass `enableSound={false}` to silence this component, or call `setSoundsEnabled(false)` from `@/lib/ui-sounds` to switch every sound off at once. The CLI installs `@/lib/ui-sounds` with the component.

More inputs & controls