Skip to content

Input & utility primitives

Date picker, Date range picker, Time picker, Color picker, Editable, Password input, Clipboard, Toggle group (segmented).

stable client:visible
Source: src/components/ui/ Install: npm install react-day-picker @zag-js/editable @zag-js/react

Rendered example — light + dark

Light

Date picker

Date range picker

Color picker

Editable (click to rename)

Production API key

Toggle group — segmented (sliding indicator)

Dark

Date picker

Date range picker

Color picker

Editable (click to rename)

Production API key

Toggle group — segmented (sliding indicator)

Recipes & props

A realistic usage snippet for this component. Imports come from @/components/ui/…. See the source for the full API.

No snippet yet for this component — open the source link above, or read the contribution guide .

Report an issue

Show diagnostics

Environment

 

Console errors

 

Failed requests