Lists - DevReady Kit

Overview

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

Basic Usage

Code
Preview

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

Code
Preview

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

Code
Preview

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

Code
Preview

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