> ## 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.

# Divider

> Divider component for separating content sections

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

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

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

## Overview

The Divider component provides visual separation between content sections with support for text and icon variants.

## Basic Usage

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    import { Divider } from '@peppermint-design/devreadykit-custom';

    export default function DividerBasic() {
      return (
        <div>
          <p>Content above</p>
          <Divider />
          <p>Content below</p>
        </div>
      );
    }
    ```
  </Tab>

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

## With Text

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    import { Divider } from '@peppermint-design/devreadykit-custom';

    <Divider variant="text">
      OR
    </Divider>
    ```
  </Tab>

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

## With Icon

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    import { Divider } from '@peppermint-design/devreadykit-custom';
    import { Settings } from '@/assets/icons';

    <Divider variant="icon" icon={<Settings />} />
    ```
  </Tab>

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

## Props

<PropsTable>
  | Prop      | Type                            | Default     | Description                     |
  | :-------- | :------------------------------ | :---------- | :------------------------------ |
  | variant   | `"default" \| "text" \| "icon"` | `"default"` | Divider variant                 |
  | children  | `React.ReactNode`               | -           | Text content (for text variant) |
  | icon      | `React.ReactElement`            | -           | Icon element (for icon variant) |
  | className | `string`                        | -           | Additional CSS classes          |
</PropsTable>