Installation

Requirements

• React 19.
• Tailwind CSS v4. The components are styled with utility classes, so Tailwind has to see their source (both installs below cover that).
• @base-ui/react 1.4 or later, for the popovers.

From the shadcn registry

The registry item copies the source into your project under components/ui/cupertino/, the way every shadcn/ui component arrives, and adds @base-ui/react, clsx and tailwind-merge if they are missing.

npx shadcn@latest add https://cupertino-datetime-picker-docs.vercel.app/r/cupertino-datetime-picker.json

Then import the stylesheet once, in your Tailwind entry. It holds the colour tokens, the wheel mask and the popover keyframes.

@import "tailwindcss";
@import "./components/ui/cupertino/styles.css";

Import from the copied files:

import { DateTimePicker } from "@/components/ui/cupertino/date-time-picker";

The files are yours. Change the pill radius, drop a panel you do not use, or translate the default labels. A later shadcn add of the same item asks before it overwrites.

From npm

pnpm add cupertino-datetime-picker @base-ui/react

/* your Tailwind entry */
@import "tailwindcss";
@import "cupertino-datetime-picker/styles.css";
@source "../node_modules/cupertino-datetime-picker/dist";

The @source line matters: Tailwind only generates the utilities it finds in scanned files, and node_modules is skipped by default. Adjust the relative path to where your CSS file sits.

import { DateTimePicker } from "cupertino-datetime-picker";

Fonts

The .cdp root class sets the Apple system font stack (-apple-system, SF Pro, then system-ui). To use your app's font instead:

.cdp {
  font-family: inherit;
}

Next

• DateTimePicker for the component and its props.
• Theming for the tint and dark mode.