Separator

Thin horizontal or vertical divider line on Radix Separator.

Installation

pnpm dlx shadcn@latest add @ward/separator

Add the Ward registry to components.json once:

"registries": {
  "@ward": "https://ward.so/r/{name}.json"
}

Or install from the URL with no configuration: npx shadcn@latest add https://ward.so/r/separator.json

Usage

import { Separator } from "@/components/ui/separator";
<div className="flex h-5 items-center gap-3 text-sm">
  <span>Docs</span>
  <Separator orientation="vertical" />
  <span>Source</span>
</div>

Props

PropTypeDefaultDescription
orientation"horizontal" | "vertical""horizontal"Direction of the line; a vertical one fills the height of its parent.
decorativebooleantrueHide the line from assistive technology; set false when it separates content that has meaning.

Ward · Version 1.0.0 · Registry manifest