Overview
The Lists component provides ordered and unordered lists with support for nested items and custom icons.Basic Usage
- Code
- Preview
Ordered List
- Code
- Preview
Nested Items
- Code
- Preview
With Custom Icons
- Code
- Preview
Documentation Index
Fetch the complete documentation index at: /llms.txt
Use this file to discover all available pages before exploring further.
List component with ordered and unordered variants
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} />;
}
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} />
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} />
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 />}
/>