dixyUI0.1 beta
ComponentsRangeCalendar
ContentComponentBeta

RangeCalendar.

Choose the beginning and the end.

React Aria owns range selection, date navigation and unavailable-date rules. Value and onChange use typed start/end dates. Use LocaleProvider for the intended locale and calendar system.

React AriaKeyboard consideredView source

Make it yours

Preparing the example…

PROPERTIES4

Composition

Anatomy

React Aria owns range selection, date navigation and unavailable-date rules. Value and onChange use typed start/end dates. Use LocaleProvider for the intended locale and calendar system.

Component structure
RangeCalendar.Root (value/defaultValue, bounds, unavailable dates)
├── Button (slot=previous) + Heading + Button (slot=next)
└── Grid → GridHeader / GridBody → Cell

A place to start

Usage

Import the stylesheet once at your application root. This complete example reflects the properties selected above.

Loading example…

Details that make a difference

Examples & states

Sizes

Compare the three Dixy shirt sizes side by side.

Example loads as it comes into view.

Loading source…

Visual treatments

Emphasis changes presentation while the primitive keeps behavior.

Example loads as it comes into view.

Loading source…

Corner radii

Contextual rounding applies to the control or surface; large panels stay readable.

Example loads as it comes into view.

Loading source…

Materials

Optional static finishes use the same public component. Import materials.css in your application.

Example loads as it comes into view.

Loading source…

The finer details

API reference

Generated from Dixy’s local TypeScript interfaces. React Aria props, refs and render callbacks are forwarded; this table covers Dixy’s added visual options.

RangeCalendarRoot

PropType / descriptionDefault
size"sm" | "md" | "lg"

Component proportions.

md
variant"soft" | "solid" | "outline" | "ghost"

Surface emphasis.

outline
colorVisualColor

Semantic color.

accent
radius"none" | "sm" | "md" | "lg" | "full"

Inherits the nearest Theme.

—
material"matte" | "glossy" | "soft" | "metal" | "paper"

Optional static finish; import materials.css. Inherits Theme.

—

Built from the same foundations

Styling tokens

Change Theme settings above to compare appearance, accent, neutral, radius, spacing density, motion and direction. Override component aliases on a Theme root so custom properties follow portaled content too. The wrapper merges className, style, refs and render composition with its owning primitive.

TokenPurpose
--dixy-color-background-surfaceThe component-specific starting point.
--dixy-font-label-mdControl label font and line height; body roles remain readable in text inputs.
--dixy-color-background-selectedSelected surfaces use semantic color across appearances.
--dixy-color-border-focusFocus indication remains visible independently of shadows.
--dixy-spacing-inset-smDensity-aware component padding.
--dixy-motion-transition-feedbackShort state feedback, reduced by the inherited motion setting.
Explore theme customization

Consider everyone

Accessibility

Provide visible labels and meaningful names. Preserve native semantics, selected/disabled state and visible focus. Target WCAG 2.2 AA; full contrast, assistive-technology and platform verification remains pending.

Arrow keysNavigate the date grid.
Enter / SpaceSet the start or end of the range.

Target: WCAG 2.2 AA. Automated tests cover selected behavior; manual screen-reader, contrast, and zoom validation remain part of the release checklist.

THE THINKING BEHIND IT

Build it. Then understand it.

React Aria owns range selection, date navigation and unavailable-date rules. Value and onChange use typed start/end dates. Use LocaleProvider for the intended locale and calendar system.

A token to follow--dixy-color-background-surface

Nothing up our sleeves

Source
UP NEXTDateField