Introduction
A modern, accessible, zero-dependency React date & time picker — no Tailwind required.
react-smart-datetime is a single React component for picking dates, times, datetimes, and ranges. It ships a real stylesheet themed entirely with CSS variables, so it works in any project with no Tailwind or CSS framework and zero runtime dependencies.
Select date & time
Why this library
| react-smart-datetime | typical Tailwind-based pickers | |
|---|---|---|
| Styling | Real stylesheet, themed via CSS variables | Requires Tailwind + breaks under JIT purge |
| Runtime deps | 0 (icons inlined) | lucide-react, etc. |
| Range selection | ✅ live hover preview | often stubbed |
| Min / max / disabled | ✅ enforced everywhere | often unimplemented |
| Presets | ✅ single and range | varies |
| Multi-month view | ✅ up to 3 | ❌ |
| Week numbers (ISO) | ✅ | ❌ |
| Keyboard navigation | ✅ full | ❌ |
| Accessibility | ✅ ARIA + roving tabindex | partial |
| Dark mode | ✅ light / dark / auto | classes only |
| ESM + CJS + types | ✅ | varies |
Feature highlights
- 📅 Date / time / datetime modes + two-endpoint range selection
- ⚡ Presets, multi-month views, ISO week numbers, min/max & disabled dates
- 🎨 CSS-variable theming —
light/dark/auto, one accent drives everything - 🌍 i18n & time zones via the platform
IntlAPIs (no locale bundles) - ⌨️ Keyboard navigation + ARIA roles, focus-visible rings, roving tabindex
- 🪶 ~18 KB, tree-shakeable, ESM + CJS, first-class TypeScript types
Head to Installation to get started, or jump to the Showcase to see every variant at once.