Drivn vs shadcn/ui — Calendar Component Compared

shadcn/ui exports a single Calendar component and changes behavior via a mode prop — mode="single", mode="multiple", or mode="range". Drivn exports Calendar for single-date selection and mounts range mode on the same object as Calendar.Range. One dot access, no mode string, no cast. The Calendar docs cover every prop passed through to react-day-picker.

The usage divergence is small per component but compounds across a form with several pickers. A single import line covers both the single and range variants in Drivn, and TypeScript narrows each to the right selected and onSelect pair — a Date | undefined on the root and a DateRange | undefined on Calendar.Range — without you choosing between union types at the call site.

Drivn exposes three variants through a variant prop: default, weekNumbers, and dropdown. Each maps to a preset object of react-day-picker config, so variant="weekNumbers" flips showWeekNumber to true and variant="dropdown" flips captionLayout to dropdown plus applies the dropdownOverrides classNames for the select-style caption row. shadcn/ui leaves all three as loose props you wire at every call site.

The dropdown variant also reads fromYear and toYear props and converts them into startMonth and endMonth Date objects for react-day-picker. The default window is today plus or minus twenty years. shadcn does not provide the fromYear / toYear shortcut — you build the Date objects yourself and pass them through. For a booking form with a tight three-year window, Drivn saves two lines per picker.

Date range selection is one of the most common calendar patterns — think booking flows, reporting periods, leave requests. Both libraries wrap react-day-picker's mode="range", but they surface it differently. shadcn reuses the same Calendar with a different mode string; Drivn mounts it as Calendar.Range, which is a pure TypeScript win because the selected prop narrows to DateRange | undefined automatically.

Drivn's range component also applies a rangeActive class set only once the range spans more than one day — the range_start, range_middle, and range_end cells get bg-primary with rounded-left and rounded-right corners. If you only need single-day selection wrapped in a popover with a formatted input, use the Date Picker component, which composes Calendar with Popover and Input.

Both libraries accept a locale prop from react-day-picker/locale and pass it through to the underlying locale object. Drivn imports it like import { cs } from 'react-day-picker/locale' and passes it to <Calendar locale={cs} />. That applies month names, weekday labels, and first-day-of-week conventions in one line. No extra i18n dependency, no provider, no context — the locale is plain data that travels with the prop.

If you already use a heavier i18n library such as lingui or next-intl in your Next.js app, the Calendar does not read from it. You pass the matching react-day-picker locale for whatever active locale your app has resolved. The installation guide has the full setup — after npx drivn add calendar the component imports are identical between Drivn and shadcn on this axis.