> ## Documentation Index
> Fetch the complete documentation index at: https://docs.devreadykit.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Lists

> List component with ordered and unordered variants

export const ListsWithIconsPreview = () => <iframe src="https://kerny-custom.vercel.app/preview/ListsWithIcons" frameBorder="0" width="100%" height="260"></iframe>;

export const ListsNestedPreview = () => <iframe src="https://kerny-custom.vercel.app/preview/ListsNested" frameBorder="0" width="100%" height="300"></iframe>;

export const ListsOrderedPreview = () => <iframe src="https://kerny-custom.vercel.app/preview/ListsOrdered" frameBorder="0" width="100%" height="260"></iframe>;

export const ListsBasicPreview = () => <iframe src="https://kerny-custom.vercel.app/preview/ListsBasic" frameBorder="0" width="100%" height="260"></iframe>;

## Overview

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

## Basic Usage

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    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} />;
    }

    ```
  </Tab>

  <Tab title="Preview">
    <ListsBasicPreview />
  </Tab>
</Tabs>

## Ordered List

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    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} />
    ```
  </Tab>

  <Tab title="Preview">
    <ListsOrderedPreview />
  </Tab>
</Tabs>

## Nested Items

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    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} />
    ```
  </Tab>

  <Tab title="Preview">
    <ListsNestedPreview />
  </Tab>
</Tabs>

## With Custom Icons

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    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 />}
    />
    ```
  </Tab>

  <Tab title="Preview">
    <ListsWithIconsPreview />
  </Tab>
</Tabs>

## Props

<PropsTable>
  \| Prop | Type | Default | Description |
  \|:------|:------|:---------|:-------------| | items | `ListItem[]` | - | Array
  of list items | | ordered | `boolean` | `false` | Use ordered list | |
  level1Icon | `React.ReactNode` | - | Icon for first level | | level2Icon |
  `React.ReactNode` | - | Icon for second level | | className | `string` | - |
  Additional CSS classes |
</PropsTable>

### ListItem

<PropsTable>
  \| Prop | Type | Default | Description |
  \|:------|:------|:---------|:-------------| | id | `string \| number` | - |
  Item identifier | | content | `React.ReactNode` | - | Item content | |
  children | `ListItem[]` | - | Nested items |
</PropsTable>