Separator

Installation

npx bearnie add separator

Usage

import { Separator } from "@/components/bearnie/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