Powerful and customizable React content divider components built for modern applications and websites. These content dividers are built using React Aria and styled with Tailwind CSS.
Installation
You can add this content dividers component using our CLI or manually:
npx untitledui@latest add content-divider
Content dividers examples
Below are examples and variations of this content dividers component:
API reference
ContentDivider
Import ContentDivider from @/components/application/content-divider/content-divider. Renders a <div> element.
FAQs
Please refer to our frequently asked questions page for more.
The type prop accepts "single-line", "dual-line" and "background-fill". There is no default — type is required, so you always pick one explicitly.
Anything you pass as children is rendered in the divider: a text label, a Button, or a ButtonGroup all work. Only "single-line" draws a rule on each side of the children; "dual-line" centers them between a top and bottom border, and "background-fill" centers them on a filled, rounded bar.
The component does not apply typography to its children, so wrap the label in your own element — for example <span className="text-sm font-medium text-tertiary">Today</span> for a subtle label, or text-md font-semibold text-primary for a section heading.
Yes. The className prop is merged onto the root element, so Tailwind utilities override the built-in styles — for example className="py-6" to loosen the "dual-line" padding. The root is w-full, so constrain the width by wrapping it in a container of the size you want.
No. It is plain React and Tailwind classes plus the shared cx helper from utils/cx.ts (built on tailwind-merge) that the other Untitled UI components use too. Install it with npx untitledui@latest add content-divider.
The divider renders a plain div and its rules are decorative, so it is not exposed to assistive technology as a separator. If it introduces a new section, put a real heading element inside it, and give any icon-only button in the divider an aria-label.