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

Marquee

連続表示のため項目を視覚的に複製しますが、2つ目は aria-hidden で支援技術から除外します。Pause/Resume で停止でき、prefers-reduced-motion では自動的にアニメーションを止めます。

@neumorphism-ui/marquee

Registry JSON

プレビュー

アクセシビリティBase UIReact 19Tailwind 4

インストール

npx shadcn@latest add @neumorphism-ui/marquee

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

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

使い方

Import

"use client";
import { Marquee } from "@/components/ui/marquee";

Example

export default function Example() {
  return <Marquee items={["アクセシビリティ", "Base UI", "React 19", "Tailwind 4"]} label="対応技術" pauseLabel="アニメーションを一時停止" resumeLabel="アニメーションを再開" />;
}

API リファレンス

コンポーネント	プロパティ	型	デフォルト	説明
`Marquee`	`items`必須	`readonly ReactNode[]`	`—`	繰り返し表示する項目一覧です。
`Marquee`	`duration`	`number`	`24`	1周期の秒数を指定します。
`Marquee`	`defaultPaused`	`boolean`	`false`	最初から停止状態で開始します。
`Marquee`	`label`	`string`	`"Scrolling content"`	繰り返し情報領域のアクセシブル名です。
`Marquee`	`pauseLabel / resumeLabel`	`string`	`—`	動作制御ボタンのアクセシブル名をローカライズします。