Separator

A visual divider between sections of content, rendered as a thin line.

<.separator></.separator>

Examples

Orientations

Horizontal (default) and vertical separators.

Horizontal

Left

Right

<div class="space-y-4">
  <div>
    <p class="text-sm text-muted-foreground mb-2">Horizontal</p>
    <.separator orientation="horizontal" />
  </div>
  <div class="flex items-center h-6">
    <span class="text-sm text-muted-foreground">Left</span>
    <.separator orientation="vertical" class="mx-4" />
    <span class="text-sm text-muted-foreground">Right</span>
  </div>
</div>

Show code

In context

Separator used to divide sections within a card-like container.

Radix Primitives

An open-source UI component library.

Blog

Docs

Source

<div class="w-full max-w-sm space-y-1">
  <p class="text-sm font-medium">Radix Primitives</p>
  <p class="text-sm text-muted-foreground">An open-source UI component library.</p>
  <.separator class="my-3" />
  <div class="flex items-center gap-4 text-sm">
    <span>Blog</span>
    <.separator orientation="vertical" class="h-4" />
    <span>Docs</span>
    <.separator orientation="vertical" class="h-4" />
    <span>Source</span>
  </div>
</div>

Show code

Props

Name	Type	Default	Values
class	:string
decorative	:boolean	true
orientation	:string	"horizontal"	horizontal \| vertical
rest	:global