Skip to main content

​
Overview

The Lists component provides ordered and unordered lists with support for nested items and custom icons.

​
Basic Usage

import { Lists } from '@peppermint-design/devreadykit-custom';

export default function ListsBasic() {
  const items = [
    { id: 1, content: 'First item' },
    { id: 2, content: 'Second item' },
    { id: 3, content: 'Third item' }
  ];

return <Lists items={items} />;
}

​
Ordered List

import { Lists } from '@peppermint-design/devreadykit-custom';

const items = [
  { id: 1, content: 'First item' },
  { id: 2, content: 'Second item' },
  { id: 3, content: 'Third item' }
];

<Lists ordered items={items} />

​
Nested Items

import { Lists } from '@peppermint-design/devreadykit-custom';

const nestedItems = [
{
id: 1,
content: 'Parent item',
children: [
{ id: 2, content: 'Child item 1' },
{ id: 3, content: 'Child item 2' }
]
}
];

<Lists items={nestedItems} />

​
With Custom Icons

import { Lists } from '@peppermint-design/devreadykit-custom';
import { Check } from '@/assets/icons';

const items = [
{ id: 1, content: 'First item' },
{ id: 2, content: 'Second item' },
{ id: 3, content: 'Third item' }
];

<Lists 
  items={items}
  level1Icon={<Check />}
  level2Icon={<Check />}
/>

​
Props

​
ListItem