Content & display

Divider / Separator

Q: How do people describe a Divider / Separator in plain words?

the thin line between two sections a hairline that splits groups in a menu that “or” line between login options

Q: How do I implement a Divider / Separator?

Use only for real thematic breaks. Pure layout separation uses border-bottom. Menu groups get role="separator". Labeled “or” dividers are fine on auth screens. Keep rules 1px and low contrast.

A thin rule that is either a real thematic break or pure decoration—know which.

Also known as horizontal rule · separator line · section rule

Demo · not production-ready code

Prompt for AI

Pick a stack, copy a ready prompt, paste into Cursor / Claude / ChatGPT.

Your stack

Shapes the prompt you copy

React + Tailwind + shadcn/ui · EN

Stack: React + Tailwind + shadcn/ui. Use React with Tailwind CSS and shadcn/ui patterns (Radix-based primitives, cn(), class-first styling).

Task: implement "Divider / Separator".

Use <hr> only for real thematic breaks. Pure layout separation uses border-bottom. Menu groups get role="separator". Labeled “or” dividers are fine on auth screens. Keep rules 1px and low contrast.

Anatomy:
- thematic break: <hr>—topic actually changes; AT announces it.
- separator: Menu groups: role="separator".
- decorative rule: Visual only—use border, not a forest of <hr>.
- labeled divider: “or” between Sign in with Google and email.

Preferred API / pattern: `shadcn Separator / plain borders`

Keep scope minimal: only this UI pattern, match existing project style.

Acceptance checks

○Avoid: Decorative <hr> spam
○Avoid: Menu groups without role="separator"
○Avoid: Vertical rule as <hr>
○Avoid: Heavy dark rules

In plain wordsHow people search for it

“the thin line between two sections”“a hairline that splits groups in a menu”“that “or” line between login options”

AnatomyOpen for part names

thematic break: <hr>—topic actually changes; AT announces it.
separator: Menu groups: role="separator".
decorative rule: Visual only—use border, not a forest of <hr>.
labeled divider: “or” between Sign in with Google and email.

How to write itOpen for stack patterns

Web (HTML/CSS)<hr> / role="separator" / border utilities

React + Tailwind + shadcn/uishadcn Separator / plain borders

SwiftUIDivider()

Ant Design<Divider>or</Divider> / type="vertical"

Notes

Same line, three jobs. <hr> is a thematic break, not a paintbrush—screen readers announce every one. Decorative gaps belong on borders. Vertical menu rules need role="separator" aria-orientation="vertical". Keep weight light (1px muted) or the layout fragments.

Common mistakesHumans and models trip here

Decorative <hr> spam: AT reads “separator” all the way down.
Menu groups without role="separator": structure lost to AT.
Vertical rule as <hr>: wrong semantics—set orientation or use a span separator.
Heavy dark rules: they chop the page into slabs.

More failure symptoms on AI broke it.

Related patterns

Dropdown MenuA compact menu of actions or options revealed from a trigger control.Accordion / CollapseStacked headers that expand and collapse to show nested content.CardA contained surface grouping related content and actions as one unit.

Spotted a wrong name or missing pattern?

Message on X