Separator
コンテンツの区切りを視覚的に示す線。セクション間・メニュー項目間・ヘッダーとコンテンツの間など、論理的なまとまりを分けるときに使う。
インストール
npx shoji add separator
プレビュー
Orientations
水平（horizontal）
shadcn UI — JP コンポーネントライブラリ
セクションの区切りに使う
垂直（vertical）
ブログドキュメント料金
パターン
With Label
「または」「OR」などのラベルを中央に挟む区切り線。ログイン画面の SNS ログインとメール入力の間に使う定番パターン。
separatorloginOR-divider
または
使い方
こんなときに使う
- 関連するコンテンツのグループを視覚的に区切るとき
- ドロップダウンメニューのグループ間区切り
- 垂直方向の区切り（ナビゲーション・ステータスバーなど）
使わないほうがいい場面
- 単なる余白の代わりに使う（margin/padding で十分な場合が多い）
- 連続して複数の Separator を並べる
JP 最適化のポイント
- 装飾目的の場合は role="none" を指定 — スクリーンリーダーが不要な区切り線を読み飛ばせる