List

A semantic list of Item rows.

  • Landing page redesign

    Designer for the marketing site refresh, June 14.

  • API integration sprint

    Two developers for the billing API integration, June 21.

<List.Root aria-label="Open projects">
	<List.Item variant="outline">
		<Item.Media variant="icon"><CalendarCheckIcon /></Item.Media>
		<Item.Content>
			<Item.Title>Landing page redesign</Item.Title>
		</Item.Content>
	</List.Item>
</List.Root>

List renders a <ul> and List.Item an <li>, taking the same children as Item. Give the list an aria-label — a screen reader announces the count, and "list of 12" is only useful if it says a list of what.

API

List.Root

PropTypeDefault
exitExit—Inside a <Presence>: plays this child's way out before it unmounts.

Plus the DOM props of the element it renders. Source: list/components/list-root.tsx.

List.Item

PropTypeDefault
size"default" | "sm" | "xs"—
variant"default" | "muted" | "outline"—
exitExit—Inside a <Presence>: plays this child's way out before it unmounts.

Plus the DOM props of the element it renders. Source: list/components/list-item.tsx.

List.Separator

PropTypeDefault
exitExit—Inside a <Presence>: plays this child's way out before it unmounts.
classNamestring | ((state: SeparatorState) => string | undefined)—CSS class applied to the element, or a function that returns a class based on the component's state.
orientationOrientation—The orientation of the separator.
renderComponentRenderFn<HTMLProps, SeparatorState> | ReactElement<unknown, string | JSXElementConstructor<any>>—Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a ReactElement or a function that returns the element to render.
styleCSSProperties | ((state: SeparatorState) => CSSProperties | undefined)—Style applied to the element, or a function that returns a style object based on the component's state.

Plus the DOM props of the element it renders. Source: list/components/list-separator.tsx.