# Gallery 01 - Destination Gallery

> Discover breathtaking locations and unforgettable experiences, from scenic hikes to coastal escapes—carefully curated to inspire your next journey and help you explore with confidence.

A shadcn/ui block from the [@shadcn-space](https://shadcnspace.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/shadcn-space/gallery-01).

- Page, with a live preview: https://shadcn.exchange/r/shadcn-space/gallery-01
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/shadcn-space/gallery-01-light-d4965c2a28849b1f.png
- Registry item: https://shadcnspace.com/r/gallery-01.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://shadcnspace.com/r/gallery-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: `card`

## Files

### `src/components/shadcn-space/blocks/gallery-01/page.tsx`

```tsx
import Gallery from "@/components/shadcn-space/blocks/gallery-01/gallery";

const Page = () => {
  return <Gallery/>;
};

export default Page;
```

### `src/components/shadcn-space/blocks/gallery-01/gallery.tsx`

```tsx
import { Card } from "@/components/ui/card";

const Gallery = () => {
  return (
    <>
      <div className="lg:py-20 sm:py-16 py-8 w-full">
        <div className="max-w-7xl mx-auto px-4 lg:px-8 xl:px-16 py-10 w-full">
          <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
            {/* LEFT – Large card */}
            <Card className="group relative overflow-hidden rounded-2xl border-none p-0 after:absolute after:w-full after:h-full after:bg-linear-to-b after:from-transparent after:from-60% after:to-gray-950">
              <img
                src="https://images.shadcnspace.com/assets/gallery/galary-01-img-1.webp"
                alt="Hiking Adventure"
                className="object-cover transition-transform duration-500 group-hover:scale-105 h-full w-full"
              />
              {/* <div className="absolute inset-0 bg-black/30" /> */}
              <div className="absolute bottom-0 ps-8 pb-8 z-10 flex flex-col gap-1">
                <h3 className="text-2xl font-semibold text-white">
                  Hiking Adventure
                </h3>
                <p className="text-white/80 text-sm">306 Destinations</p>
              </div>
            </Card>

            {/* RIGHT SIDE */}
            <div className="grid grid-rows-2 gap-6">
              {/* Top wide card */}
              <Card className="group relative overflow-hidden rounded-2xl border-none p-0 after:absolute after:w-full after:h-full after:bg-linear-to-b after:from-transparent after:from-40% after:to-gray-950">
                <img
                  src="https://images.shadcnspace.com/assets/gallery/galary-01-img-2.webp"
                  alt="Outdoor Adventure"
                  className="object-cover transition-transform duration-500 group-hover:scale-105 h-full w-full"
                />

                <div className="absolute bottom-0 ps-8 pb-8 z-10 flex flex-col gap-1">
                  <h3 className="text-xl font-semibold text-white">
                    Outdoor Adventure
                  </h3>
                  <p className="text-white/80">418 Destinations</p>
                </div>
              </Card>

              {/* Bottom two cards */}
              <div className="grid grid-cols-2 gap-6">
                <Card className="group relative  overflow-hidden rounded-2xl border-none p-0 after:absolute after:w-full after:h-full after:bg-linear-to-b after:from-transparent after:from-40% after:to-gray-950">
                  <img
                    src="https://images.shadcnspace.com/assets/gallery/galary-01-img-3.webp"
                    alt="Beach Adventure"
                    className="object-cover transition-transform duration-500 group-hover:scale-105 h-full w-full"
                  />

                  <div className="absolute bottom-0 ps-8 pb-8 z-10 flex flex-col gap-1">
                    <h3 className="text-lg font-semibold text-white">
                      Beach Adventure
                    </h3>
                    <p className="text-sm text-white/80">85 Destinations</p>
                  </div>
                </Card>

                <Card className="group relative  overflow-hidden rounded-2xl border-none p-0 after:absolute after:w-full after:h-full after:bg-linear-to-b after:from-transparent after:from-40% after:to-gray-950">
                  <img
                    src="https://images.shadcnspace.com/assets/gallery/galary-01-img-4.webp"
                    alt="Pilgrimage Destination"
                    className="object-cover transition-transform duration-500 group-hover:scale-105 h-full w-full"
                  />

                  <div className="absolute bottom-0 ps-8 pb-8 z-10 flex flex-col gap-1">
                    <h3 className="text-lg font-semibold text-white">
                      Pilgrimage Destination
                    </h3>
                    <p className="text-sm text-white/80">29 Destinations</p>
                  </div>
                </Card>
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

export default Gallery;
```