Marquee

잠시 멈출 수 있는 짧은 레이블이나 로고의 반복 정보 띠에 사용합니다.

미리보기

지원 기술 목록

지역화한 움직임 제어 버튼과 함께 기술 이름을 반복해서 표시합니다.

접근성Base UIReact 19Tailwind 4

미리보기를 불러오는 중입니다.

설치

Registry를 처음 사용한다면 기본 설정과 공통 스타일 설치 을 먼저 완료하세요.

npx shadcn@latest add @neumorphism-ui/marquee

공통 base를 한 번 설치한 뒤 CLI로 필요한 컴포넌트와 의존성을 추가합니다.

Registry JSON

사용법

항목과 영역 이름, 일시 정지·재시작 버튼의 이름을 전달하세요. 필수 정보는 다른 곳에서도 확인할 수 있게 하고 기본 동작의 모션 감소 설정을 존중합니다.

"use client";

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

export default function Example() {
  return <Marquee items={["React", "Base UI", "Tailwind CSS"]} label="Supported technologies" />;
}

API 레퍼런스

동일한 항목을 두 번 배치해 연속 흐름을 만들되 두 번째 복사본은 aria-hidden으로 제거합니다. 사용자는 Pause/Resume 버튼으로 움직임을 멈출 수 있고 prefers-reduced-motion에서는 애니메이션이 자동으로 정지됩니다.

컴포넌트	속성	타입	기본값	설명
`Marquee`	`items`필수	`readonly ReactNode[]`	`—`	순환해서 보여줄 항목 목록입니다.
`Marquee`	`duration`	`number`	`24`	한 주기의 애니메이션 시간을 초 단위로 지정합니다.
`Marquee`	`defaultPaused`	`boolean`	`false`	처음부터 정지된 상태로 시작할지 지정합니다.
`Marquee`	`label`	`string`	`"Scrolling content"`	반복 정보 영역의 접근 가능한 이름입니다.
`Marquee`	`pauseLabel / resumeLabel`	`string`	`—`	동작 제어 버튼의 접근 가능한 이름을 지역화합니다.