Iconiq is an open-source library of motion-powered React components built around the shadcn registry workflow.

How do I install an Iconiq component?

Install components with shadcn using commands like npx shadcn@latest add @iconiq/button, or use a direct registry URL from https://iconiqui.com/r/button.json.

Is Iconiq free to use?

Yes. Iconiq is open source and free to use for personal and commercial projects.

What technologies power Iconiq?

Iconiq components are written in TypeScript and React, with motion powered by Motion and registry delivery built around shadcn/ui conventions.

Calendar

Compact calendar card with animated month transitions, inline day selection, and a built-in selected-date summary.

Open in

May

2026

Selected

Monday, May 11, 2026

Installation

npx shadcn@latest add @iconiq/calendar

Props

Calendar

7 props

Animated monthly calendar card that now supports both controlled and uncontrolled month and selection state.

selectedDate

Controlled selected day. When provided, the highlighted day is always derived from this prop.

defaultSelectedDate

Initial selected day for uncontrolled usage when selected is not provided.

onSelect(date: Date) => void

Called when the user picks an interactive day in the current month.

monthDate

Controlled visible month. Prev/next navigation requests flow through onMonthChange.

defaultMonthDate

Initial visible month for uncontrolled usage when month is not provided.

onMonthChange(month: Date) => void

Called whenever the user navigates to a previous or next month.

disabled(date: Date) => boolean

Marks dates as non-interactive. Disabled days keep the same visuals but cannot be selected.

Notes

Controlled mode: pass selected/month and respond to onSelect/onMonthChange.

Uncontrolled mode: omit selected/month and optionally seed with defaultSelected/defaultMonth.

When no defaults are provided, selected date and visible month both start from new Date().