Carousel

Open-code aq-ui accessible component family for Carousel.

Preview

This is a live example. Interact with the available controls and use the keyboard to inspect the component's states and behavior.

Foundation

Editors

Advanced

Loading interactive preview…

pnpm dlx aq-ui@alpha add carousel

Client module

Import the parts you need, then jump to an export for its contract.

"use client"

import { Carousel } from "@/components/ui/carousel"

<Carousel />

Open-code aq-ui accessible component family for Carousel.

const Carousel = React.forwardRef<React.ComponentRef<"div">, React.ComponentProps<"div"> & CarouselProps>(…)

Type contract for CarouselApi.

type CarouselApi = UseEmblaCarouselType[1]

Content export for composing Carousel.

const CarouselContent = React.forwardRef<React.ComponentRef<"div">, React.ComponentProps<"div">>(…)

Item export for composing Carousel.

const CarouselItem = React.forwardRef<React.ComponentRef<"div">, React.ComponentProps<"div">>(…)

Public const export from Carousel.

const CarouselNext = React.forwardRef<React.ComponentRef<typeof Button>, React.ComponentProps<typeof Button>>(…)

Public const export from Carousel.

const CarouselPrevious = React.forwardRef<React.ComponentRef<typeof Button>, React.ComponentProps<typeof Button>>(…)

Public function export from Carousel.

function useCarousel()

const result = useCarousel()

button, utils

embla-carousel-react@^8.6.0, lucide-react@^1.31.0