Skip to content
Wave 2

Separator

A divider between groups of content.

  • Spacing alone: use gap.

Install

Terminal
pnpm dlx shadcn@latest add @acme/separator

Or import from the package: import { Separator } from '@acme/react'

Examples

Basic

Northwind Traders

Customer since 2021

InvoicesPaymentsNotes
separator-basic.tsx
import { Separator } from '@/components/ui/separator'

export default function SeparatorBasic() {
  return (
    <div className="flex max-w-sm flex-col gap-4 text-body-sm">
      <div>
        <p className="font-medium">Northwind Traders</p>
        <p className="text-muted-foreground">Customer since 2021</p>
      </div>
      <Separator />
      <div className="flex h-5 items-center gap-4">
        <span>Invoices</span>
        <Separator orientation="vertical" />
        <span>Payments</span>
        <Separator orientation="vertical" />
        <span>Notes</span>
      </div>
    </div>
  )
}

Props

Separator props
PropTypeDefaultDescription
orientation'horizontal' | 'vertical''horizontal'Direction.

Accessibility

Role
separator
Built in
  • Decorative: border color, no contrast minimum.
WCAG 2.2 criteria
1.3.1

Don’t

  • Stack separators to fake borders.

Tokens

  • color.border