Separator

A visual divider between content sections.

Usage

<script setup>
import { Separator } from '~/components/ui/separator'
</script>

<template>
  <Separator />
</template>

Horizontal

The default orientation is horizontal:

<div>
  <p>Content above</p>
  <Separator class="my-4" />
  <p>Content below</p>
</div>

Vertical

Use orientation="vertical" for vertical separators:

<div class="flex h-5 items-center space-x-4 text-sm">
  <span>Blog</span>
  <Separator orientation="vertical" />
  <span>Docs</span>
  <Separator orientation="vertical" />
  <span>Source</span>
</div>

Props

Prop	Type	Default	Description
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Orientation of the separator
`decorative`	`boolean`	`true`	Whether the separator is decorative

Styling

Customize the separator with Tailwind classes:

<Separator class="my-8 bg-primary/20" />