Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/yogendrarana/craftdotui/llms.txt

Use this file to discover all available pages before exploring further.

The Separator component provides a visual divider between content sections.

​
Installation

import { Separator } from "@craftdotui/baseui/components/separator";

​
Usage

<Separator />

​
Props

​
orientation
string
default:"horizontal"
Orientation of the separator.Options: horizontal, vertical
​
className
string
Additional CSS classes.

​
Examples

​
Horizontal Separator

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

​
Vertical Separator

<div className="flex items-center">
  <span>Left</span>
  <Separator orientation="vertical" />
  <span>Right</span>
</div>

​
In a Menu

<div className="space-y-1">
  <div>Menu Item 1</div>
  <div>Menu Item 2</div>
  <Separator />
  <div>Menu Item 3</div>
  <div>Menu Item 4</div>
</div>

​
Custom Styling

<Separator className="bg-primary" />

​
Accessibility

  • Built on @base-ui/react Separator primitive
  • Proper semantic role=“separator”
  • Orientation communicated to screen readers
  • Default margins for spacing