区切り線SeparatorBeta

コンテンツを視覚的・意味的に区切ります。

プレビュー

公開設定

公開前に内容を確認してください。

状態とバリエーション

垂直

ツールバーやメタ情報の短い区切りには vertical を使います。

下書き
最終更新 5分前

プロパティ

表は横にスクロールできます
プロパティ型初期値説明
orientation"horizontal" | "vertical""horizontal"区切り線の向きです。
classNamestring-horizontal は親幅いっぱいに広がります。長さは外側の max-w-* や className で制約します。

使い方

import { Separator } from "@gunjo/ui";

export function Example() {
  return (
    <div className="space-y-3">
      <p className="text-sm font-medium">公開設定</p>
      <Separator />
      <p className="text-sm text-muted-foreground">公開前に内容を確認してください。</p>
    </div>
  );
}

使用コンポーネント

Separator

関連コンポーネント

SpacerCardTable

設計の判断（UIXHERO）

「いつ・なぜ使うか」の判断は、姉妹サイト UIXHERO の記事で解説しています。

UIコンポーネント: Separatorゲシュタルト原則 (Gestalt Principles)