ナビゲーションと開示@neumorphism-ui/carousel

Carousel

スクロール位置とドラッグは Embla Carousel に任せ、ニューモーフィズムはスライド表面と操作ボタンに限定します。先頭と末尾では前後ボタンが自動的に無効になります。

@neumorphism-ui/carousel

Registry JSON

プレビュー

ダッシュボード

設定

分析

インストール

npx shadcn@latest add @neumorphism-ui/carousel

CLI が npm 依存関係、base token、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`	`—`	1つのスライドの実コンテンツを配置します。
`CarouselPrevious / CarouselNext`	`label`	`string`	`—`	前後ボタンのアクセシブル名をローカライズします。

プレビュー

インストール

使い方

Import

Example

API リファレンス

アクセシビリティ