Components · Data display
Calendar
A month grid for picking a date — 32px day nodes on the popover surface. The selected day takes a brand fill, today wears a hairline-strong ring, and days outside the current month dim back. Pair it with an input to form a date picker.
Preview
A month across the three themes; the 14th is selected, the 21st is today, two days disabled.
Light
June 2026
S
M
T
W
T
F
S
Dark
June 2026
S
M
T
W
T
F
S
Accessibility
June 2026
S
M
T
W
T
F
S
Spec
Values and token references straight from the Zetta spec.
calendar-container
- backgroundColor
- {colors.popover}
- textColor
- {colors.popover-foreground}
- borderColor
- {colors.hairline}
- borderWidth
- 1px
- borderRadius
- {rounded.base}
- shadow
- {shadows.md}
- padding
- {spacing.page}
- display
- grid
- gap
- {spacing.sm}
- headerHeight
- 32px
- dayNodeSize
- 32px
- dayNodeRadius
- {rounded.base}
- dayNodeFontFamily
- Geist
- dayNodeFontSize
- 14px
calendar-header
- height
- 32px
- display
- flex
- alignItems
- center
- justifyContent
- space-between
calendar-day
- textColor
- {colors.ink}
- fontWeight
- 400
- display
- flex
- alignItems
- center
- justifyContent
- center
- cursor
- pointer
calendar-day-hover
- backgroundColor
- {colors.surface-muted}
- borderRadius
- {rounded.base}
calendar-day-focus
- outline
- 2px solid {colors.border-focus}
- outlineOffset
- 2px
- borderRadius
- {rounded.base}
calendar-day-selected
- backgroundColor
- {colors.brand}
- textColor
- {colors.brand-text}
- fontWeight
- 600
- borderRadius
- {rounded.base}
calendar-day-today
- borderColor
- {colors.border-strong}
- borderWidth
- 1px
- borderRadius
- {rounded.base}
calendar-day-disabled
- textColor
- {colors.disabled-text}
- cursor
- not-allowed
calendar-day-outside
- textColor
- {colors.disabled-text}
- opacity
- 0.4
- cursor
- default
calendar-weekday-label
- textColor
- {colors.muted}
- fontFamily
- Geist
- fontSize
- 12px
- fontWeight
- 500
- textAlign
- center
Build with the skill
No package to install — hand this to your AI to generate the calendar in your stack.
Implement the Zetta "Calendar" component in this project's stack using the zetta-design-md skill.
- Apply the `calendar` spec from the skill (variants: day, day-selected, day-today, day-disabled, day-outside).
- Use this project's own component conventions and framework idioms.
- Reference the Zetta design tokens (CSS variables) for every color, radius, and shadow — never hardcode values.
- Implement all states (hover, focus, active, disabled, and invalid where applicable) with a visible 2px focus ring.
- Honor the Zetta guardrails (brand never shifts hue, shadows for overlays only, etc.) and verify in Light, Dark, and Accessibility.Anatomy & rules
- Popover container with
shadow-md; 32px square day nodes at base radius. Selected =brandfill +brand-textat weight 600; today = hairline-strong border; outside-month = disabled colour at 0.4 opacity. - Weekday labels are muted 12px. Keep one clear "today" and at most one selected day per single-date picker.
Accessibility
- Expose the month as a
grid; let arrow keys move day-to-day and Page Up/Down change month. Mark the selected day witharia-selectedand disabled days withdisabled. Don't rely on the brand fill alone — keep the bold weight too.
Known gaps
- Range selection, multi-month views, time pickers, and locale/week-start configuration are not specified — the spec defines the single-month day grid.