Neumorphism UI

Separator

関連するコンテンツや操作のまとまりの境界を示す場合に使います。

プレビュー

横と縦の区切り

文書の紹介とリンクを横線で分け、プレビュー・インストール・API のリンクを縦線で区切ります。

コンポーネントの説明使用例、インストール手順、プロパティを確認できます。
プレビューインストールAPI

インストール

この Registry を初めて使う場合は、先に 基本設定と共通スタイルの導入 を完了してください。

npx shadcn@latest add @neumorphism-ui/separator

共有 base を一度導入した後、CLI でコンポーネントと依存関係を追加します。

Registry JSON

使い方

グループの間に配置し、横または縦の方向を選びます。区切りを読み上げる必要がある場合だけ decorative を false にします。

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

export default function Example() {
  return (
    <div>
      <p>Profile settings</p>
      <Separator className="my-4" />
      <p>Notification settings</p>
    </div>
  );
}

API リファレンス

水平・垂直の orientation に対応し、既定では装飾要素として扱われます。意味のある section 境界には decorative=false を設定し、separator role と aria-orientation を公開できます。

コンポーネントプロパティ型デフォルト説明
Separatororientation"horizontal" | "vertical""horizontal"divider の向きと size スタイルを設定します。
Separatordecorativebooleantruetrue の場合は装飾要素として隠し、false の場合は role=separator を適用します。
SeparatorclassNamestring—余白、長さ、minimum-height のスタイルを拡張します。

アクセシビリティ

  • 01

    純粋に視覚的な境界には、既定の decorative=true を維持してください。

  • 02

    文書構造上の意味を持つ境界には decorative=false を使用し、role=separator を公開してください。

  • 03

    垂直 separator には親要素からの高さ、または className による明示的な高さが必要です。