Calendar

A date field component that allows users to enter and edit date.

shadcn/ui docs
SuMoTuWeThFrSa

Installation

pnpm dlx shadcn@latest add https://neobrutalism.dev/r/calendar.json

Usage

import { useState } from 'react'
 
import { Calendar } from '@/components/ui/calendar'
const [date, setDate] = useState<Date | undefined>(new Date())
<Calendar mode="single" selected={date} onSelect={setDate} />

Examples

Default

SuMoTuWeThFrSa

Range

SuMoTuWeThFrSa
SuMoTuWeThFrSa