Carousel

Browse a row of slides by dragging, flicking, or arrowing through them.

$npx shadcn@latest add @silicon-ui/carousel

carouselslidergallery

Installation

$npx shadcn@latest add @silicon-ui/carousel

Install the dependencies.
$npm install lucide-react motion
Copy these files into your project. Shared files are skipped if you already have them.
- components/silicon-ui/carousel/carousel.tsx
- components/silicon-ui/carousel/carousel.module.css
Install the foundation once per app for the design and motion tokens: $npx shadcn@latest add @silicon-ui/silicon-foundation

Source codetsx

import { Carousel } from "@/components/silicon-ui/carousel/carousel";

Prop	Type	Default
`label*` Names the carousel for assistive technology, for example "From the Harbour suites".	`string`	—
`children*` One child per slide.	`ReactNode`	—
`index` Controlled active slide. Pair with `onIndexChange`.	`number`	—
`defaultIndex`	`number`	`0`
`onIndexChange`	`(index: number) => void`	—
`slideSize` Width of one slide as a CSS length. Use `cqw` for a share of the carousel width.	`string`	`"min(80cqw, 340px)"`
`slideLabel` Names each slide and its indicator. Defaults to "2 of 5".	`(index: number, count: number) => string`	`defaultSlideLabel`
`interval` Milliseconds per slide. Adds a play control that rotates through the slides; rotation pauses on hover, keyboard focus, and drag, and is unavailable with reduced motion.	`number`	—
`autoplay` Starts rotating on mount. Off by default, so motion begins with the viewer.	`boolean`	`false`
`className`	`string`	—