@zedtech/zedkit-ui

DatePicker

Button that opens a calendar in a popover. `id` pairs with `FieldLabel`.

beta@zedtech/zedkit-ui

Wraps: react-day-picker, @radix-ui/react-popover

Who is it for?: Developers collecting one day in a form field.
When should I use it?: For a due date, a start date, or any single day in a form.
When should I pick something else?: For a range — use the start-and-end picker. For a calendar that stays on the page — use Calendar.

Use it

Simple

import { DatePicker, Field, FieldLabel } from "@zedtech/zedkit-ui";
const [due, setDue] = useState<Date | undefined>();
<Field>
  <FieldLabel htmlFor="due">Due date</FieldLabel>
  <DatePicker id="due" value={due} onValueChange={setDue} />
</Field>

Kit not installed yet?

This ships on npm only; there is no copy-source brick for it.

You get

Every component from one import, with the theme tokens included. Updates arrive with your package manager.

You need

React 19 and Tailwind CSS 4, for example a Next.js app created with the Tailwind option.

Install

Terminal

pnpm add @zedtech/zedkit-ui @fontsource-variable/inter @fontsource-variable/space-grotesk

Load the styles

Tailwind does not scan node_modules, so the @source line points it at the kit's class names. The path is relative to this file.

src/app/globals.cssReplace the contents

@import "tailwindcss";
@import "@zedtech/zedkit-ui/styles.css";
@source "../../node_modules/@zedtech/zedkit-ui/src/**/*.{ts,tsx}";
@source not "../../node_modules/@zedtech/zedkit-ui/src/**/*.test.*";

Pick a look

Set data-identity="glass" on <html> so the finished app matches the site. Fresh app: replace src/app/layout.tsx. Existing app: merge, and keep ThemeProvider and other providers.

src/app/layout.tsxReplace the contents

import "./globals.css";
import "./fonts";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" data-identity="glass">
      <body>{children}</body>
    </html>
  );
}

4
Load the fonts
The Glass look uses Inter and Space Grotesk; these imports self-host them.
src/app/fonts.tsCreate the file
```
import "@fontsource-variable/inter";
import "@fontsource-variable/space-grotesk";
```

Import and render

Simple

import { DatePicker, Field, FieldLabel } from "@zedtech/zedkit-ui";

const [due, setDue] = useState<Date | undefined>();
<Field>
  <FieldLabel htmlFor="due">Due date</FieldLabel>
  <DatePicker id="due" value={due} onValueChange={setDue} />
</Field>

Package version 2.0.1.

Props

Prop

Type

Accessibility

The popover is role="dialog" and takes its name from the placeholder (kit message by default). Selection is announced in a live region. Pass disabledDays, startMonth, and endMonth for limits.

Checkbox

Accessible checkbox and switch toggles.

Label

Accessible labels that pair with any control via `htmlFor`.