Calendar
iconiq-ui/calendarFreeComponent
shadcn-style monthly calendar with animated month/year transitions, selectable days, and date-fns-powered grid generation.
Live preview
live · rendered by the registry
Rendered by Iconiq UI on their own page — this is the component running, not a screenshot of it.Install it
npx shadcn@latest add https://www.iconiqui.com/r/calendar.jsonSource
1"use client";23import {4 addDays,5 addMonths,6 eachDayOfInterval,7 endOfMonth,8 endOfWeek,9 format,10 isAfter,11 isBefore,12 isSameDay,13 isSameMonth,14 isToday,15 isWithinInterval,16 type Locale,17 setMonth,18 setYear,19 startOfDay,20 startOfMonth,21 startOfWeek,22 subMonths,23} from "date-fns";24import { ChevronDown, ChevronLeft, ChevronRight } from "lucide-react";25import { AnimatePresence, motion, useReducedMotion } from "motion/react";26import {27 type CSSProperties,28 forwardRef,29 type KeyboardEvent,30 type ReactNode,31 type RefObject,32 useCallback,33 useEffect,34 useId,35 useMemo,36 useRef,37 useState,38} from "react";3940import { cn } from "@/lib/utils";4142const componentThemeClassName =43// … truncated
What it pulls in
npm packages
Files it writes
More from Iconiq UI
All 119 items| Component | Registry | Kind | Access | Installs | Command |
|---|---|---|---|---|---|
| Accordionaccordion | Iconiq UI | Components | Free | 2 deps | |
| AI Inputai-input | Iconiq UI | Components | Free | 3 deps | |
| Alertalert | Iconiq UI | Components | Free | 2 deps | |
| Avataravatar | Iconiq UI | Components | Free | 3 deps | |
| Accordion (Base UI)b-accordion | Iconiq UI | Components | Free | 2 deps | |
| Alert Dialog (Base UI)b-alert-dialog | Iconiq UI | Components | Free | 3 deps | |
| Autocomplete (Base UI)b-autocomplete | Iconiq UI | Components | Free | 3 deps | |
| Avatar (Base UI)b-avatar | Iconiq UI | Components | Free | 2 deps |
