Dates@knitui/dates

Day

The atomic calendar cell — an UnstyledButton-based control. Every per-day state (selected, in-range, weekend, outside, today, disabled, static, hidden) is a boolean variant; accent comes from the active Tamagui theme= ramp (no color prop, no hex).

WebiOSAndroid12 own props12 examples

Stories Source Tests Open in Storybook

import { Day } from "@knitui/dates";

Playground

Loading playground…

Playground

<Day
  date="2026-06-15"
  size="md"
/>

Examples

Default

A plain, interactive day cell.

Loading example…

DefaultSource Storybook

Selected

Selected — solid accent fill with contrast-coloured label.

Loading example…

SelectedSource Storybook

Weekend

Weekend — the label flips to the accent-error colour.

Loading example…

WeekendSource Storybook

Outside

Outside the displayed month — dimmed.

Loading example…

OutsideSource Storybook

Today

Today — bordered highlight (only when not selected / in range).

Loading example…

TodaySource Storybook

Disabled

Disabled — dimmed and non-interactive (selection/range styling suppressed).

Loading example…

DisabledSource Storybook

Static

Static (display-only) — renders as a non-interactive div.

Loading example…

StaticSource Storybook

Range

A selected range across a week strip: the edges round their outer corners (firstInRange/lastInRange), the middle is a squared $color4 tint, and the endpoints are selected. Cells sit flush so the tint reads as one band.

Loading example…

RangeSource Storybook

Custom Render Day

Custom content via renderDay — a non-text node renders without a label.

Loading example…

Custom Render DaySource Storybook

Themed

The accent recolors with the Tamagui theme= prop — no color prop, no hex.

Loading example…

ThemedSource Storybook

Sizes

Every size token, from xxs to xxl.

Loading example…

SizesSource Storybook

Props

Prop	Type	Default	Description
`date` required	`string`	`2026-06-15`	Date displayed in this cell, in `YYYY-MM-DD` format.
`disabled` system	`boolean \| undefined`	`false`	Disable the day.
`firstInRange`	`boolean \| undefined`	`false`	Whether the day is the first in a range selection.
`fullWidth` system	`boolean \| undefined`	`false`	Day takes the full width of its cell.
`hidden`	`boolean \| undefined`	`false`	Whether the day should not be displayed.
`highlightToday`	`boolean \| undefined`	`false`	Highlight today with a border.
`inRange`	`boolean \| undefined`	`false`	Whether the day is within a selected range.
`lastInRange`	`boolean \| undefined`	`false`	Whether the day is the last in a range selection.
`locale`	`string \| undefined`	—	dayjs locale for the fallback `aria-label`; falls back to `DatesProvider`.
`outside`	`boolean \| undefined`	`false`	Whether the day is outside of the current month.
`renderDay`	`RenderDay \| undefined`	—	Custom renderer for the day's content.
`selected`	`boolean \| undefined`	`false`	Whether the day is selected.
`shadow` system	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "xxs" \| "xxl" \| undefined`	—
`size` system	`CalendarSize \| undefined` xxs · xs · sm · md · lg · xl · xxl	`'md'`	Width/height of the day.
`static`	`boolean \| undefined`	`false`	Render as a non-interactive `div` instead of a button.
`theme` system	`ThemeName \| null \| undefined`	—	Applies a theme to this element
`weekend`	`boolean \| undefined`	`false`	Whether the day is a weekend.

Accessibility & DOM props (2)

Prop	Type
`key`	`Key \| null \| undefined`
`ref`	`Ref<TamaguiElement> \| undefined`

Plus 499 inherited style props from Box — the full Tamagui/React Native style surface, including token shorthands like p, mx, bg and c. See Tokens for the scales they accept, or the full list.