Skills
.Work. You
Rest

shadcn-syntax-calendar-datepicker

Official

Build shadcn Calendar & DatePicker reliably.

Software Engineering#nextjs hydration#shadcn calendar#react-day-picker v9#datepicker recipe#date range typing#classNames modifiers#v8 to v9 migration
AuthorImpertio-Studio
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill prevents common, hard-to-debug mistakes when implementing shadcn ui Calendar and the documented DatePicker recipe using react-day-picker v9, especially around selection typing, required mode handling, and Next.js RSC/client boundaries.

Core Features & Use Cases

  • Correct react-day-picker v9 mode usage: Guides you to set mode explicitly and match selected/onSelect state types for "single", "multiple", and "range", including the DateRange shape and mid-range to behavior.
  • DatePicker recipe composition: Ensures you build the DatePicker as Popover + PopoverTrigger asChild + Button + Calendar inside PopoverContent, with the correct date label formatting using date-fns.
  • Production-grade guardrails & migration recovery: Covers v8 → v9 prop renames, classNames/modifiers/custom day rendering via supported extension points, locale wiring via date-fns adapter, and recovery via shadcn add calendar --overwrite, plus hydration-safe "use client" requirements.

Quick Start

Ask the AI to generate a shadcn ui Calendar DatePicker using react-day-picker v9 with range selection, locale set to French, disabled past dates, and correct Next.js App Router client boundaries.

Dependency Matrix

Required Modules

None required

Components

references

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: shadcn-syntax-calendar-datepicker
Download link: https://github.com/Impertio-Studio/shadcn-ui-Claude-Skill-Package/archive/main.zip#shadcn-syntax-calendar-datepicker

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.