Installation

Components

This package exports two calendar components:

Calendar

Single date selection with pill-shaped cells.

RangeCalendar

Date range selection with connected pill styling.

Usage

import { Calendar, RangeCalendar } from "@/components/ui/pill-calendar";
 
// Single date selection
function SingleDatePicker() {
  return <Calendar />;
}
 
// Date range selection
function DateRangePicker() {
  return <RangeCalendar />;
}

Features

• Pill-shaped cells: Modern rounded design for date cells
• Range selection: Seamless date range picking with connected styling
• Today indicator: Visual highlight for the current date
• Keyboard navigation: Full accessibility support
• Responsive design: Works on all screen sizes