Calendar
A comprehensive calendar component with single/multiple/range selection modes, month navigation, disabled dates support, and full accessibility. Features Vercel-inspired design with customizable variants and keyboard navigation.
Basic Usage
August 2025
Sun
Mon
Tue
Wed
Thu
Fri
Sat
Variants
Default
August 2025
Sun
Mon
Tue
Wed
Thu
Fri
Sat
Modern
August 2025
Sun
Mon
Tue
Wed
Thu
Fri
Sat
Elevated
August 2025
Sun
Mon
Tue
Wed
Thu
Fri
Sat
Multiple Selection
August 2025
Sun
Mon
Tue
Wed
Thu
Fri
Sat
Range Selection
August 2025
Sun
Mon
Tue
Wed
Thu
Fri
Sat
Multiple Months
August 2025
Sun
Mon
Tue
Wed
Thu
Fri
Sat
October 2025
Sun
Mon
Tue
Wed
Thu
Fri
Sat
Disabled Dates
August 2025
Sun
Mon
Tue
Wed
Thu
Fri
Sat
With Week Numbers
August 2025
Wk
Mon
Tue
Wed
Thu
Fri
Sat
Sun
1
2
3
4
5
6
Date Range Restrictions
August 2025
Sun
Mon
Tue
Wed
Thu
Fri
Sat
Sizes
Small
August 2025
Sun
Mon
Tue
Wed
Thu
Fri
Sat
Medium
August 2025
Sun
Mon
Tue
Wed
Thu
Fri
Sat
Large
August 2025
Sun
Mon
Tue
Wed
Thu
Fri
Sat
Calendar Component
tsx
1"use client";2import React, { useState, useEffect } from "react";3import { ChevronLeft, ChevronRight } from "lucide-react";4import { cva, type VariantProps } from "class-variance-authority";5import { cn } from "@/lib/cn";67const calendarVariants = cva([8 "rounded-xl border bg-white dark:bg-neutral-900",9 "text-neutral-900 dark:text-neutral-100",10 "shadow-sm overflow-hidden",11], {12 variants: {13 variant: {14 default: "border-neutral-200 dark:border-neutral-800",15 modern: [16 "border-neutral-200/40 dark:border-neutral-800/40",17 "shadow-[0_2px_8px_0px_rgba(0,0,0,0.04)]",18 "dark:shadow-[0_2px_8px_0px_rgba(0,0,0,0.15)]",19 ],20 elevated: [