Dates@knitui/dates
LevelsGroup
LevelsGroup is the side-by-side column FRAME that holds numberOfColumns calendar levels — the flex-row layout that MonthLevelGroup/YearLevelGroup/DecadeLevelGroup each wrap. It is a pure layout wrapper around role="grid" levels (it carries no role of its own; callers pass role="group"), owns no cells, and forwards its ref + style props to the root, exposed as LevelsGroup.Frame. The fullWidth variant stretches each column to an equal share of the container; size is a parity passthrough.
import { LevelsGroup } from "@knitui/dates";Playground
Loading playground…
<LevelsGroup />Examples
Default
Two month levels laid side by side — the default column layout.
Loading example…
Single Column
A single child renders without issue (one column).
Loading example…
Three Columns
Three columns side by side (the numberOfColumns parity case from the groups).
Loading example…
Full Width
Stretched to the full width of its container (fullWidth maps data-full-width).
Loading example…
Props
| Prop | Type | Default | Description |
|---|---|---|---|
disabled system | boolean | undefined | — | |
fullWidth system | boolean | undefined | false | Stretch the group to the full width of its container. |
shadow system | "xs" | "sm" | "md" | "lg" | "xl" | "xxs" | "xxl" | undefined | — | |
size system | CalendarSize | undefined | — | Calendar size of the levels rendered inside. Accepted for API parity and so the group can be sized alongside its children; the row layout itself does not vary by size, so it is a passthrough (no `createStyledContext` is needed — `LevelsGroup` renders no cells of its own). |
theme system | ThemeName | null | undefined | — | Applies a theme to this element |
Accessibility & DOM props (2)
| Prop | Type |
|---|---|
key | Key | null | undefined |
ref | Ref<TamaguiElement> | undefined |
Plus 498 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.