Usage

Use a hairline to group peers. Prefer horizontal in stacks; set orientation="vertical" in toolbars. No motion.

tsx

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

<div className="flex w-full max-w-xs flex-col gap-3">
  <p className="text-sm">Above</p>
  <Separator />
  <p className="text-sm text-muted-foreground">Below</p>
</div>

Primitive · CLI

Separator

Soft-rect hairline divider — static, no decorative motion.

Preview

npx shadcn@latest add @atroui/separator

Section A

Section B — hairline only.

Left

Right

Installation

Agent blurb — install command + no npm UI rule. For agents

npx shadcn@latest add @atroui/separator

Source lands in your repo. Installation · Registry

Usage

Use a hairline to group peers. Prefer horizontal in stacks; set orientation="vertical" in toolbars. No motion.

tsx

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

<div className="flex w-full max-w-xs flex-col gap-3">
  <p className="text-sm">Above</p>
  <Separator />
  <p className="text-sm text-muted-foreground">Below</p>
</div>

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

<div className="flex w-full max-w-xs flex-col gap-3">
  <p className="text-sm">Above</p>
  <Separator />
  <p className="text-sm text-muted-foreground">Below</p>
</div>