Separator

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

export default function SeparatorDemo() {
  return (
    <div className="w-72">
      <div className="flex flex-col gap-1">
        <h4 className="text-sm font-medium">Account settings</h4>
        <p className="text-muted-foreground text-sm">
          Manage your profile and preferences.
        </p>
      </div>
      <Separator orientation="horizontal" className="my-4" />
      <div className="flex h-5 items-center gap-4 text-sm">
        <span>Profile</span>
        <Separator orientation="vertical" />
        <span>Billing</span>
        <Separator orientation="vertical" />
        <span>Security</span>
      </div>
    </div>
  )
}

Separator wraps the separator primitive of the chosen base. It draws a 1px line in the border color: full width when horizontal, and stretched to the container's height when vertical.

Use it between groups of content or between inline items. Inside menus and selects, use the dedicated separator part of that component instead.

Installation

CLI

$ pnpm dlx shadcn@latest add @esuiss/separator

Works in any project with a components.json. See Installation for the one-line registry setup. Or use the suiss/ui CLI:

$ pnpm dlx @esuiss/ui@latest add separator

Manual

1. Install the dependencies and add the cn helper:

$ pnpm add @base-ui/react

2. Copy the source into components/ui/separator.tsx:

3. Update the import paths to match your project.

Usage

import { Separator } 

<div

orientation defaults to horizontal. Set orientation="vertical" inside a flex row; the line stretches to the row's height, so give the row a height.

Examples

Horizontal

Divides two stacked lines of text.

Vertical

Divides inline links in a row.

API Reference

Accessibility

• Renders with the separator role and an aria-orientation that matches orientation.

Notes

• Uses data-slot="separator", and the primitive's orientation attributes set its size.
• The color comes from the bg-border token.

Separator is a View drawn as a one-pixel line. Horizontal separators fill the width of their container; vertical separators stretch to the height of a row.

Installation

$ pnpm dlx shadcn@latest add @esuiss-rn/separator

$ pnpm dlx @esuiss/ui@latest add separator

$ pnpm dlx @esuiss/ui@latest add separator --platform swift