Month Grid
Month navigation, weekday header and a selectable day grid. The shared atom behind Date picker and the Calendar sidebar mini-calendar.
import
{ MonthGrid } from "@pepulux/ui"Default
October 2026
MoTuWeThFrSaSu
Pick a day
Event dots and compact size
October 2026
MoTuWeThFrSaSu
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| selected | Date | null | — | Selected day |
| onSelect | (date: Date) => void | — | Called when a day is clicked |
| eventDates | Date[] | — | Days that show a dot under the number |
| today | Date | — | Highlighted as today; defaults to now |
| defaultMonth | Date | — | Month shown first; defaults to the selected day, then today |
| size | "sm" | "md" | "md" | 32px (sidebar) or 40px (popup) day cells |
| className | string | — | Additional CSS classes |