Notion · Calendar

React Calendar: Notion-style

Part of Better Design's React component library. The clean, minimal, content-first calendar pattern Notion uses: built on react-day-picker, ships as a shadcn-compatible registry item.

Install

npx shadcn@latest add https://better-design.com/registry/notion/calendar.json

Lands in components/ui/calendar.tsx. Fully editable source, no SDK lock-in.

Live preview

Open the full Notion showcase

Why this calendar

•react-day-picker engine: keyboard navigation, range selection, locale support
•Light minimal surface, system-ui font, 3px radius: Notion visual signature
•Flat #2383e2 blue accent, rgba shadow: matches Notion's chrome
•Drops into any shadcn/ui project unchanged: `npx shadcn@latest add`

Usage

import { Calendar } from "@/components/ui/calendar";
import { useState } from "react";

export function DueDate() {
  const [date, setDate] = useState<Date>();
  return <Calendar mode="single" selected={date} onSelect={setDate} />;
}

FAQ

What's this built on?

react-day-picker for the calendar engine, lucide-react for nav icons. Identical primitive to shadcn/ui: Better Design re-skins it for Notion's minimal aesthetic.

Is it free?

Yes. MIT-licensed shadcn-compatible registry item. `npx shadcn@latest add`: source lands in your components/ui folder.

Best use case?

Internal docs / content admin / project management apps where the chrome should disappear and let content lead.

Related component pages

React Calendar (all variants)

/components/calendar

Airbnb-style Date Picker

/components/airbnb-date-picker

Stripe-style Data Table

/components/stripe-data-table