Theme: Smoke
Background: Field
Theme: Smoke
Background: Field
System

Date picker

A full calendar grid that sits inline on the page

Highlights today, supports min/max date limits, and lets users pick a date by clicking a cell. Use this when the date context matters and users benefit from seeing the full month. Use Date Input instead for a lighter-weight form field.

Default

November 2026
November 2026
Sunday
Monday
Tuesday
Wednesday
Thursday
Friday
Saturday

With selected date

February 2026
February 2026
Sunday
Monday
Tuesday
Wednesday
Thursday
Friday
Saturday

Disabled

February 2026
February 2026
Sunday
Monday
Tuesday
Wednesday
Thursday
Friday
Saturday

Compact

November 2026
November 2026
Sunday
Monday
Tuesday
Wednesday
Thursday
Friday
Saturday
February 2026
February 2026
Sunday
Monday
Tuesday
Wednesday
Thursday
Friday
Saturday
tsx
// From the npm package
import { DatePicker } from 'rift-ds/components/DatePicker/DatePicker';

// Or as source you own, via the shadcn CLI
npx shadcn@latest add https://rift-ds.com/r/date-picker.json