1. Components
  2. divider

Divider

Visual separator for grouping or distinguishing content blocks.

Demo 

<div class="flex flex-col gap-4 w-full">
    <x-ui.divider class="border-primary"/>
    <x-ui.divider class="border-secondary"/>
    <x-ui.divider class="border-danger"/>
    <x-ui.divider class="border-gray"/>
</div>

Installation

Shell 
flexi-cli add divider

With label

Label Start
Label Center
Label End
Label Center 
<div class="flex flex-col gap-4 w-full">
    <x-ui.divider label="Label Start" class="before:bg-bg-muted" label-class="pr-3 bg-bg text-fg relative"/>
    <x-ui.divider label="Label Center" class="before:bg-bg-muted" label-placement="middle" label-class="px-3 bg-bg text-fg relative"/>
    <x-ui.divider label="Label End" class="before:bg-bg-muted" label-placement="end" label-class="pl-3 bg-bg text-fg relative"/>
    <x-ui.divider label="Label Center" class="before:bg-bg-muted" label-placement="middle" label-class="px-3 bg-emerald-600 dark:bg-emerald-500 text-sm text-white rounded-full py-px relative"/>
</div>
Prev
Aspect Ratio

Utility component to...

Next
On this page