Divider

An unstyled separator component for horizontal and vertical content division.

Build fully custom content separators with complete control over layout and styling.

Invoice No0000123

Issued01/01/2026

Due Date02/02/2026

Fast setup, no credit card required.

basic-demo

Pre-styled Versions

Choose a pre-styled library to use Divider with ready-made designs.

Theme-based styling with CSS variables

Utility-first styling with Tailwind CSS

For hook-based usage without components, see the Headless API.

Horizontal and vertical orientations
Three border types: solid, dashed, dotted
Content alignment within the divider line (left, center, right for horizontal; top, center, bottom for vertical)

import { Divider } from 'primereact/divider';

<Divider />

Use as to change the rendered HTML element.

<Divider as="hr" />

Default element: div.

Divider accepts a render function as children, providing access to the component instance.

<Divider>{(instance) => <span>{instance.divider?.props.orientation}</span>}</Divider>

Some parts may not be visible in the preview depending on the component's current state.

Fast setup with a simple onboarding process, no credit card required to get started.

Getting started

Cancel anytime directly from your account settings, with no questions asked.

/* Select a part to see its CSS selector for custom styling */

Divider uses role="separator" with aria-orientation set to either "horizontal" or "vertical".

Component does not include any interactive elements.