Divider

Divider is used to separate contents.

Invoice No

0000123

Issued

01/01/2026

Due Date

02/02/2026

From

PrimeTek

preview

Installation#

npx shadcn@latest add @primereact/divider

Usage#

import { Divider, DividerContent } from '@/components/ui/divider';

<Divider />

Examples#

Basic#

Subtotal$89.00

Shipping$5.99

Total$94.99

basic-demo

import { Divider } from '@/components/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 />
            <div className="flex items-center justify-between">
                <span className="text-color font-medium">Shipping</span>
                <span className="text-color">$5.99</span>
            </div>
            <Divider />
            <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 '@/components/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 type="solid" />

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

            <Divider type="dotted" />

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

            <Divider 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 '@/components/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 orientation="vertical" />
            <div>
                <div className="uppercase font-mono text-xs">Issued</div>
                <div className="font-light">01/01/2026</div>
            </div>
            <Divider 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, DividerContent } from '@/components/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 align="left" type="solid">
                <DividerContent>
                    <code className="uppercase text-xs">Getting started</code>
                </DividerContent>
            </Divider>

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

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

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

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

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

Accessibility#

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

Keyboard Support#

Component does not include any interactive elements.