Separator

A separator is a thin rule that divides content into groups. Use it between list items, toolbar sections, or stacked cards. Set orientation="vertical" to divide items in a row.

Preview

Installation

npx shadcn@latest add @cubby-ui/separator

Usage

import { Separator } from "@/components/ui/cubby-ui/separator";

<Separator />

Examples

Variants

Use variant to set the line's thickness and style.

Vertical

Set orientation="vertical" to divide items laid out in a row.

API Reference

The Separator component is built on top of Base UI's Separator. All Base UI props are supported. The documentation below only covers custom props specific to our implementation.

For the complete Base UI API, see the Base UI Separator documentation.

Custom Props

Separator