Divider

An unstyled separator component with compound composition 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.

Styled

Theme-based styling with CSS variables

Tailwind

Utility-first styling with Tailwind CSS

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

Features#

Compound component API with two sub-components: Root, Content
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)

Usage#

import { Divider } from 'primereact/divider';

<Divider.Root>
    <Divider.Content />
</Divider.Root>

Behavior#

Polymorphic Rendering#

Use as on any sub-component to change the rendered HTML element.

<Divider.Root as="hr" />

Default elements: Root=div, Content=div.

Render Function Children#

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

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

Pass Through#

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 */

API#

DividerRoot#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: DividerRootInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: DividerRootInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`DividerRootInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<DividerRootPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: DividerRootInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`align`	`"center"` \| `"top"` \| `"bottom"` \| `"left"` \| `"right"`	—
Alignment of the content.
`orientation`	`"horizontal"` \| `"vertical"`	`horizontal`
Specifies the orientation, valid values are 'horizontal' and 'vertical'.
`type`	`"solid"` \| `"dashed"` \| `"dotted"`	`solid`
Border style type.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Defines passthrough(pt) options of Divider component.

label	type	description
root	DividerRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.
content	DividerRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the content's DOM element.

DividerContent#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: DividerContentInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: DividerContentInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`DividerContentInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<DividerContentPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: DividerContentInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Defines passthrough(pt) options of DividerContent component.

label	type	description
root	DividerContentPassThroughType<HTMLAttributes<HTMLButtonElement>>	Used to pass attributes to the root's DOM element.

Accessibility#

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

Keyboard Support#

Component does not include any interactive elements.