Separator

两部分内容之间的一道暗色细线，与分隔表格行、面板的线相同。

安装

terminal

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

示例

横向与竖向

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>  );}

行为

默认横向；设为 orientation="vertical" 后竖立在行内内容旁，高度与所在行一致。

属性

Separator

属性	类型	默认值	说明
orientation	"horizontal" \| "vertical"	"horizontal"	分隔线的方向。

另可传入 Base UI Separator 的全部属性。