date-range-picker-cn

Date range picker components for shadcn-based React applications with both Base UI and Radix UI variants.

Packages

• date-range-picker-cn exports the Base UI variant from the root entry point
• date-range-picker-cn/base exposes Base UI components and types directly
• date-range-picker-cn/radix exposes Radix UI components and types directly

Installation

You can install the component via the shadcn CLI or as a standard npm package.

Publishing to npm (OIDC)

npm supports trusted publishing from GitHub Actions using OpenID Connect (OIDC), so you can publish without storing long-lived npm tokens in GitHub secrets.

Prerequisites:

• npm CLI 11.5.1+ in CI (this repo’s workflow installs the latest npm)
• GitHub-hosted runners (OIDC trusted publishing does not work on self-hosted runners)

Setup:

1. Publish once from your machine (OTP/token) so the package exists on npm.
2. On npmjs.com → your package → Settings → Trusted Publisher, add GitHub Actions publisher:
   • Owner: peppyhop
   • Repository: date-range-picker-cn
   • Workflow filename: publish.yml
3. Push a tag like v0.0.3 to trigger the publish workflow.

Workflow:

• publish.yml

Using AI Agents

This library provides skills for AI coding agents via TanStack Intent. If you use an AI agent (like Cursor, Copilot, or Claude), run the following command to install the agent skills:

npx @tanstack/intent@latest install

Using shadcn CLI

# Base UI variant (default)
npx shadcn@latest add https://raw.githubusercontent.com/peppyhop/date-range-picker-cn/main/registry/date-range-picker.json

# Radix UI variant
npx shadcn@latest add https://raw.githubusercontent.com/peppyhop/date-range-picker-cn/main/registry/date-range-picker-radix.json

Using npm

react and react-dom are peer dependencies (React 18+).

Base UI variant (default export)

npm install date-range-picker-cn @base-ui/react react-day-picker

Radix UI variant

npm install date-range-picker-cn radix-ui react-day-picker

Web configuration

Tailwind CSS (required)

This package ships Tailwind class names, so your Tailwind build must scan the package files in node_modules to generate the required styles.

• Tailwind v3: add the package to content in tailwind.config.{js,ts}

export default {
  content: [
    "./src/**/*.{js,ts,jsx,tsx,mdx}",
    "./node_modules/date-range-picker-cn/dist/**/*.{js,mjs,cjs}",
  ],
};

• Tailwind v4: ensure your CSS entry includes the package as a source (adjust the relative path if needed)

@source "../node_modules/date-range-picker-cn/dist/**/*.{js,mjs,cjs}";

shadcn/ui theme tokens

The components use shadcn/ui color tokens (for example bg-background, text-foreground, border-border). Make sure your app defines the corresponding CSS variables (as in shadcn/ui).

Next.js App Router

Use the picker from a Client Component (a file that starts with use client).

Usage

import { DateRangePicker } from "date-range-picker-cn";

export function Example() {
  return <DateRangePicker initialDateFrom={new Date()} placeholder="Select date range..." />;
}

import { DateRangePicker } from "date-range-picker-cn/radix";

export function Example() {
  return <DateRangePicker align="end" showCompare={false} />;
}

Icons

Both variants render built-in SVG icons by default. If you want to use your own icon set, pass the icons prop (for example, from lucide-react).

API Docs

• Generated API docs live in docs/api
• npm run docs:api refreshes the generated markdown locally
• Pushes to main automatically regenerate and commit API docs when the public API changes

Conventional Commits

This repository validates commit messages against the Conventional Commits specification.

Examples:

• feat: add preset ranges
• fix: correct compare range calculation
• docs: refresh usage examples
• chore: update typedoc config

Development

npm install
npm run dev

Useful scripts:

• npm run build
• npm run lint
• npm run format:check
• npm run docs:api