탐색과 공개@neumorphism-ui/carousel

Carousel

Embla Carousel의 스크롤 위치와 drag 동작을 그대로 사용하고 각 slide의 콘텐츠 표면만 뉴모피즘으로 구성합니다. 이전·다음 버튼은 현재 위치에 따라 자동으로 비활성화됩니다.

@neumorphism-ui/carousel

Registry JSON

미리보기

대시보드

설정

분석

설치

npx shadcn@latest add @neumorphism-ui/carousel

CLI가 npm 의존성, base 토큰, utils와 컴포넌트 소스를 순서대로 확인하고 설치합니다.

Registry를 처음 사용한다면 namespace 설정 을 먼저 완료하세요.

사용법

Import

"use client";
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/components/ui/carousel";

Example

export default function Example() {
  return <Carousel aria-label="기능 둘러보기" className="w-full max-w-md px-12">
    <CarouselContent>
      {["대시보드", "설정", "분석"].map((item) => <CarouselItem key={item}><div className="grid h-40 place-items-center rounded-[var(--neu-radius-surface)] border border-[var(--neu-edge)] bg-[var(--neu-surface)] [box-shadow:var(--neu-shadow-raised-sm)]">{item}</div></CarouselItem>)}
    </CarouselContent>
    <CarouselPrevious label="이전 슬라이드" />
    <CarouselNext label="다음 슬라이드" />
  </Carousel>;
}

API 레퍼런스

컴포넌트	속성	타입	기본값	설명
`Carousel`	`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	스크롤 축과 방향키 동작을 지정합니다.
`Carousel`	`opts`	`EmblaOptionsType`	`—`	loop, align 등 Embla 옵션을 전달합니다.
`Carousel`	`setApi`	`(api: CarouselApi) => void`	`—`	외부에서 Embla API를 사용할 때 인스턴스를 전달받습니다.
`CarouselItem`	`children`	`ReactNode`	`—`	한 개 slide의 실제 콘텐츠를 배치합니다.
`CarouselPrevious / CarouselNext`	`label`	`string`	`—`	버튼의 접근 가능한 이름을 지역화합니다.

미리보기

설치

사용법

Import

Example

API 레퍼런스

접근성