Shadcn.io is not affiliated with official shadcn/ui
Mini Calendar
Compact horizontal date picker with navigation arrows for React
Mini Calendar preview
Scroll to load preview
A horizontal row of date buttons with arrows to navigate. Each day shows the month abbreviation and day number. Today is highlighted, and the selected date is filled. Choose how many days to show at once—the arrows move by that amount. Works as controlled (value/onValueChange) or uncontrolled (defaultValue). Good for booking flows, appointments, or quick date selection.
Install with AI
If you've connected the shadcn.io MCP server to Claude Code, Cursor, Windsurf, or any MCP-ready AI editor, prompt your agent to install this component for you — no copy-paste, no CLI:
use shadcnio to install the mini-calendar component into my projectRelated Components
FAQ
Was this page helpful?
Sign in to leave feedback.