# Carousel Block 01

> 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-01).

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

## Install

```bash
npx shadcn@latest add https://shadcnui-blocks.com/r/carousel-block-01.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`, `button`

## Files

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

```tsx
import Link from "next/link";
import { Button } from "@/registry/bases/radix/ui/button";
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="mx-auto max-w-5xl px-14 py-20">
      <div className="flex items-end justify-between">
        <div>
          <h2 className="font-medium text-3xl tracking-tight">dddepth</h2>
          <p className="mt-2 text-pretty text-lg text-muted-foreground leading-snug">
            A Curated Collection of AI-generated Abstract 3D Shapes
          </p>
        </div>
        <Button className="max-sm:hidden" size="sm" variant="outline">
          <Link href="https://www.fffuel.co/dddepth/" target="_blank">
            View all
          </Link>
        </Button>
      </div>
      <Carousel className="mt-6 w-full" opts={{ loop: true, align: "start" }}>
        <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 className="mt-4 flex items-center justify-between sm:justify-end">
          <div className="flex items-center justify-end gap-1.5">
            <CarouselPrevious className="-left-10 max-md:static max-md:translate-y-0" />
            <CarouselNext className="-right-10 max-md:static max-md:translate-y-0" />
          </div>

          <Button className="sm:hidden" size="sm" variant="outline">
            <Link href="https://www.fffuel.co/dddepth/">View all</Link>
          </Button>
        </div>
      </Carousel>
    </div>
  );
}
```