Skip to content
Try free

Calendar

A month grid for choosing a day (or a range with RangeCalendar), always on the page.

  • Pro
  • Version 2.0.0-rc.1
  • APG pattern: Date picker dialog grid

Examples

Still previews of the real component, rendered from its stories. Pro code isn’t public, so nothing in them responds. Switch the theme and density for every preview at once.

Default

Delivery date, October 2026
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
Show the code

Default, code

<Calendar 'aria-label'="Delivery date" defaultValue={parseDate('2026-10-24')} />

Unavailable days

Appointment, October 2026
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
Show the code

Unavailable days, code

<Calendar
  'aria-label'="Appointment"
  defaultValue={parseDate('2026-10-21')}
  minValue={parseDate('2026-10-05')}
  isDateUnavailable={(d) => isWeekend(d, 'en-GB')}
/>

Range

Trip dates, October 2026
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
Show the code

Range, code

<RangeCalendar aria-label="Trip dates" defaultValue={{ start: parseDate('2026-10-12'), end: parseDate('2026-10-16') }} />

Tokens

The 16 design tokens Calendar reads, with the value each has in the theme and density chosen above. Change a token and the component follows, in Figma and in code.

Show all 16 tokens
Tokens Calendar reads
TokenValue nowCSS variable
calendar.day-size…--sd-calendar-day-size
color.action.primary…--sd-color-action-primary
color.action.primary-hover…--sd-color-action-primary-hover
color.bg.brand-subtle…--sd-color-bg-brand-subtle
color.bg.muted…--sd-color-bg-muted
color.icon.brand…--sd-color-icon-brand
color.text.danger…--sd-color-text-danger
color.text.default…--sd-color-text-default
color.text.disabled…--sd-color-text-disabled
color.text.on-primary…--sd-color-text-on-primary
color.text.secondary…--sd-color-text-secondary
radius.full…--sd-radius-full
radius.md…--sd-radius-md
radius.none…--sd-radius-none
spacing.gap.sm…--sd-spacing-gap-sm
spacing.stack.xs…--sd-spacing-stack-xs

Install

Pro components come as source from the SuperDuper registry, with a licence key from Solo, Team or Studio. The registry and checkout aren’t open yet.

Add it from the registry (Pro licence key)

npx shadcn@latest add @superduperui/calendar

Then import it

import { Calendar, RangeCalendar } from "@/components/ui/calendar"

Props

Calendar props
PropTypeWhat it does
errorMessagestringText under the grid when the chosen date is invalid (e.g. unavailable).
isDateMarked(date: DateValue) => booleanDays to mark with a dot (free slots, events). Decorative: explain the dot in a legend or the content the day opens.

When to use it

Use it for

  • Booking and scheduling screens where the month stays visible
  • Inside DatePicker (it is the popup)

Use something else for

  • Dates people type from memory: use DateField
  • A compact field: use DatePicker

Accessibility

Screen readers announce "Delivery date, October 2026" then "Saturday, 24 October 2026, selected, button".

WCAG 2.2 AAA criteria the component meets in Comfortable density: 1.4.6, 1.4.9, 2.1.3, 2.3.2, 2.4.13, 2.5.5, 2.5.6.

Compact density meets AA (2.5.8, 24px targets), not AAA.

What your product still has to do

  • Say which days are unavailable and why, in text near the calendar

Shared patterns it ships with: 3.3.5 (unavailable days explained in text).

This release’s test results

Test results for Calendar in this release
axe-core (WCAG A, AA, AAA and best practice)80 runs across every story, theme, density and width: 0 violations
Rendered text contrast1,530 text runs: 0 below 7:1, lowest 11.42:1
Target size520 targets: 0 under 44px in Comfortable
Focus appearance (2.4.13)54 focus stops in 3 browser engines: all pass
Keyboard scriptChromium 7 of 7, Firefox 7 of 7, WebKit 7 of 7

Manual passes with VoiceOver and NVDA haven’t been done yet.

Keyboard

Each step is scripted and run in Chromium, Firefox and WebKit.

Calendar keyboard steps
KeyWhat happens
TabTab reaches the previous-month button
TabTab reaches the next-month button
TabTab enters the grid on the selected day
ArrowRightRight moves one day
ArrowDownDown moves one week
PageUpPage Up moves back a month
EnterEnter selects the focused day

In Figma

The Figma component is Calendar, with Mode (Single, Range); Starts on (Thursday, Monday, Tuesday, Wednesday, Friday, Saturday, Sunday); Days (28, 29, 30, 31). The Figma library isn’t published yet.

Figma to code: Mode (Single = Calendar, Range = RangeCalendar); Month → defaultFocusedValue / defaultValue (heading is generated); Show error → isInvalid; Error → errorMessage when Show error; Starts on (Thursday, Monday, Tuesday, Wednesday, Friday, Saturday, Sunday; preview only); Days (28, 29, 30, 31; preview only); nested Previous → (slot previous); nested Next → (slot next).