Inspect

November 2026

December 2026

Upgrade to Kobra Pro

Get full access to the library, or take just the component you came for.

Calendar

A date selection calendar.

Single, multiple and range selection on React Day Picker, with a range preview on hover, a compact layout, and month, quarter and year views.

Install

npx shadcn@latest add @kobra/calendar

Periods

Layout

Mode

Caption

Disabled

Months

Language

Calendar

PropTypeDefault

children

ReactNode

Component content

className

string

Optional CSS classes

value

unknown

Controlled value

defaultValue

unknown

Initial value

onValueChange

function

Change callback

disabled

boolean

false

mode

string

range

layout

string

default

captionLayout

string

label

numberOfMonths

number

periods

boolean

true

dateLib

DateLib

Gregorian

locale

Locale

enUS

numerals

string

latn

Composition

Built on React Day Picker.
Ships 2 named parts you arrange yourself.
Passes anything it does not read straight through.
Carries data-slot attributes to style against.

Sun	Mon	Tue	Wed	Thu	Fri	Sat

Sun	Mon	Tue	Wed	Thu	Fri	Sat

Sun	Mon	Tue	Wed	Thu	Fri	Sat