Skip to content

Separator

A 1px line. Decorative by default; pass decorative={false} when it separates groups assistive tech should know about.

Sourcecomponents/separator.tsx

Account

Billing

Usage

Separator usage
import { Separator } from "@/components/separator";
export function SeparatorUsage() {  return (    <div className="flex flex-col gap-4">      <p>Account</p>      <Separator />      <p>Billing</p>    </div>  );}

When to use

Use when

A line between groups; decorative by default, decorative={false} in toolbars and menus

Don’t use when

Spacing alone would do; borders on every list item