ui/components/divider

Divider

Line separator with horizontal and vertical orientation, default and spaced variants.

Preview

tsx

1 import { Divider } from "@/components/ui/divider";2 3 export default function DividerDefault() {4   return (5     <div className="w-full space-y-4">6       <p className="text-sm text-muted-foreground">Content above</p>7       <Divider />8       <p className="text-sm text-muted-foreground">Content below</p>9     </div>10   );11 }12

Installation

$pnpm exec dgadd add ui/divider

[Installs to]src/components/ui/divider[Item]ui/divider

dgadd is not public on npm yet. Until the first release, pack @diffgazer/add from the repository and install that tarball into this app, which is what puts dgadd on pnpm exec.

UI components require Tailwind CSS v4. Local copy mode imports src/styles/styles.css; package mode uses @diffgazer/ui CSS once packages are available.

Usage

tsx

1 import { Divider } from "@/components/ui/divider";2 3 export default function DividerDefault() {4   return (5     <div className="w-full space-y-4">6       <p className="text-sm text-muted-foreground">Content above</p>7       <Divider />8       <p className="text-sm text-muted-foreground">Content below</p>9     </div>10   );11 }12

Examples

Variants

Preview

tsx

1 import { Divider } from "@/components/ui/divider";2 3 export default function DividerVariants() {4   return (5     <div className="w-full space-y-4">6       <p className="text-sm text-muted-foreground">Default variant</p>7       <Divider variant="default" />8       <p className="text-sm text-muted-foreground">Spaced variant</p>9       <Divider variant="spaced" />10       <p className="text-sm text-muted-foreground">Content continues</p>11     </div>12   );13 }14

Custom Label

Preview

tsx

1 import { Divider } from "@/components/ui/divider";2 3 export default function DividerCustomLabel() {4   return (5     <div className="w-full space-y-4">6       <p className="text-sm text-muted-foreground">Content above</p>7       <Divider variant="spaced">or</Divider>8       <p className="text-sm text-muted-foreground">Content below</p>9     </div>10   );11 }12

Vertical (plain and spaced)

Preview

tsx

1 import { Divider } from "@/components/ui/divider";2 3 export default function DividerVertical() {4   return (5     <div className="flex flex-col gap-6">6       <div className="flex h-24 items-center gap-4">7         <span className="text-sm text-muted-foreground">Left</span>8         <Divider orientation="vertical" />9         <span className="text-sm text-muted-foreground">Right</span>10       </div>11 12       <div className="flex h-24 items-center">13         <span className="text-sm text-muted-foreground">Local</span>14         <Divider variant="spaced" orientation="vertical">15           or16         </Divider>17         <span className="text-sm text-muted-foreground">Remote</span>18       </div>19     </div>20   );21 }22

Semantic (non-decorative)

Preview

tsx

1 import { Divider } from "@/components/ui/divider";2 3 export default function DividerDecorative() {4   return (5     <div className="w-full space-y-4">6       <section>7         <h3 className="text-sm font-medium">Account Settings</h3>8         <p className="text-sm text-muted-foreground">Manage your profile and preferences.</p>9       </section>10       <Divider decorative={false} aria-label="Account settings and danger zone" />11       <section>12         <h3 className="text-sm font-medium">Danger Zone</h3>13         <p className="text-sm text-muted-foreground">Irreversible actions like account deletion.</p>14       </section>15     </div>16   );17 }18

API Reference

Divider

Name	Type	Default	Description
variant	"default" \| "spaced"	"default"	Visual style: a single rule or a centered label between two rules.
orientation	"horizontal" \| "vertical"	"horizontal"	Layout axis. Vertical requires the parent to define a height.
decorative	true \| false	true	Renders with role="none" and aria-hidden when true. Set to false for meaningful section boundaries; semantic separators require an explicit aria-label.
aria-label	string	—	Accessible name required for semantic separators. Visible children do not provide the separator name.
children	ReactNode	✦	Optional label text rendered between the rules. Only shown when variant="spaced".

Accessibility

Notes

Spaced Variant

The spaced variant renders a centered label between two rules with margin. Pass children to customize the label; defaults to ✦ when no children are provided. The label renders at full muted-foreground contrast (only the rules are dimmed) and is uppercase and tracked so divider labels share the SectionHeader vocabulary. The default variant is a simple line.

Vertical Orientation

Set orientation="vertical" to render a vertical separator. Works with both default and spaced variants. The parent must define a height for the divider to fill.

Decorative vs Semantic

By default, decorative is true — the divider renders with role="none" so screen readers skip it, including a spaced label such as "or", which is presentational reinforcement of a choice the surrounding controls already express. Set decorative={false} when the separator marks a real structural boundary between distinct page sections, and provide an explicit aria-label. Visible children do not name a separator.

Source

Install via CLI: pnpm exec dgadd add ui/divider.

Highlighted source loads after this disclosure opens. Browse the source repository.

Divider

Installation

Usage

Examples

Variants

Custom Label

Vertical (plain and spaced)

Semantic (non-decorative)

API Reference

Divider

Accessibility

Notes

Spaced Variant

Vertical Orientation

Decorative vs Semantic

Source

View component source (6 files)