# Carousel Block 02

> A simple carousel block

A shadcn/ui block from the [@shadcnui-blocks](https://shadcnui-blocks.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/shadcnui-blocks/carousel-block-02).

- Page, with a live preview: https://shadcn.exchange/r/shadcnui-blocks/carousel-block-02
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/shadcnui-blocks/carousel-block-02-light-9d98a7495ba80552.png
- Registry item: https://shadcnui-blocks.com/r/carousel-block-02.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://shadcnui-blocks.com/r/carousel-block-02.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `carousel`

## Files

### `src/registry/blocks/radix/carousel-block-02/components/carousel.tsx`

```tsx
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/registry/bases/radix/ui/carousel";

const images = [
  "https://www.fffuel.co/images/dddepth-preview/dddepth-321.jpg",
  "https://www.fffuel.co/images/dddepth-preview/dddepth-310.jpg",
  "https://www.fffuel.co/images/dddepth-preview/dddepth-173.jpg",
  "https://www.fffuel.co/images/dddepth-preview/dddepth-147.jpg",
  "https://www.fffuel.co/images/dddepth-preview/dddepth-105.jpg",
];

export default function CarouselDemo() {
  return (
    <div className="px-6 py-20">
      <Carousel
        className="mx-auto w-full max-w-5xl"
        opts={{ loop: true, align: "start" }}
      >
        <div className="mb-3 flex items-center justify-end gap-1 md:hidden">
          <CarouselPrevious className="static translate-y-0" />
          <CarouselNext className="static translate-y-0" />
        </div>
        <div className="rounded-xl bg-card p-6 shadow-xl/3 ring ring-border/80">
          <div className="mb-5 flex items-end justify-between">
            <div>
              <h2 className="font-medium text-3xl tracking-tight">dddepth</h2>
              <p className="mt-2 text-lg text-muted-foreground leading-snug">
                A Curated Collection of AI-generated Abstract 3D Shapes
              </p>
            </div>

            <div className="hidden space-x-2 md:block">
              <CarouselPrevious className="static translate-y-0" />
              <CarouselNext className="static translate-y-0" />
            </div>
          </div>

          <CarouselContent>
            {images.map((image, index) => (
              <CarouselItem
                className="basis-1/2 md:basis-1/3 lg:basis-1/4"
                key={index}
              >
                <div className="p-1">
                  <div className="aspect-square">
                    <img className="rounded-lg object-cover" src={image} />
                  </div>
                </div>
              </CarouselItem>
            ))}
          </CarouselContent>
        </div>
      </Carousel>
    </div>
  );
}
```