Components

Calendar

Month calendar built on react-day-picker. Yuno tokens for selected/today/outside days. Use standalone or inside a Popover for a Date picker.

Updated Jul 10, 2026 by Leonardo Posada

Variants

July 2026
<Calendar mode="single" selected={date} onSelect={setDate} />

When to use

  • Standalone date picker inside a settings panel.
  • Range selection for reports (paired with mode='range').

When not to use

  • For displaying appointments/events — that's a full calendar view, not this atom.

Usage

Do
  • Provide selected + onSelect props for controlled use.
  • Pair with a Popover trigger button — see the DatePicker atom.
Don't
  • Don't override day sizes below size-9 — hit target rules apply.