Y2K UI

Calendar

A date picker calendar built on react-day-picker.

calendar-demo.app
June 2026

Installation

terminal.sh
npx y2kui@latest add calendar

Usage

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

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

Props

PropTypeDefaultDescription
mode'single' | 'multiple' | 'range''single'Selection mode.
selectedDate | Date[] | DateRangeCurrently selected date(s).
onSelectfunctionCalled when a date is selected.
showOutsideDaysbooleantrueShow days from adjacent months.

On this page