Separator

Visually or semantically separates content.

Cubix

Beautifully designed components you can copy and paste into your apps.

Blog

Docs

Source

<div>
  <div className="space-y-1">
    <h4 className="text-sm leading-none font-medium">Cubix</h4>
    <p className="text-sm text-muted-foreground">
      Beautifully designed components you can copy and paste into your apps.
    </p>
  </div>
  <Separator className="my-4" />
  <div className="flex h-5 items-center space-x-4 text-sm">
    <div>Blog</div>
    <Separator orientation="vertical" />
    <div>Docs</div>
    <Separator orientation="vertical" />
    <div>Source</div>
  </div>
</div>

Installation

pnpm dlx cubix@latest add separator --base radix

Usage

Import

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

Example

<Separator />

Vertical

Use orientation="vertical" for a vertical separator.

Blog

Docs

Source

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

<div className="flex items-center gap-2 text-sm md:gap-4">
  <div className="flex flex-col gap-1">
    <span className="font-medium">Settings</span>
    <span className="text-xs text-muted-foreground">
      Manage preferences
    </span>
  </div>
  <Separator orientation="vertical" />
  <div className="flex flex-col gap-1">
    <span className="font-medium">Account</span>
    <span className="text-xs text-muted-foreground">
      Profile & security
    </span>
  </div>
  <Separator orientation="vertical" />
  <div className="flex flex-col gap-1">
    <span className="font-medium">Help</span>
    <span className="text-xs text-muted-foreground">Support & docs</span>
  </div>
</div>

List

Horizontal separators between list items.

Item 1: Value 1

Item 2: Value 2

Item 3: Value 3

<div className="flex flex-col gap-2 text-sm">
  <dl className="flex items-center justify-between">
    <dt>Item 1</dt>
    <dd className="text-muted-foreground">Value 1</dd>
  </dl>
  <Separator />
  <dl className="flex items-center justify-between">
    <dt>Item 2</dt>
    <dd className="text-muted-foreground">Value 2</dd>
  </dl>
  <Separator />
  <dl className="flex items-center justify-between">
    <dt>Item 3</dt>
    <dd className="text-muted-foreground">Value 3</dd>
  </dl>
</div>

API Reference

See also the Base UI Separator documentation for primitive props.

Separator

Prop	Type	Default	Description
orientation	"horizontal" \| "vertical"	"horizontal"	The orientation of the separator.
decorative	boolean	true	When true, the separator is purely visual and hidden from assistive tech (Radix UI).
className	string	-	Additional Tailwind classes merged with the component styles (last one wins).

Cubix

Installation

Usage

Vertical

Menu

List

API Reference

Separator