Separator
Clean and consistent visual separators for content sections.
<ui-separator text="vs" />
Variants#
Separators come in two styles. Use them to match the aesthetic of your interface.
<div class="flex flex-col w-full">
<ui-separator text="Line Separator (Default)" />
<ui-separator variant="dots" text="Dotted Separator" />
</div>
Text#
Add text to your separator with the text prop.
<ui-separator text="Breaker High" />
Vertical#
Use the vertical prop to create a vertical separator.
Left Content
Right Content
<div class="flex items-center h-6 space-x-4">
<div>Left Content</div>
<ui-separator vertical />
<div>Right Content</div>
</div>
