Component

Calendar

Date picker and calendar views.

Preview

February 2026

Single-day selection

MonTueWedThuFriSatSun

Examples

Default

Single selected day.

February 2026

Single-day selection

MonTueWedThuFriSatSun

Range

Start and end days with in-range highlighting.

February 2026

Range selection (start → end)

MonTueWedThuFriSatSun

AI Prompt

Ready to copy and paste into any AI model.

7 lines

prompt.txt

Build a shadcn/ui **Calendar** component for the **Clinic Admin** design system.

**Brand tokens:** Primary #70C4CA (teal), secondary #F3F4F6, destructive #F7A9AA, border #C4D0DB, radius 10px (default). Font: Nunito Sans for body, Nunito for headings.

**Design preview:** Replicate exactly the UI shown in the Clinic Admin docs preview for this component (same labels, structure, variants, and layout).

Return a React component with TypeScript. Use shadcn/ui **Calendar** as base, cn() + Tailwind CSS. Support variants and sizes shown in the preview.

Copy once, paste anywhere, keep consistent output.