Data Display@knitui/components

List

List is a vertical list composed from List + List.Item. type switches between unordered (bullet) and ordered (numbered) rendering. size scales item text, spacing controls the gap between items, icon replaces the default marker for all items (overridable per item), and center aligns markers with their labels.

WebiOSAndroid8 own props10 examples

Stories Source Tests Open in Storybook

import { List } from "@knitui/components";

Playground

Loading playground…

typeSemantic element and default marker style.

sizeControls item font size and line height.

spacingGap between items — Tamagui token (e.g. `$sm`) or number.

centerVertically center each marker with its label.

false

withPaddingAdds inline-start padding for visual nesting.

false

reversedReverse the numbering in an ordered list.

false

startStarting number for ordered lists.

Playground

<List
  type="unordered"
  size="md"
  center={false}
  withPadding={false}
  reversed={false}
/>

Examples

Sizes

Seven sizes from xxs to xxl — item text scales accordingly.

Loading example…

SizesSource Storybook

Ordered Vs Unordered

Unordered list uses bullet markers; ordered list uses auto-incremented numbers.

Loading example…

Ordered Vs UnorderedSource Storybook

Shadows

The inherited shadow elevation prop, from xs to xl.

Loading example…

ShadowsSource Storybook

With Icons

A list-level icon replaces the default bullet for every item; a per-item icon overrides only that item.

Loading example…

With IconsSource Storybook

Spacing

spacing controls the gap between items using Tamagui tokens.

Loading example…

SpacingSource Storybook

Centered Markers

center aligns the marker vertically with the label — useful for multi-line items or icon markers.

Loading example…

Centered MarkersSource Storybook

Ordered Start And Reversed

Ordered list with start and reversed — numbering starts at 5 and counts down.

Loading example…

Ordered Start And ReversedSource Storybook

Nested With Padding

withPadding adds inline-start padding, useful for visually nested sub-lists.

Loading example…

Nested With PaddingSource Storybook

Styles

Per-slot styles targets individual parts of each item — here the marker and label.

Loading example…

StylesSource Storybook

Props

Prop	Type	Default	Description
`center`	`boolean \| undefined`	`false`	Vertically center each marker with its label.
`children`	`ReactNode`	—	`List.Item` children.
`disabled` system	`boolean \| undefined`	—
`icon`	`ReactNode`	—	Marker for every item; overridden by an item's own `icon`.
`listStyleType`	`string \| undefined`	—	CSS `list-style-type` — accepted for Mantine parity and forwarded on web. Markers are rendered explicitly, so this is cosmetic on web and a no-op on native; narrowed locally rather than widened to `any`.
`renderMarker`	`((order: number) => ReactNode) \| undefined`	—	Custom default marker per item — receives the 1-based item order (after `start`/`reversed` are applied) and returns the marker node. An escape hatch over the built-in bullet/number; an item's own `icon` and the list-level `icon` (when set) still win. Strings/numbers returned render as themed marker text; nodes render as-is.
`reversed`	`boolean \| undefined`	`false`	Reverse the numbering in an ordered list.
`shadow` system	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "xxs" \| "xxl" \| undefined`	—
`size` system	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "xxs" \| "xxl" \| undefined` xxs · xs · sm · md · lg · xl · xxl	`'md'`	Controls item font size and line height.
`start`	`number \| undefined`	`1`	Starting number for ordered lists.
`theme` system	`ThemeName \| null \| undefined`	—	Applies a theme to this element
`type`	`"ordered" \| "unordered" \| undefined` unordered · ordered	`'unordered'`	Semantic element and default marker style.

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.