StorybookGitHub

Carousel

A carousel of slides with previous/next controls and keyboard navigation.

Design tokens

Shared colors, spacing, and type across every component.

Accessible by default

Keyboard and screen reader support built in.

Themeable

Swap CSS variables to match any brand in minutes.

Copy & paste

Drop components straight into your app, no install step.

Installation 

npx shadcn-vue@latest add https://vuedocs.canceydejean.dev/r/carousel.json

Usage

Use carousel to cycle through a set of slides — images, cards, testimonials — in a constrained space. Wrap slides in CarouselContent/CarouselItem, and pass orientation="vertical" to stack slides top-to-bottom instead of side-to-side.

<script setup lang="ts">
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/components/ui/carousel";
</script>

<template>
  <Carousel class="w-full max-w-xs">
    <CarouselContent>
      <CarouselItem v-for="i in 5" :key="i">
        <div class="flex aspect-square items-center justify-center rounded-lg border text-3xl">
          {{ i }}
        </div>
      </CarouselItem>
    </CarouselContent>
    <CarouselPrevious />
    <CarouselNext />
  </Carousel>
</template>

Built on Embla Carousel via embla-carousel-vue — that package is imported directly in useCarousel.ts but isn't currently listed in this project's package.json, so install it separately when adding this component. CarouselNext/CarouselPrevious reuse Button's variants for their controls.