Separator

Installation

npx bearnie add separator

import Separator from "@/components/ui/separator/Separator.astro";

Usage

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

<Separator />

Examples

Horizontal

Above separator

Below separator

<div class="w-full max-w-md">
<p class="text-sm">Above separator</p>
<Separator class="my-4" />
<p class="text-sm">Below separator</p>
</div>

Vertical

Blog

Docs

Source

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

Anatomy

Separator - A single divider element

Props

Prop	Type	Default	Description
orientation	horizontal \| vertical	horizontal	Divider direction
decorative	boolean	true	If false, adds separator role
class	string	-	Additional CSS classes