styledPanel

Divider

Divider is used to separate contents.

Invoice No

0000123

Issued

01/01/2026

Due Date

02/02/2026

From

PrimeTek

preview

Usage#

import { Divider } from '@primereact/ui/divider';

<Divider />

Examples#

Basic#

Separates content sections horizontally or vertically.

Subtotal$89.00

Shipping$5.99

Total$94.99

basic-demo

import { Divider } from '@primereact/ui/divider';

export default function BasicDemo() {
    return (
        <div className="max-w-sm mx-auto text-sm">
            <div className="flex items-center justify-between">
                <span className="text-color font-medium">Subtotal</span>
                <span className="text-color">$89.00</span>
            </div>
            <Divider.Root />
            <div className="flex items-center justify-between">
                <span className="text-color font-medium">Shipping</span>
                <span className="text-color">$5.99</span>
            </div>
            <Divider.Root />
            <div className="flex items-center justify-between">
                <span className="text-color font-semibold">Total</span>
                <span className="text-color font-semibold">$94.99</span>
            </div>
        </div>
    );
}

Type#

Style of the border is configured with the type property that can either be solid, dotted or dashed.

Fast setup, no credit card required

Cancel anytime from your account

24/7 support included

No long-term commitments

type-demo

import { Divider } from '@primereact/ui/divider';

export default function TypeDemo() {
    return (
        <div className="max-w-md mx-auto">
            <p className="text-sm">Fast setup, no credit card required</p>

            <Divider.Root type="solid" />

            <p className="text-sm">Cancel anytime from your account</p>

            <Divider.Root type="dotted" />

            <p className="text-sm">24/7 support included</p>

            <Divider.Root type="dashed" />

            <p className="text-sm">No long-term commitments</p>
        </div>
    );
}

Vertical#

Vertical divider is enabled by setting the orientation property as vertical.

Invoice No

0000123

Issued

01/01/2026

Due Date

02/02/2026

vertical-demo

import { Divider } from '@primereact/ui/divider';

export default function VerticalDemo() {
    return (
        <div className="flex w-fit mx-auto">
            <div>
                <div className="uppercase font-mono text-xs">Invoice No</div>
                <div className="font-light">0000123</div>
            </div>
            <Divider.Root orientation="vertical" />
            <div>
                <div className="uppercase font-mono text-xs">Issued</div>
                <div className="font-light">01/01/2026</div>
            </div>
            <Divider.Root orientation="vertical" />
            <div>
                <div className="uppercase font-mono text-xs">Due Date</div>
                <div className="font-light">02/02/2026</div>
            </div>
        </div>
    );
}

Content#

Children are rendered within the boundaries of the divider where location of the content is configured with the align property. In horizontal orientation, alignment options are left, center andright whereas vertical mode supports top, center and bottom.

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.

Flexibility

24/7 support included to help you resolve issues quickly, whenever you need assistance.

Support

No long-term commitments or hidden contracts, just transparent and flexible pricing.

content-demo

import { Divider } from '@primereact/ui/divider';

export default function ContentDemo() {
    return (
        <div className="max-w-md mx-auto">
            <p className="text-sm">Fast setup with a simple onboarding process, no credit card required to get started.</p>

            <Divider.Root align="left" type="solid">
                <Divider.Content>
                    <code className="uppercase text-xs">Getting started</code>
                </Divider.Content>
            </Divider.Root>

            <p className="text-sm">Cancel anytime directly from your account settings, with no questions asked.</p>

            <Divider.Root align="center" type="dotted">
                <Divider.Content>
                    <code className="uppercase text-xs">Flexibility</code>
                </Divider.Content>
            </Divider.Root>

            <p className="text-sm">24/7 support included to help you resolve issues quickly, whenever you need assistance.</p>

            <Divider.Root align="right" type="dashed">
                <Divider.Content>
                    <code className="uppercase text-xs">Support</code>
                </Divider.Content>
            </Divider.Root>

            <p className="text-sm">No long-term commitments or hidden contracts, just transparent and flexible pricing.</p>
        </div>
    );
}

API#

Sub-Components#

See Primitive API for DividerRoot and DividerContent component documentation.

Hooks#

See Headless API for useDivider hook documentation.

Accessibility#

See Divider Primitive for WAI-ARIA compliance details and keyboard support.