Skip to content
Components / Composition

Carousel

A sideways list of peer items, such as citations.

@fabrials/ui
Loading state

Installation

  1. Import the control from @fabrials/ui, after setting the app up.

    TypeScript
    import { Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext } from "@fabrials/ui";
  2. Or install it under shadcn's name, so code that imports @/components/ui/carousel gets this control. See shims.

    npx shadcn@latest add @fabrials/carousel

API reference

Prop / exportTypeDescription
orientationhorizontal | verticalScroll direction.

Behavior

Previous and next are buttons. Arrow keys move the list when it has focus.

Accessibility

Keyboard and contrast
Keep visible labels, keyboard focus and status announcements when customizing. These components inherit your theme; maintain sufficient contrast in both color modes. The preview is keyboard operable.