Divider
@xui/dividerA rule separating two groups of content.
Install
pnpm add @xui/divider Add the barrel to a standalone component's imports:
import { XuiDividerImports } from '@xui/divider';@Component({ imports: [XuiDividerImports], // …})Examples
Default
Loading preview…
<div class="max-w-sm"> <p>Above the rule</p> <div xuiDivider orientation="horizontal" [compact]="false"></div> <p>Below the rule</p></div>Vertical
Loading preview…
<div class="flex items-center"> <span>Left</span> <div xuiDivider orientation="vertical" [compact]="false"></div> <span>Middle</span> <div xuiDivider orientation="vertical" [compact]="false"></div> <span>Right</span></div>Compact
Loading preview…
<div class="max-w-sm"> <p>Spaced</p> <div xuiDivider></div> <p>Spaced</p> <div class="mt-6 border-border rounded-lg border"> <p class="p-2">Flush</p> <div xuiDivider compact></div> <p class="p-2">Flush</p> </div></div>API
A rule separating two groups of content.
Variants
orientationhorizontalcompactfalseInputs
classClassValueThe user-defined classes. Merged last so they win over the variant classes.''orientationNonNullable<XuiDividerVariants['orientation']>Which way the rule runs. A vertical divider needs a height from its container — it has none of its own.'horizontal'compactbooleanDrop the surrounding margin so the divider sits flush with its neighbours.false