PreviewFeatures
Full month view with intuitive date selection
Built with React Day Picker for robust functionality
Support for single date, date range, and multiple date selection
Navigation between months and years
Disabled dates and date ranges for booking systems
Customizable first day of week and date formats
Shadcn/ui Calendar - Figma Component
A date field component that allows users to enter and edit date. This Figma component is part of our comprehensive design system that brings the popular shadcn/ui library into your design workflow.
Every Calendar variant includes all the necessary states, properties, and styling options you need to create consistent, production-ready designs. The component seamlessly integrates with your existing Figma files and maintains full compatibility with the shadcn/ui React implementation.
Your questions, answered
Browse all 58 components
Accordion
Alert Dialog
Alert
Aspect Ratio
Avatar
Badge
Breadcrumb
Button Group
Button
Calendar
Card
Carousel
Chart
Checkbox
Collapsible
Combobox
Command
Context Menu
Data Table
Date Picker
Dialog
Drawer
Dropdown Menu
Empty
Field
Form
Hover Card
Input Group
Input OTP
Input
Item
Kbd
Label
Menubar
Native Select
Navigation Menu
Pagination
Popover
Progress
Radio Group
Resizable
Scroll Area
Select
Separator
Sheet
Sidebar
Skeleton
Slider
Sonner
Spinner
Switch
Table
Tabs
Textarea
Toast
Toggle Group
Toggle
Tooltip
Designing calendars in Figma
The shadcn/ui figma Calendar component includes single date, date range, and multiple date selection modes. Design booking systems and date pickers in Figma with clear visual states for selected dates. This shadcn figma component matches the React implementation perfectly.
Disabled dates and availability
Design calendars in Figma with disabled dates for past dates, weekends, or booked slots. The shadcn/ui figma Calendar includes disabled states so you can prototype booking flows and scheduling interfaces that show users exactly what dates they can choose.
Date range selection in Figma
This shadcn figma Calendar includes range selection with start date, end date, and in-between states. Design travel booking, event scheduling, and date filters in Figma with proper visual hierarchy showing users their selected range.
Calendar states and variants
The shadcn/ui figma Calendar component includes all states—default, hover, selected, and disabled. Design complete date picker flows in Figma knowing your calendar will look identical when developers build it with shadcn/ui.