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