Layout

Separator

A 1px hairline that divides content inside a container, horizontally or vertically.

npx prodular-ui add separator

Horizontal and vertical

Horizontal between sections, vertical between inline metadata.

Halden Analytics

Workspace on the Team plan, billed annually.

18 members

EU region

Created Mar 2024

import { Separator } from "@/components/ui/separator"
export default function SeparatorDefault() {  return (    <div className="flex w-full max-w-sm flex-col gap-4">      <div className="flex flex-col gap-1">        <h4 className="text-sm font-medium">Halden Analytics</h4>        <p className="text-sm text-muted-foreground">Workspace on the Team plan, billed annually.</p>      </div>      <Separator />      <div className="flex h-5 items-center gap-3 text-[13px] text-muted-foreground">        <span>18 members</span>        <Separator orientation="vertical" />        <span>EU region</span>        <Separator orientation="vertical" />        <span>Created Mar 2024</span>      </div>    </div>  )}

Anatomy

<Separator /><Separator orientation="vertical" />

Guidance

Use it when

Splitting sections inside a card, popover or panel instead of adding another box.
Dividing inline metadata such as counts and dates.

Avoid

Separators between every element. Spacing alone often groups better.
Thicker or colored rules. Hierarchy comes from type and spacing.

Rules for AI agents

Published in llms-full.txt and the registry, so coding agents follow them when they build with this component.

Prefer divide-y or border-t on a list over many Separator elements.
For a vertical Separator, give the parent a fixed height (h-4 or h-5) and items-center.
Separator is decorative by default. Do not use it to convey meaning.

API

Separator

Prop	Type	Default	Description
orientation	"horizontal" \| "vertical"	"horizontal"	Direction of the line.