Separator

A visual divider to separate content sections.

Installation

pnpm dlx brutx@latest add separator

Basic Usage

Content above separator

Content below separator

import { Separator } from "@/components/ui/separator"

<p>Content above separator</p>
<Separator />
<p>Content below separator</p>

Horizontal Separator

Section 1

Some content for section 1.

Section 2

Some content for section 2.

Section 3

Some content for section 3.

<Separator orientation="horizontal" />

Vertical Separator

Item 1
Item 2
Item 3
<div className="flex items-center h-12 gap-4">
  <span>Item 1</span>
  <Separator orientation="vertical" />
  <span>Item 2</span>
  <Separator orientation="vertical" />
  <span>Item 3</span>
</div>

Custom Styling

<Separator className="bg-[#FF6B6B]" />
<Separator className="bg-[#4ECDC4]" />
<Separator className="bg-[#FFE66D]" />