List

Display ordered or unordered list
Import

Usage

  • Clone or download repository from GitHub
  • Install dependencies with yarn
  • To start development server run npm start command
  • Run tests to make sure your changes do not break the build
  • Submit a pull request once you are done
Type
Size
<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

You can replace list bullets with icon. To do so provide following props:

  • icon on List component will be used as default icon for all list elements
  • icon on List.Item component will override context icon from List
  • spacing – spacing between list items from theme or number to set spacing in px, defaults to 0
  • center – center item content with icon
  • size – set font size from theme
  • Clone or download repository from GitHub
  • Install dependencies with yarn
  • To start development server run npm start command
  • Run tests to make sure your changes do not break the build
  • Submit a pull request once you are done
import { List, ThemeIcon } from '@mantine/core';
import { IssueClosedIcon, IssueDraftIcon } from '@primer/octicons-react';
function Demo() {
return (
<List
spacing="xs"
size="sm"
center
icon={
<ThemeIcon color="teal" size={24} radius="xl">
<IssueClosedIcon size={12} />
</ThemeIcon>
}
>
<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
icon={
<ThemeIcon color="blue" size={24} radius="xl">
<IssueDraftIcon size={12} />
</ThemeIcon>
}
>
Submit a pull request once you are done
</List.Item>
</List>
);
}

Nested lists

Set withPadding prop to offset nested lists and listStyleType to control bullet type:

  • First order item
  • First order item
  • First order item with list
    • Nested item
    • Nested item
    • Nested item with list
      • Event more nested
      • Event more nested
    • Nested item
  • First order item
<List listStyleType="disc">
<List.Item>First order item</List.Item>
<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.Item>
Nested item with list
<List withPadding listStyleType="disc">
<List.Item>Event more nested</List.Item>
<List.Item>Event more nested</List.Item>
</List>
</List.Item>
<List.Item>Nested item</List.Item>
</List>
</List.Item>
<List.Item>First order item</List.Item>
</List>

TypeScript

Component props type

Import component props type:

import type { ListProps } from '@mantine/core';

ListProps extends React.ComponentPropsWithoutRef<'ul'>, all other props are available under Component props tab.

ListStylesNames type

ListStylesNames type is a union with List Styles API names:

import type { ListStylesNames } from '@mantine/core';
const listClasses: Partial<Record<ListStylesNames, 'string'>> = {
item: 'list-item',
icon: 'list-itemIcon',
};
<List classNames={listClasses} />;

See full styles descriptions list under Styles API tab.

Build fully functional accessible web applications faster than ever
Feedback
Your feedback is most valuable contribution to the project, please share how you use Mantine, what features are missing and what is done good
Leave feedback