Carousel

Imports

Use the same component slug for React, Vue, and style token lookup. Do not import components from package roots.

import { Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext } from "@line/abc-def-react/carousel";

<script setup lang="ts">
import { Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext } from "@line/abc-def-vue/carousel";
</script>

Shadcn references

Compare the corresponding shadcn React and Vue documentation for the same component slug.

Basic usage

import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@line/abc-def-react/carousel";

export function Example() {
  return (
    <Carousel>
      <CarouselContent>
        <CarouselItem>Slide 1</CarouselItem>
        <CarouselItem>Slide 2</CarouselItem>
        <CarouselItem>Slide 3</CarouselItem>
      </CarouselContent>
      <CarouselPrevious />
      <CarouselNext />
    </Carousel>
  );
}

<script setup lang="ts">
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@line/abc-def-vue/carousel";
</script>

<template>
  <Carousel>
    <CarouselContent>
      <CarouselItem>Slide 1</CarouselItem>
      <CarouselItem>Slide 2</CarouselItem>
      <CarouselItem>Slide 3</CarouselItem>
    </CarouselContent>
    <CarouselPrevious />
    <CarouselNext />
  </Carousel>
</template>

Component tokens

This component does not define a dedicated component token file. It inherits shared semantic tokens and utility classes.

Composition exports

Usage notes

• Use for small sets where browsing order matters.
• Do not hide critical information in a carousel.
• Related component tokens use the `carousel` token group in `@line/abc-def-styles/css`.