All components
List
Ordered and unordered lists with native markers or custom icon indicators.
- Compiles to static CSS
- Zero runtime style objects
- Types for every token
Variants
- Compiles to static CSS
- Zero runtime style objects
- Types for every token
- Compiles to static CSS
- Zero runtime style objects
- Types for every token
Install
zsh — list
1bunx stylexblocks add listUsage — Base UI
list.tsx
123456789101112131415161718192021222324252627import { List } from "#components/ui/base-ui/list.tsx";
const features = [ "Compiles to static CSS", "Zero runtime style objects", "Types for every token",];
export function Example() { return ( // variant resolves once on Root; items inherit it via context. // "marker" uses native list markers; "plain" swaps them for indicators. <List.Root variant="plain"> {features.map((text) => ( <List.Item key={text}> <List.Indicator> <CheckIcon /> </List.Indicator> {text} </List.Item> ))} </List.Root> );}
// ordered lists compose through the render prop:// <List.Root render={<ol />}>…</List.Root>