Runtime fingerprintToken readout from the active provider chain.
Live DS
Runtime
PlatformRottay
Rottay / ModernPlatform Flagship
Primary
#FFFFFFSecondary #A0A0A5
Radius
Compact runtime evidence across 3+ token signals.
Published DS package · Component Layer · Rottay / modernShared route metadata for the active runtime, kept inline so the shell reads like a thin header band.
Palette
#FFFFFFRottay
Chrome
Modernrenderer posture
Radius
14pxsurface shape
Density
normalPlatform Flagship
Reference summaryDate calendar panel for date selection and displayDisplay primitives should prove hierarchy, density control, and empty-state discipline.
How to read this pageUse the showroom switchers in the sidebar to change engine and tenant, then judge this primitive in the live preview before styling around it locally.
At a glanceThe meta cards below are the quickest read on how this primitive behaves across the current runtime.
DisplayContent-first primitives that need to remain elegant under every engine and theme.
Best paired with
patternsEscalate to patterns or surfaces when workflow logic starts dominating.
Use it when
presenting status
showing metadata
framing read-only content
Review checklist
readability
content hierarchy
fallback handling
Common pairings
patterns
detail views
dashboard modules
Live preview
Compare the same primitive across engines
Sidebar controls drive thisCalendar
This is the primary runtime verification surface for the component. Engine and tenant changes should land in the rendered DS primitive itself, not in showroom-local wrapper styling.
Preview heuristics
Compare hierarchy, spacing, and interaction feedback before any page-level styling.
The rendered primitive should carry the engine and tenant differences by itself.
If it only looks right inside local wrapper chrome, the primitive or preview needs more work.
Engine comparisonEngine comparisonThe active tenant stays real while the same component is rendered by every engine. The wrapper stays intentionally quiet so engine differences come from the DS itself.
Rottay3 live engines
Consumption
Import and usage
Keep the primitive contract visible. These snippets are meant to help teams consume the base component before they wrap or escalate it.Browse all Display
Adoption postureStart with Calendar, not a wrapperImport directly from the design system package, verify the base behavior across 3 engines here, and only wrap when workflow logic starts repeating.
The primitive should stay legible before any page-specific chrome is layered on top.
Usage notes
Import directly from the design system package and keep composition simple first.
Use category-appropriate props before creating wrapper APIs that hide the base contract.
Escalate to patterns or surfaces only when workflow logic clearly outweighs local UI concerns.
API surface
Props
Curated reference for fast browsing. Verify edge-case props against the source until this table is extracted directly from the DS.
Reference scan5 documented props0 required and 5 optional rows are listed here so teams can review the contract without digging through source immediately.
Confirm uncommon edge cases against the component implementation until this table is extracted automatically.
Reference disciplineThe table below is tuned for quick scanning in docs. For unusual composition or engine-specific behavior, treat the DS source as the final authority.
Calendar propsProp contracts stay readable across dark-first and light-first tenants.
5 props0 required5 optional
Optional
Optional
Optional
Optional
Optional
Related components
Continue within Display
If Calendar is close but not quite right, scan nearby primitives in the same tier before jumping to a heavier surface or pattern abstraction.Browse all Display
Next moveStay within Display firstCategory siblings usually solve adjacent states while preserving the same primitive contract level and runtime expectations.
Escalate to patterns or surfaces only when the interaction model itself changes.
Published entrypoint@rottay/design-systemUse the shared package surface as the default import path for Calendar. It keeps adoption readable and future extraction work straightforward.
Base tier: Display
EntrypointKeep imports directReach for the published DS export first so teams can read the contract at a glance.
ImportPublished package entrypoint, ready to copy.
tsx
1 line
Consumption
Runtime-aware snippet
Baseline exampleStart with CalendarUse the smallest valid composition first, then layer in product-specific wrappers only when the workflow truly needs them.
UsagePaste-ready example that shows the base contract first.
tsx
3 lines
Consumption
Runtime-aware snippet
Fast readStart with required props, then scan defaults before dropping to per-row details.
Contract postureThis reference stays intentionally concise so the primitive contract remains scannable.
Name
Type
Default
Required
Description
children
ReactNode
none
Content rendered inside Calendar.
variant
string
none
Visual variant or treatment supported by the component.
emptyState
ReactNode
none
Fallback content when there is nothing meaningful to render.
className
string
none
Additional CSS class names.
style
CSSProperties
none
Inline style overrides.
childrenOptional
ReactNodenone
Content rendered inside Calendar.
variantOptional
stringnone
Visual variant or treatment supported by the component.
emptyStateOptional
ReactNodenone
Fallback content when there is nothing meaningful to render.
classNameOptional
stringnone
Additional CSS class names.
styleOptional
CSSPropertiesnone
Inline style overrides.
Also in Display3 engines
BadgeSmall count or status indicator attached to another element
Peer primitive within the same category set.Open detail
Also in Display3 engines
CalloutHighlighted block for tips, warnings, or important notes
Peer primitive within the same category set.Open detail
Also in Display3 engines
CardContained surface for grouping related content
Peer primitive within the same category set.Open detail
2026
Aug
Su
Mo
Tu
We
Th
Fr
Sa
26
27
28
29
30
31
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
01
02
03
04
05
Runtime fingerprint
Runtime
PlatformRottay
Rottay / ModernPlatform Flagship
Primary
#FFFFFFSecondary #A0A0A5
Radius
14pxxl 18px
Compact runtime evidence across 2+ token signals.
Note
Check readability, fallback handling, and how much meaning survives with almost no supporting chrome.
Sun
Mon
Tue
Wed
Thu
Fri
Sat
26
27
28
29
30
31
1
2
3
4
5
Runtime fingerprint
Runtime
PlatformRottay
Rottay / ModernPlatform Flagship
Primary
#FFFFFFSecondary #A0A0A5
Radius
Compact runtime evidence across 2+ token signals.
Note
Check readability, fallback handling, and how much meaning survives with almost no supporting chrome.
Sun
Mon
Tue
Wed
Thu
Fri
Sat
Runtime fingerprint
Runtime
PlatformRottay
Rottay / ModernPlatform Flagship
Primary
#FFFFFFSecondary #A0A0A5
Radius
Compact runtime evidence across 2+ token signals.
Note
Check readability, fallback handling, and how much meaning survives with almost no supporting chrome.
ImportTSX
Quick copy
import { Calendar } from '@rottay/design-system';
UsageTSX
Quick copy
<Calendar>
<Text size="sm">Display your content with a stable, token-aware container.</Text>
</Calendar>