GlassCalendar

A date-picker calendar built on react-day-picker with glassmorphism styling.

Preview

May 2026

Usage

import { GlassCalendar } from "koori-ui";
import { useState } from "react";
 
const [date, setDate] = useState<Date | undefined>(new Date());
 
<GlassCalendar mode="single" selected={date} onSelect={setDate} />

Props

Prop	Type	Default	Description
`mode`	`"single" \| "multiple" \| "range"`	—	Selection mode
`selected`	`Date \| Date[] \| DateRange`	—	Controlled selection
`onSelect`	`(value) => void`	—	Fired when the selection changes
`disabled`	`Matcher \| Matcher[]`	—	Dates to disable
`showOutsideDays`	`boolean`	`true`	Show days from adjacent months
`numberOfMonths`	`number`	`1`	Number of months to render

All react-day-picker DayPicker props are also supported.

Su	Mo	Tu	We	Th	Fr	Sa

GlassCalendar

Preview

Usage

Props

On this page