Getting Started

Installation

Install React DateKit into your React or Next.js project.

Installation & Setup

Install react-datekit into your React 18 or React 19 application using your favorite package manager.


Package Manager

npm install react-datekit
pnpm add react-datekit
yarn add react-datekit
bun add react-datekit

Import Component & Styles

Import <DatePicker /> and the compiled CSS file once in your application entry or root layout:

import { DatePicker } from "react-datekit";
import "react-datekit/style.css";

Next.js Setup (App Router)

Because DatePicker handles interactive DOM events, touch gestures, and keyboard navigation, include the 'use client' directive in App Router components:

'use client';

import { useState } from 'react';
import { DatePicker } from 'react-datekit';
import 'react-datekit/style.css';

export default function BookingPage() {
  const [date, setDate] = useState<Date | null>(new Date());

  return (
    <DatePicker
      value={date}
      onChange={setDate}
      placeholder="Select booking date..."
    />
  );
}

Peer Requirements

PackageVersionStatusNotes
react>=18.0.0 || >=19.0.0RequiredReact core
react-dom>=18.0.0 || >=19.0.0RequiredReact DOM renderer
date-fns / dayjsNoneNoneZero external date dependencies

Framework & Bundler Compatibility

Bundler / FrameworkStatusNotes
ViteSupportedNative ESM, zero configuration required
Next.js (App & Pages)SupportedAdd 'use client' in App Router
Webpack 5SupportedDual ESM & CJS builds
Remix / React Router 7SupportedFull hydration compatibility
AstroSupportedUse client:load or client:idle

On this page