Mini Calendar

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.

Mini Calendar preview

Installation

npx shadcn@latest add https://www.shadcn.io/r/mini-calendar.json

npx shadcn@latest add https://www.shadcn.io/r/mini-calendar.json

pnpm dlx shadcn@latest add https://www.shadcn.io/r/mini-calendar.json

bunx shadcn@latest add https://www.shadcn.io/r/mini-calendar.json

Related Components

FAQ