Calendar 1 - Month grid with event chips

Full month grid with colored event chips per day, a "+N more" popover for busy days and prev/next/today navigation.

About Calendar 1

Full month grid with colored event chips per day, a "+N more" popover for busy days and prev/next/today navigation.

Calendar 1 is a free calendar block for React, built on shadcn/ui and Tailwind CSS. It ships as 136 lines of TypeScript you own: every piece of copy is a prop with a sensible default, so you can drop it in and replace the content without touching the layout.

  • month
  • events
  • chips
  • popover
  • navigation

Installation

  1. Add the Chocolate UI registry to your components.json (see the installation guide).
  2. Run the shadcn CLI:
npx shadcn@latest add @chocolate/calendar-01

Dependencies installed automatically: lucide-react.

Uses: button, popover, reveal, utils.

Usage

import Calendar01 from "@/components/blocks/calendar-01"

export default function Page() {
  return <Calendar01 />
}

FAQ