Section Divider

A horizontal rule with an optional label to separate content.

or continue with

Installation

$Terminal

npx shadcn@latest add https://sdk-components.thesqd.com/r/section-divider.json

Usage

Import from the master file. Pass a label as children; `align` positions it.

TSImport

import { SectionDivider } from "@/components/ui/section-divider";

TSExample

import { SectionDivider } from "@/components/ui/section-divider";

export function Example() {
  return (
    <SectionDivider align="center">or continue with</SectionDivider>
  );
}

Composition

Anatomy of the SectionDivider primitive.

SectionDivider                   (single component — pass the label as children)
├── align="left | center | right" (label position; lines fill the remaining space)
└── children={<ReactNode>}         (optional label; omit for a plain divider)

Center label

Label centered between two lines. The default.

or continue with

Left label

Label pinned to the left with a single trailing line.

Account

Right label

Label pinned to the right with a single leading line.

Optional

No label

Omit children for a plain full-width divider.

API Reference

Props exposed by the SectionDivider primitive.

SectionDivider

Prop	Type	Default	Description
`align`	"left" \| "center" \| "right"	"center"	Where the label sits. `center` draws a line on both sides; `left`/`right` draw a single line on the opposite side.
`children`	ReactNode	—	The label. Omit entirely to render a plain full-width divider line.
`className`	string	—	Override or extend the wrapper classes.