Yugen UI

Calendar

Calendar shows a monthly grid of days to pick a single date, several dates or a date range.

Built on react-day-picker v10 with a Fluent look: 32px day cells with a 4px radius, today in bold brand text with an underline, selected days on a brand background, days inside a range tinted with brand-background-2. Defaults to Vietnamese, with weeks starting on Monday. Accepts every DayPicker prop (mode, selected, onSelect, disabled, numberOfMonths…).
November 2026

Import

Install from npm, copy the source into your project with @yugen-ui/cli or the shadcn CLI, or import directly when working in this repo.

TSX
// npm install yugen-uiimport { Calendar } from "yugen-ui";

Variants

Each tile is a standalone example: hover to copy, or press Code to see the source.

November 2026

Range selection

mode="range": the first and last days get a brand background, the days between a brand tint.

November 2026
Workdays selected: 0

Multiple days & disabled days

mode="multiple"; disabled={{ dayOfWeek: [0, 6] }} disables weekends.

Usage

Do
  • Use Calendar on its own when the calendar is the main content (booking, picking time off).
  • Disable invalid days with disabled instead of reporting an error after the pick.
Don't
  • Don't use Calendar for birth dates far from today. Allow typing or use a year dropdown (captionLayout="dropdown").
  • Don't show more than 2 months side by side on narrow screens.

Props

Prop · TypeDefaultDescription
mode"single" | "multiple" | "range"Default: —Selection mode.
selected / onSelectDate | Date[] | DateRangeDefault: —Value, depending on mode.
disabledMatcher | Matcher[]Default: —Disabled days (Date, { before }, { after }, { dayOfWeek }…).
numberOfMonthsnumberDefault: 1Number of months shown.
showOutsideDaysbooleanDefault: trueShows days of the previous / next month (foreground-4).
localeDayPickerLocaleDefault: viLanguage; import it from react-day-picker/locale.
…DayPickerPropsDefault: —Any other react-day-picker v10 prop.

Messages

Text built into the component: labels, aria-labels, screen reader announcements.

English by default. Change it with the messages prop of YugenProvider, by the namespace below; messagesVi has the Vietnamese set. See Interface language.

messages.calendar

Key · TypeDefault (English)messagesVi
localeLocale | undefined

Locale của react-day-picker: tên tháng / thứ, nhãn trợ năng của nút và ô ngày, ngày đầu tuần. Prop locale của Calendar vẫn ưu tiên hơn. undefined dùng locale en-US có sẵn trong react-day-picker.

Default (English)undefinedmessagesVivi