Divider

Visually separates content horizontally or vertically.

First release: 1.0.0 Latest update: July 1, 2025 Current version: 1.0.0

React

Angular

Vue

Svelte

HTML

Import

import { PlusDivider } from '@plusui/react';

import { PlusDividerComponent } from '@plusui/angular';

import { PlusDivider } from '@plusui/vue';

import PlusDivider from '@plusui/svelte';

<script src="https://cdn.jsdelivr.net/npm/@plusui/core"></script>

Package

@plusui/react

@plusui/angular

@plusui/vue

@plusui/svelte

@plusui/core

Usage

<PlusDivider />

<plus-divider />

<plus-divider />

<PlusDivider />

<plus-divider />

Docs

Changelog

Divider Changelog

Recent changes and updates for the divider component

v1.0.0

June 20, 2025

Feat

Added Divider component for content separation

Horizontal and vertical orientations
Content support with positioning
Multiple styles: solid, dashed, dotted
Customizable thickness

The Divider component is used to create a visual separation between sections of content or groups of elements. It can be oriented horizontally or vertically and supports different line styles and thicknesses.

Anatomy

Usage

Basic Example

A standard horizontal divider.

Content above

Content below

Show code

import { PlusDivider } from '@plusui/react';

export default () => {
  return (
    <>
      <div>
        <p>
          Content above
        </p>
        <PlusDivider>
        </PlusDivider>
        <p>
          Content below
        </p>
      </div>
    </>
  );
};

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <div>
      <p>
        Content above
      </p>
      <plus-divider>
      </plus-divider>
      <p>
        Content below
      </p>
    </div>
  `
})
export class ExampleComponent {}

<template>
  <div>
    <p>
      Content above
    </p>
    <plus-divider>
    </plus-divider>
    <p>
      Content below
    </p>
  </div>
</template>

<div>
  <p>
    Content above
  </p>
  <plus-divider>
  </plus-divider>
  <p>
    Content below
  </p>
</div>

<div>
  <p>
    Content above
  </p>
  <plus-divider>
  </plus-divider>
  <p>
    Content below
  </p>
</div>

Orientation

Use the orientation prop to set the divider direction. Vertical dividers require a defined height on the divider or its container.

Left

Right

Show code

import { PlusDivider } from '@plusui/react';

export default () => {
  return (
    <>
      <div>
        <PlusDivider>
        </PlusDivider>
        <br/>
        <div style="height: 50px; display: flex; align-items: center; gap: 1rem;">
          <p>
            Left
          </p>
          <PlusDivider orientation="vertical">
          </PlusDivider>
          <p>
            Right
          </p>
        </div>
      </div>
    </>
  );
};

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <div>
      <plus-divider>
      </plus-divider>
      <br/>
      <div style="height: 50px; display: flex; align-items: center; gap: 1rem;">
        <p>
          Left
        </p>
        <plus-divider orientation="vertical">
        </plus-divider>
        <p>
          Right
        </p>
      </div>
    </div>
  `
})
export class ExampleComponent {}

<template>
  <div>
    <plus-divider>
    </plus-divider>
    <br/>
    <div style="height: 50px; display: flex; align-items: center; gap: 1rem;">
      <p>
        Left
      </p>
      <plus-divider orientation="vertical">
      </plus-divider>
      <p>
        Right
      </p>
    </div>
  </div>
</template>

<div>
  <plus-divider>
  </plus-divider>
  <br/>
  <div style="height: 50px; display: flex; align-items: center; gap: 1rem;">
    <p>
      Left
    </p>
    <plus-divider orientation="vertical">
    </plus-divider>
    <p>
      Right
    </p>
  </div>
</div>

<div>
  <plus-divider>
  </plus-divider>
  <br/>
  <div style="height: 50px; display: flex; align-items: center; gap: 1rem;">
    <p>
      Left
    </p>
    <plus-divider orientation="vertical">
    </plus-divider>
    <p>
      Right
    </p>
  </div>
</div>

Kind

The kind prop changes the line style.

Solid (Default)

Dashed

Dotted

Show code

import { PlusDivider } from '@plusui/react';

export default () => {
  return (
    <>
      <div>
        <p>
          Solid (Default)
        </p>
        <PlusDivider kind="solid">
        </PlusDivider>
        <p>
          Dashed
        </p>
        <PlusDivider kind="dashed">
        </PlusDivider>
        <p>
          Dotted
        </p>
        <PlusDivider kind="dotted">
        </PlusDivider>
      </div>
    </>
  );
};

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <div>
      <p>
        Solid (Default)
      </p>
      <plus-divider kind="solid">
      </plus-divider>
      <p>
        Dashed
      </p>
      <plus-divider kind="dashed">
      </plus-divider>
      <p>
        Dotted
      </p>
      <plus-divider kind="dotted">
      </plus-divider>
    </div>
  `
})
export class ExampleComponent {}

<template>
  <div>
    <p>
      Solid (Default)
    </p>
    <plus-divider kind="solid">
    </plus-divider>
    <p>
      Dashed
    </p>
    <plus-divider kind="dashed">
    </plus-divider>
    <p>
      Dotted
    </p>
    <plus-divider kind="dotted">
    </plus-divider>
  </div>
</template>

<div>
  <p>
    Solid (Default)
  </p>
  <plus-divider kind="solid">
  </plus-divider>
  <p>
    Dashed
  </p>
  <plus-divider kind="dashed">
  </plus-divider>
  <p>
    Dotted
  </p>
  <plus-divider kind="dotted">
  </plus-divider>
</div>

<div>
  <p>
    Solid (Default)
  </p>
  <plus-divider kind="solid">
  </plus-divider>
  <p>
    Dashed
  </p>
  <plus-divider kind="dashed">
  </plus-divider>
  <p>
    Dotted
  </p>
  <plus-divider kind="dotted">
  </plus-divider>
</div>

Thickness

The thickness prop adjusts the line thickness.

Thin (Default)

Medium

Thick

Show code

import { PlusDivider } from '@plusui/react';

export default () => {
  return (
    <>
      <div>
        <p>
          Thin (Default)
        </p>
        <PlusDivider thickness="thin">
        </PlusDivider>
        <p>
          Medium
        </p>
        <PlusDivider thickness="medium">
        </PlusDivider>
        <p>
          Thick
        </p>
        <PlusDivider thickness="thick">
        </PlusDivider>
      </div>
    </>
  );
};

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <div>
      <p>
        Thin (Default)
      </p>
      <plus-divider thickness="thin">
      </plus-divider>
      <p>
        Medium
      </p>
      <plus-divider thickness="medium">
      </plus-divider>
      <p>
        Thick
      </p>
      <plus-divider thickness="thick">
      </plus-divider>
    </div>
  `
})
export class ExampleComponent {}

<template>
  <div>
    <p>
      Thin (Default)
    </p>
    <plus-divider thickness="thin">
    </plus-divider>
    <p>
      Medium
    </p>
    <plus-divider thickness="medium">
    </plus-divider>
    <p>
      Thick
    </p>
    <plus-divider thickness="thick">
    </plus-divider>
  </div>
</template>

<div>
  <p>
    Thin (Default)
  </p>
  <plus-divider thickness="thin">
  </plus-divider>
  <p>
    Medium
  </p>
  <plus-divider thickness="medium">
  </plus-divider>
  <p>
    Thick
  </p>
  <plus-divider thickness="thick">
  </plus-divider>
</div>

<div>
  <p>
    Thin (Default)
  </p>
  <plus-divider thickness="thin">
  </plus-divider>
  <p>
    Medium
  </p>
  <plus-divider thickness="medium">
  </plus-divider>
  <p>
    Thick
  </p>
  <plus-divider thickness="thick">
  </plus-divider>
</div>

With Text Content

Place text or other elements in the default slot to display content within the divider line.

Text

Show code

import { PlusDivider } from '@plusui/react';

export default () => {
  return (
    <>
      <PlusDivider>
        Text
      </PlusDivider>
    </>
  );
};

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <plus-divider>
      Text
    </plus-divider>
  `
})
export class ExampleComponent {}

<template>
  <plus-divider>
    Text
  </plus-divider>
</template>

<plus-divider>
  Text
</plus-divider>

<plus-divider>
  Text
</plus-divider>

Visual Sections

Layout & Spacing

Light & Dark Mode

Screen Reader:
- The component uses role="separator" implicitly via the host element or explicitly depending on context, indicating its purpose as a separator.
- It is typically non-interactive and not included in the tab order.
- If the divider contains text content (via the slot), ensure the text itself is meaningful or provides context.
Required Developer Actions:
- Use dividers semantically to separate distinct groups of content. Avoid using them purely for decoration if a simple margin or padding would suffice.
- Ensure sufficient visual contrast between the divider line and the background, especially when customizing colors using --divider-color.

Design System

Plus UI Design System on Figma

Visit

API Reference

Properties

Name	Type	Default	Description	Required
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Sets the orientation of the divider.	No
`kind`	`'solid' \| 'dashed' \| 'dotted'`	`'solid'`	Sets the line style of the divider.	No
`thickness`	`'thin' \| 'medium' \| 'thick'`	`'thin'`	Sets the thickness of the divider line.	No

Slots

Name	Description
`default` (unnamed)	Optional content to display within the divider line.

CSS Shadow Parts

Part	Description
`divider`	The main container element (`div`).
`label`	The container for the slotted content (when content is present).

CSS Custom Properties

Name	Description
`--divider-color`	Controls the color of the divider line.
`--divider-thickness`	Controls the thickness of the divider line.
`--divider-spacing`	Controls the spacing around the divider.

Join the Community

Plus UI is built by the community. Join us on our platforms to contribute, get help, and stay up to date.

Figma GitHub Discord Twitter Open Collective

Divider

Import

Package

Usage

Docs

Changelog

Divider Changelog

v1.0.0

Added Divider component for content separation

Anatomy

Usage

Basic Example

Orientation

Kind

Thickness

With Text Content

Visual Sections

Layout & Spacing

Light & Dark Mode

Accessibility (a11y)

Design System

API Reference

Properties

Slots

CSS Shadow Parts

CSS Custom Properties

Join the Community