List

A typography component that organizes textual points or child items into ordered or unordered blocks.

First item of the list
Second item of the list

For more information on all available list style utilities, visit Tailwind

With Icon

First item of the list
Second item of the list

Sizes

Use the list-{size} class to control the component size.

Size values can include:smmdlg.

For more information on all available font size utilities, visit Tailwind

First item of the list
Second item of the list

First item of the list
Second item of the list

First item of the list
Second item of the list

Customizing

globals.css


:root {
  --ex-list-font-size-sm: var(--text-xs);
  --ex-list-font-size-md: var(--text-sm);
  --ex-list-font-size-lg: var(--text-base);
 
  --ex-list-font-family-sm: var(--font-sans);
  --ex-list-font-family-md: var(--font-sans);
  --ex-list-font-family-lg: var(--font-sans);
 
  --ex-list-font-weight-sm: var(--font-weight-normal)
  --ex-list-font-weight-md: var(--font-weight-normal)
  --ex-list-font-weight-lg: var(--font-weight-normal)
 
  --ex-list-gap-x-sm: calc(var(--spacing) * 2);
  --ex-list-gap-x-md: calc(var(--spacing) * 2.5);
  --ex-list-gap-x-lg: calc(var(--spacing) * 3);
 
  --ex-list-gap-y-sm: calc(var(--spacing) * 1);
  --ex-list-gap-y-md: calc(var(--spacing) * 1);
  --ex-list-gap-y-lg: calc(var(--spacing) * 1);
}

API

List

Element	Selector
`List`	`.ex-list`

Prop	Type	Default
`as`	`ElementType`	`ul`
`asChild`	`boolean`	`false`

List.Item

Element	Selector
`List.Item`	`.ex-list-item`

Prop	Type	Default
`as`	`ElementType`	`li`
`asChild`	`boolean`	`false`

List.Indicator

Element	Selector
`List.Indicator`	`.ex-list-indicator`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`