Separator

A quiet line between two things, the same line that divides rows and panels.

Install

terminal

# once per project: where @zeroui items come frompnpm dlx shadcn@latest registry add @zeroui=https://zeroui.catforest.dev/r/{name}.jsonpnpm dlx shadcn@latest add @zeroui/separator

Examples

Across and upright

Sealed crate

Rail yards → North gate

3,100 cr

Rush

East district

separator-basic.tsx

import { Separator } from "@/components/zero/separator";export default function SeparatorBasic() {  return (    <div className="grid w-full max-w-sm gap-4 font-medium font-zero-text text-zero-sm">      <div>        <div className="font-black font-zero text-zero-md italic">          Sealed crate        </div>        <div className="text-zero-text-2">Rail yards → North gate</div>      </div>      <Separator />      <div className="flex h-5 items-center gap-4 text-zero-text-2">        <span>3,100 cr</span>        <Separator orientation="vertical" />        <span>Rush</span>        <Separator orientation="vertical" />        <span>East district</span>      </div>    </div>  );}

Behaviour

Horizontal by default; orientation="vertical" stands it up beside inline content, as tall as the row.

Props

Separator

Prop	Type	Default	Description
orientation	"horizontal" \| "vertical"	"horizontal"	Which way it runs.

Also takes every prop of Base UI's Separator.