Calendar

A beautiful, animated calendar component for date selection with Framer Motion animations.

Installation

Install via CLI:

npx @sickui/cli add calendar

Manual Installation

If you prefer to install manually, copy and paste the following code into your project.

npm install framer-motion lucide-react class-variance-authority clsx tailwind-merge

Usage

Sun

Mon

Tue

Wed

Thu

Fri

Sat

Styling

The Calendar component has no borders or shadows by default. You can add borders, shadows, and custom styling using the className prop.

Default (No Border)

Sun

Mon

Tue

Wed

Thu

Fri

Sat

With Border

Sun

Mon

Tue

Wed

Thu

Fri

Sat

With Shadow

Sun

Mon

Tue

Wed

Thu

Fri

Sat

Custom Styling

Sun

Mon

Tue

Wed

Thu

Fri

Sat

Disabled State

Use the disabled prop to disable calendar interactions.

Interactive

Sun

Mon

Tue

Wed

Thu

Fri

Sat

Disabled

Sun

Mon

Tue

Wed

Thu

Fri

Sat

Animation Control

Use the showAnimation prop to control Framer Motion animations.

With Animation

Sun

Mon

Tue

Wed

Thu

Fri

Sat

No Animation

Sun

Mon

Tue

Wed

Thu

Fri

Sat

API Reference

Calendar

Prop	Type	Default	Description
`selectedDate`	`Date \| undefined`	`undefined`	The currently selected date
`onDateSelect`	`(date: Date) => void \| undefined`	`undefined`	Callback function called when a date is selected
`disabled`	`boolean`	`false`	Whether the calendar is disabled
`showAnimation`	`boolean`	`true`	Whether to show Framer Motion animations
`className`	`string`	`undefined`	Additional CSS classes to apply

Features

🎨 Beautiful Design

Clean, modern interface with smooth animations
Consistent with your design system using CSS variables
No borders or shadows by default, easily customizable with className
Month/Year picker popup for quick navigation

⚡ Smooth Animations

Built-in Framer Motion animations for delightful interactions
Hover and tap animations on date buttons
Smooth month transitions
Optional animation control with showAnimation prop

♿ Accessible

Proper keyboard navigation support
Screen reader friendly with semantic HTML
Focus management and indicators
Disabled state properly communicated

🔧 Flexible

Controlled component pattern with selectedDate and onDateSelect
Customizable styling with CSS variables
TypeScript support with full type safety
Easy to integrate with forms and date pickers

Accessibility

The Calendar component follows accessibility best practices:

Keyboard Navigation: Navigate between dates using arrow keys
Focus Management: Clear focus indicators and proper focus trapping
Screen Reader Support: Semantic button elements with proper ARIA attributes
Disabled State: Properly communicated to assistive technologies
Date Announcements: Selected dates are properly announced

Examples in the Wild

Here are some real-world examples of how the Calendar component can be used:

Date Pickers in forms and booking systems
Event Scheduling interfaces
Dashboard Date Filters for analytics
Appointment Booking systems
Content Publishing date selectors