データとフィードバック@neumorphism-ui/scroll-area

Scroll Area

overflow-auto と native scrollbar を使用し、wheel、touch、keyboard、ブラウザー標準のアクセシビリティ動作を維持します。ScrollBar export は shadcn の組み合わせ互換性のための非表示 placeholder です。

@neumorphism-ui/scroll-area

Registry JSON

プレビュー

NVDAアクセシビリティ準備完了

Dialogオーバーレイ準備完了

Data tableデータレビュー

Slider入力準備完了

Tooltipオーバーレイ準備完了

Calendar複合予定

Command複合予定

インストール

npx shadcn@latest add @neumorphism-ui/scroll-area

CLI が npm 依存関係、base token、utils、コンポーネントソースを順番に処理します。

この Registry を初めて使う場合は、先に namespace の設定を完了してください。

使い方

Import

import {
  ScrollArea,
  ScrollBar,
} from "@/components/ui/scroll-area"

Example

<ScrollArea
  className="h-64 p-4"
  tabIndex={0}
  aria-label="最近のアクティビティ"
>
  {activities.map((activity) => (
    <article key={activity.id}>{activity.title}</article>
  ))}
  <ScrollBar orientation="vertical" />
</ScrollArea>

API リファレンス

コンポーネント	プロパティ	型	デフォルト	説明
`ScrollArea`	`className`	`string`	`—`	高さまたは幅を制限して overflow 領域を作ります。
`ScrollArea`	`tabIndex`	`number`	`—`	focusable な子要素がない場合に、キーボードスクロールの入口を提供します。
`ScrollArea`	`aria-label / aria-labelledby`	`string`	`—`	独立して移動できる領域である場合にコンテンツ名を指定します。
`ScrollBar`	`orientation`	`"horizontal" \| "vertical"`	`"vertical"`	互換用 placeholder の向きを示す data 属性です。