chakra-datepicker

Date picker components built for Chakra UI with support for single-date selection, date ranges, and a composable calendar API.

Links

• Repository: ideativedigital/chakra-datepicker
• Recipes:
  • Calendar recipe
  • Calendar day recipe

Install

Install the package with your preferred package manager:

npm install @ideative/chakra-datepicker

yarn add @ideative/chakra-datepicker

pnpm add @ideative/chakra-datepicker

This package expects these peer dependencies in your app:

• react
• react-dom
• @chakra-ui/react
• react-icons

Storybook

This project includes Storybook stories for Calendar, DatePicker, and DateRangePicker.

• Start Storybook locally:

npm run storybook

• Build Storybook static files:

npm run storybook:build

Stories are defined under the storybook/ directory:

• storybook/calendar.stories.tsx
• storybook/date-picker.stories.tsx
• storybook/date-range-picker.stories.tsx

Examples

DatePicker (single date)

import { DatePicker } from "@ideative/chakra-datepicker";

export function TravelDateField() {
  return <DatePicker.Simple defaultValue="2026-02-10" name="travelDate" />;
}

DateRangePicker

import { DateRangePicker } from "@ideative/chakra-datepicker";

export function TravelRangeField() {
  return <DateRangePicker.Simple startName="startDate" endName="endDate" />;
}

Calendar

import { Calendar } from "@ideative/chakra-datepicker";

export function InlineCalendar() {
  return <Calendar.Simple value={new Date("2026-02-10T12:00:00.000Z")} />;
}

Controlled DatePicker

import { DatePicker } from "@ideative/chakra-datepicker";
import { useState } from "react";

export function ControlledDatePicker() {
  const [value, setValue] = useState("2026-02-10");

  return <DatePicker.Simple value={value} onValueChange={setValue} />;
}