container · Normal DOM only

Divider

Thin line between sections — horizontal or vertical, with optional label.

Use Divider to break long content into scannable sections (settings page, dropdown groups). For card grouping prefer separate Cards instead.

Inside a Twenty front-component, prefer the bridge import
This Divider is Radix-based and uses data-* selectors that the Twenty Remote DOM bridge strips. For panel content, import { HorizontalSeparator } from @8maverik8/twenty-design/twenty-ui — re-exports the same primitive from twenty-sdk/ui, which Twenty has verified inside front-component'ов.

Twenty's name for what we call Divider.

Install

Pull from the workspace packages (already available if you ran pnpm add):

ts
import { Divider } from '@8maverik8/twenty-design';

Examples

Horizontal · with label · vertical

OR
left
middle
right
tsx
<Divider />
<Divider label="OR" />
<Divider orientation="vertical" />

Guidelines

✓
Use label="OR" between auth options.Reads better than a bare line when the user is choosing between methods.
✕
Use multiple Dividers in a row.A second Divider just adds visual weight without grouping content.