Separator

コンテンツを視覚的に区切るための区切り線コンポーネント。

Installation

npx shadcn@latest add https://kasumi-ui.vercel.app/r/separator.json

Usage

上のコンテンツ

下のコンテンツ

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

<Separator />

Horizontal

<Separator />

Vertical

項目A項目B項目C
<div className="flex items-center gap-4 h-6">
<span>項目A</span>
<Separator orientation="vertical" />
<span>項目B</span>
<Separator orientation="vertical" />
<span>項目C</span>
</div>

Props

PropTypeDefaultDescription
orientation"horizontal" | "vertical""horizontal"区切り線の方向