Separator

A Tailwind CSS separator component for visually dividing content.

Starting Point UI

A Tailwind CSS component library.

Blog

Docs

Source

<div class="space-y-4">
  <div>
    <h4 class="text-sm font-medium">Starting Point UI</h4>
    <p class="text-sm text-muted-foreground mt-2">
      A Tailwind CSS component library.
    </p>
  </div>
  <div class="separator"></div>
  <div class="flex h-5 items-center gap-4 text-sm">
    <div>Blog</div>
    <div class="separator separator-vertical"></div>
    <div>Docs</div>
    <div class="separator separator-vertical"></div>
    <div>Source</div>
  </div>
</div>

Horizontal

Separators are horizontal by default.

Above the separator

Below the separator

<div class="space-y-4">
  <p class="text-sm">Above the separator</p>
  <div class="separator"></div>
  <p class="text-sm">Below the separator</p>
</div>

Vertical

Use separator-vertical to create a vertical divider between inline elements.

Home

About

Contact

<div class="flex h-5 items-center gap-4 text-sm">
  <div>Home</div>
  <div class="separator separator-vertical"></div>
  <div>About</div>
  <div class="separator separator-vertical"></div>
  <div>Contact</div>
</div>

How it works

The separator component is a CSS-only component for visually dividing content.

Structure

A separator uses the .separator class. It defaults to horizontal:

<div class="separator"></div>
<div class="separator separator-vertical"></div>

Class reference

All available classes for the separator component.

Class	Description
`separator`	Base styles, defaults to horizontal
`separator-horizontal`	Makes the separator horizontal
`separator-vertical`	Makes the separator vertical

<div class="separator"></div>
<div class="separator separator-vertical"></div>