SkillGitHub
All components
date-range-picker

Date range picker

Distinguishes hover, provisional, confirmed range, and presets inside a calendar grid.

  • Keyboard ready
  • Reduced motion
  • TypeScript
Scene
product · mono
Runtime cost
Medium
Motion engine
motion
Installnpx shadcn@latest add https://motion-lexicon.pages.dev/r/date-range-picker.json

Component behavior

Range selection extends continuously through calendar space Distinguishes hover, provisional, confirmed range, and presets inside a calendar grid.

Suitable events

Use for input, validation, selection, and field-state changes.

Runtime information

Motion engine
motion
Runtime cost
Medium
Dependencies
motion
Open public Registry JSON