LiltUI

Display

Carousel

An Embla carousel with round paper arrows and keyboard scrolling. Horizontal or vertical; autoplay optional.

1garden bed 1 of 5
2garden bed 2 of 5
3garden bed 3 of 5
4garden bed 4 of 5
5garden bed 5 of 5
Show code
"use client";

import { Card, CardContent } from "@/registry/lilt/ui/card";
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/registry/lilt/ui/carousel";

const gardenBeds = ["1", "2", "3", "4", "5"];

export default function CarouselDemo() {
  return (
    <Carousel className="w-full max-w-xs">
      <CarouselContent>
        {gardenBeds.map((numeral) => (
          <CarouselItem key={numeral}>
            <Card className="p-1">
              <CardContent className="flex aspect-square flex-col items-center justify-center gap-2 p-6">
                <span className="font-display text-6xl font-semibold tracking-[-0.02em]">
                  {numeral}
                </span>
                <span className="text-xs text-[var(--lilt-text-muted)]">
                  garden bed {numeral} of 5
                </span>
              </CardContent>
            </Card>
          </CarouselItem>
        ))}
      </CarouselContent>
      <CarouselPrevious />
      <CarouselNext />
    </Carousel>
  );
}

Installation

npx shadcn@latest add @lilt/carousel

Accessibility

  • A labeled region (aria-roledescription='carousel'); each slide announces as 'slide' and arrow keys scroll once focused.
  • Previous/Next are real buttons with labels and honest disabled states; if you add autoplay, pause it on hover and focus.