Shadcn/UI is a component library built on Tailwind CSS and Radix UI primitives. Unlike traditional libraries, you copy components directly into your project, giving you full control over styling and behavior.

How do I install Shadcn/UI components?

Use the shadcn CLI to add components: npx shadcn@latest add [component-name]. This copies the component files directly into your project.

Can I customize Shadcn/UI components?

Yes, since components are copied into your project, you have complete control. Modify styling, add props, or change behavior as needed.

Is Shadcn/UI free to use?

Yes, Shadcn/UI is completely free and open-source. Components are MIT licensed and you can use them in any project, including commercial ones.

Carousel Component - shadcn/ui Examples

About the shadcn/ui Carousel Component

The Carousel component is part of shadcn/ui — a collection of accessible, copy-paste React components built with Radix UI and Tailwind CSS. Install it with `npx shadcn@latest add carousel` and copy it directly into your project.

Carousel Component — Frequently Asked Questions

How do I add autoplay to a shadcn Carousel?

Install the Embla autoplay plugin: `pnpm add embla-carousel-autoplay`. Pass it to `opts`: `<Carousel plugins={[Autoplay({ delay: 2000 })]}>`.

How do I control the current slide programmatically?

Use the `setApi` prop to get the Embla API: `<Carousel setApi={setApi}>`. Then call `api.scrollTo(index)` to navigate to a specific slide.

How do I add slide dots/indicator to a shadcn Carousel?

Use the Carousel API's `selectedScrollSnap` and `scrollSnapList` to build a dot indicator. The API example shows how to track the current index.