Calendar

The Calendar component displays a date picker with month navigation, day selection, and visual indicators for the selected date. It shows dates from the current month along with dates from adjacent months. Built from scratch using React and native HTML elements. No UI library dependencies.

npx shadcn@latest add https://things.marvlock.dev/registry/ui/calendar.json

import { Calendar } from "@/components/ui/calendar"

function MyComponent() {
  const [date, setDate] = React.useState<Date | undefined>(new Date())

  return (
    <Calendar
      value={date}
      onValueChange={setDate}
    />
  )
}

Examples