Skip to main content

​
Overview

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

​
Basic Usage

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

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

​
With Text

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

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

​
With Icon

import { Divider } from '@peppermint-design/devreadykit-custom';
import { Settings } from '@/assets/icons';

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

​
Props