CalendarDay

Stable
WCAG 2.2 evidence
RTL

One day of a {@link CalendarMonth } grid, built on React Aria CalendarCell: a gridcell whose button is named by the full, localised date ("Wednesday, October 14, 2026"), with aria-selected, aria-disabled and the "today" and range descriptions read by screen readers (WCAG 1.3.1, 4.1.2). Arrow keys, Page Up / Page Down, Home / End and Enter are handled by the calendar (2.1.1). The Figma State (Default, Hover, Today, Selected, Range start / middle / end, Disabled, Outside) is not a prop: it follows React Aria's data attributes. Today is marked by a dot and bold text and selection by a filled shape, so neither relies on colour alone (1.4.1). The 40 px cell is a 24 px+ target (2.5.8). data-weekend is set on weekend days of the locale. Render it inside CalendarMonth (or a React Aria CalendarGrid); the ref points to the <td>.

import { CalendarDay } from "@nexera-ui/react";

Loading example…

2
examples: 3
props: 0
live controls: 1
platform: 6
WCAG criteria: 0
blocks use it

Try every prop. Copy the code.

Change the props and the code updates. Check light and dark, LTR and RTL, and phone width.

Loading…

Generated code

import { CalendarDay } from "@nexera-ui/react";

<CalendarDay />

Examples 1

The same examples as Storybook, rendered live. Open Code to copy one.

Range

Range start, middle and end come from a React Aria RangeCalendar.

Loading example…

app.tsx

import { CalendarDate } from "@internationalized/date";
import { CalendarGrid, RangeCalendar } from "react-aria-components";
import { CalendarDay } from "@nexera-ui/react";

export function Range() {
  return (
    <RangeCalendar
      aria-label="Trip"
      defaultValue={{ start: new CalendarDate(2026, 10, 12), end: new CalendarDate(2026, 10, 16) }}
    >
      <CalendarGrid className="border-separate border-spacing-y-0.5">
        {(date) => <CalendarDay date={date} />}
      </CalendarGrid>
    </RangeCalendar>
  );
}

Props 3

date*Nexera

CalendarDate

The date of the cell (an @internationalized/date CalendarDate, given by CalendarMonth). The visible number is this date formatted for the locale, with its digits.

classNameNexera

string

Extra classes for the day (the element inside the <td>), merged last so they win over the defaults.

styleNexera

CSSProperties

Inline style for the day.

* Required. React Aria props shown are the ones most apps use; the component accepts the rest of its React Aria props too.

Accessible by default.

Built on React Aria, and covered by the WCAG 2.2 evidence generated on every build.

WCAG 2.2 evidence

4 direct · 2 supporting

1.3.1Info and RelationshipsLevel A · tested directly
1.4.1Use of ColorLevel A · supporting test
2.1.1KeyboardLevel A · tested directly
2.4.7Focus VisibleLevel AA · tested directly
2.5.8Target Size (Minimum)Level AA · supporting test
4.1.2Name, Role, ValueLevel A · tested directly

Fits any width.

Nexera components respond to the space they are given. Drag the corner of the frame, or pick a width.

0 px · drag the corner

Styling hooks

Pass className to add Tailwind classes (merged last). State is exposed as data attributes, so you can style it with variants like data-pressed:.

data-disabled
data-focus-visible
data-hovered
data-outside-month
data-selected
data-selection-end
data-selection-start
data-today
data-unavailable

Usage

<CalendarDay className="data-disabled:opacity-90 shadow-sm" />

Used in blocks

No block uses CalendarDay yet.

Theme studio