UI components · Fundamentals
Divider
Also called: Separator, hr, Horizontal rule, Divider line
A thin horizontal or vertical line that separates two neighboring blocks of content, sometimes with a bit of small text in the middle.
Click “Labeled” to see what each part is called.
How to tell AI
Swap in your own content firstBelow the "Log in" button on the login form, add a divider with text: two 1px light gray lines on the left and right, the small gray word "or" in the middle, and 16px of space above and below. Under it, put "Continue with Google" and "Continue with GitHub" buttons side by side. In the table's actions column, separate "Edit" and "Delete" with a 12px-tall vertical divider.
Send to
01Decide
Does your content look like this?
Check both columns to confirm Divider is what you need.
Use Divider when
- Inside one card or form, you need to clearly separate two groups of content
- A few text links or actions sit side by side in one row and need a small separator
- A login page or similar needs "or" to separate two ways of signing in
Pick something else when
Blocks are already separated by enough whitespace or background color
Use insteadWhitespaceEvery item in a list needs separating; spacing or zebra stripes look cleaner
You need to show hierarchy or grouping; group headings are clearer than lines
Not sure? Upload a screenshot and page analysis will check which layout each block should use.
02Pitfalls
Common misuse
It looks like it works, but it makes things harder for users.
- 01
Drawing dividers above and below every block, so the page looks like a grid filled with boxes
- 02
Dividers so dark and thick they grab more attention than the content itself
- 03
Faking a divider with an empty div and a border, but forgetting the spacing, so the line touches the text
03Spot it
How to spot it
Look at the overall structure first, then check a few features you can spot at a glance.
Structure
A 1px horizontal or vertical line, optionally with a short label in the middle or at one end.
PartsClick one to highlight it in the wireframe above
04Explained
In detail
A divider is the simplest component: a 1px light gray line. Horizontal, it separates content above and below. Vertical, it separates a few text links in the same row (like "Edit | Delete"). It can also have text in the middle, most often the "—— or ——" on a login page, followed by third-party sign-in buttons. The native HTML <hr> is a divider, and shadcn/ui calls it Separator.
Too many dividers make a page look like a spreadsheet and feel cluttered. Often, spacing things out with Whitespace or telling blocks apart with a card background color is cleaner than drawing a line. The general rule: if spacing can separate it, skip the line. Use a divider only when two blocks sit close together and still need a clear boundary.
Developer infoTerm ID, DOM cues, match priority
- Term ID
component-divider- DOM selectors
The extension matches these CSS selectors when it inspects a page locally (tags, ARIA roles, common component library classes).
hr[role="separator"].ant-divider.el-divider[class*="MuiDivider-root"].arco-divider.t-divider.n-divider[data-slot="separator"].vr
- Priority
- 1 · when several match at the same level, the higher priority wins
- Version
- v2 · updated Sep 29, 2026