Date Picker
Single-date picker built with the shared calendar and popover primitives. Install Date Picker from the VLLNT UI registry with the shadcn CLI.
Supported platforms:WebNative
2 storiesView componentCalendar
Date picker calendar for selecting dates. Install Calendar from the VLLNT UI registry with the shadcn CLI. React Native source for Calendar is included in VLLNT UI 0.4.0 for iOS and Android. It is source-only; npm publication is pending.
Supported platforms:WebNative
What it is and when to use
Calendar is a date picker calendar for React, built on react-day-picker. It renders a month grid for selecting dates and forwards every DayPicker prop, so you can switch between single, multiple, and range selection modes. Styling matches the rest of the system, with outside days shown by default and custom chevron navigation. Use it inline or inside a popover to build date pickers, booking flows, and scheduling interfaces.
FormPreview
Switch between light and dark to inspect the embedded Storybook preview.
Date picker calendar for selecting dates. Part of the form family in VLLNT UI, it ships as a machine-readable registry entry — copy the source directly into your app with the shadcn CLI and own it, no runtime dependency on a component library.
Platform comparison
| Platform | Dependencies | Capabilities |
|---|---|---|
| Web | @vllnt/ui@^0.3.0 | Browser rendering, DOM events, and ARIA semantics |
| Native | @vllnt/ui-native, react-native | Native-adapted interaction and accessibility |
Installation
Add Calendar to your project with the shadcn CLI. The source lands in your codebase, ready to adapt:
# React Native is source-only; copy the React Native source aboveSource
Stories
Explore every variant and state in the interactive Storybook:
FAQ
- What is Calendar?
- Calendar is a date picker calendar component for React built on react-day-picker. It renders a month grid for selecting dates and supports single, multiple, and range selection.
- How do I add Calendar?
- Run `pnpm dlx shadcn@latest add https://ui.vllnt.com/r/calendar.json` to install it into your project via the shadcn CLI.
- Is Calendar built on react-day-picker?
- Yes. Calendar wraps react-day-picker's DayPicker and forwards all of its props, so you can set the selection mode, disabled dates, and other options while keeping the VLLNT UI styling.