Forms
Date Picker
A Calendar inside a Popover, with Cancel/Apply actions.
Usage
Installation
npm install @wunderui/reactThen import what you need:
import { DatePicker, DatePickerProps } from "@wunderui/react"Examples
Single date
A field that opens a calendar for one day.
Date
Date range
Two months side by side for a start and an end.
Date range
Range with presets
Quick choices such as “Last 7 days” next to the calendar.
Date range
In context
How the component is used inside real screens — the same compositions as the Usage section of the Figma page.
Report filters
A start date for a revenue report, in a filter bar.
Revenue report
From
API Reference
| Prop | Type | Default |
|---|---|---|
| value / defaultValue | Date | — |
| onValueChange | (date: Date | undefined) => void | — |
| placeholder | string | "Pick a date" |