List

Display ordered or unordered list with optional icons and nested items.

Import


import { List, ThemeIcon } from '@tidbcloud/uikit'

Basic Usage


import { List } from '@tidbcloud/uikit'
 
function Demo() {
  return (
    <List>
      <List.Item>Clone or download repository from GitHub</List.Item>
      <List.Item>Install dependencies with yarn</List.Item>
      <List.Item>To start development server run npm start command</List.Item>
      <List.Item>Run tests to make sure your changes do not break the build</List.Item>
      <List.Item>Submit a pull request once you are done</List.Item>
    </List>
  )
}

With Icons

Replace list bullets with custom icons using the icon prop on List or List.Item.


import { List, ThemeIcon } from '@tidbcloud/uikit'
import { IconCircleCheck, IconCircleDashed } from '@tabler/icons-react'
 
function Demo() {
  return (
    <List
      spacing="xs"
      size="sm"
      center
      icon={
        <ThemeIcon color="teal" size={24} radius="xl">
          <IconCircleCheck size={16} />
        </ThemeIcon>
      }
    >
      <List.Item>Clone or download repository from GitHub</List.Item>
      <List.Item>Install dependencies with yarn</List.Item>
      <List.Item
        icon={
          <ThemeIcon color="blue" size={24} radius="xl">
            <IconCircleDashed size={16} />
          </ThemeIcon>
        }
      >
        Submit a pull request once you are done
      </List.Item>
    </List>
  )
}

Nested Lists

Use withPadding prop to offset nested lists and listStyleType to control bullet type.


import { List } from '@tidbcloud/uikit'
 
function Demo() {
  return (
    <List listStyleType="disc">
      <List.Item>First order item</List.Item>
      <List.Item>
        First order item with list
        <List withPadding listStyleType="disc">
          <List.Item>Nested item</List.Item>
          <List.Item>Nested item</List.Item>
        </List>
      </List.Item>
      <List.Item>First order item</List.Item>
    </List>
  )
}

Key Props

Prop	Type	Description
`type`	`'ordered' \| 'unordered'`	List type (default: unordered)
`icon`	`ReactNode`	Icon to replace list item bullet
`spacing`	`MantineSpacing`	Spacing between list items
`size`	`MantineSize`	Controls font-size and line-height
`center`	`boolean`	Center item content with icon
`withPadding`	`boolean`	Offset nested lists with padding
`listStyleType`	`string`	Controls CSS list-style-type