# Gallery component 01

> Gallery section with centered header featuring underlined text highlight, flexible grid layout supporting both single images and 2x2 grid sections for versatile image arrangement

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

- Page, with a live preview: https://shadcn.exchange/r/shadcn-studio/gallery-component-01
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/shadcn-studio/gallery-component-01-light-1fba653c917d680e.png
- Registry item: https://shadcnstudio.com/r/new-york-v4/gallery-component-01.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://shadcnstudio.com/r/new-york-v4/gallery-component-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: `utils`

## Files

### `src/registry/new-york/blocks/marketing-ui/gallery-component/gallery-component-01/page.tsx`

```tsx
import Gallery from '@/registry/new-york/components/blocks/gallery-component-01/gallery-component-01'

const gallerySections = [
  {
    images: [
      {
        src: 'https://cdn.shadcnstudio.com/ss-assets/blocks/marketing/gallery/image-10.png',
        alt: 'Coastal cliffs and ocean view'
      }
    ]
  },
  {
    type: 'grid',
    images: [
      {
        src: 'https://cdn.shadcnstudio.com/ss-assets/blocks/marketing/gallery/image-9.png',
        alt: 'Silhouettes on beach'
      },
      {
        src: 'https://cdn.shadcnstudio.com/ss-assets/blocks/marketing/gallery/image-8.png',
        alt: 'Snowy mountain peaks'
      },
      {
        src: 'https://cdn.shadcnstudio.com/ss-assets/blocks/marketing/gallery/image-7.png',
        alt: 'Rolling green hills'
      },
      {
        src: 'https://cdn.shadcnstudio.com/ss-assets/blocks/marketing/gallery/image-6.png',
        alt: 'Sunset landscape'
      }
    ]
  },
  {
    type: 'grid',
    images: [
      {
        src: 'https://cdn.shadcnstudio.com/ss-assets/blocks/marketing/gallery/image-4.png',
        alt: 'Silhouettes on beach'
      },
      {
        src: 'https://cdn.shadcnstudio.com/ss-assets/blocks/marketing/gallery/image-3.png',
        alt: 'Snowy mountain peaks'
      },
      {
        src: 'https://cdn.shadcnstudio.com/ss-assets/blocks/marketing/gallery/image-2.png',
        alt: 'Rolling green hills'
      },
      {
        src: 'https://cdn.shadcnstudio.com/ss-assets/blocks/marketing/gallery/image-1.png',
        alt: 'Sunset landscape'
      }
    ]
  },
  {
    images: [
      {
        src: 'https://cdn.shadcnstudio.com/ss-assets/blocks/marketing/gallery/image-5.png',
        alt: 'Coastal cliffs and ocean view'
      }
    ]
  }
]

const GalleryPage = () => {
  return <Gallery sections={gallerySections} />
}

export default GalleryPage
```

### `src/registry/new-york/components/blocks/gallery-component-01/gallery-component-01.tsx`

```tsx
import { cn } from '@/registry/new-york/lib/utils'

type GalleryImage = {
  src: string
  alt: string
}

type GallerySection = {
  type?: string
  images: GalleryImage[]
}

const Gallery = ({ sections }: { sections: GallerySection[] }) => {
  return (
    <section className='py-8 sm:py-16 lg:py-24'>
      <div className='mx-auto max-w-7xl px-4 sm:px-6 lg:px-8'>
        {/* Header */}
        <div className='mb-12 space-y-4 text-center sm:mb-16 lg:mb-24'>
          <h2 className='text-2xl font-semibold md:text-3xl lg:text-4xl'>
            <span className='relative z-1'>
              Explore our
              <span className='bg-primary absolute bottom-1 left-0 -z-1 h-px w-full' aria-hidden='true'></span>
            </span>{' '}
            Gallery
          </h2>
          <p className='text-muted-foreground text-xl'>
            Explore our gallery to learn more about our amazing products and their features.
          </p>
        </div>

        {/* Gallery Grid */}
        <div className='grid gap-6 md:grid-cols-2'>
          {sections.map((section, sectionIndex) => (
            <div key={sectionIndex} className={cn({ 'grid grid-cols-2 gap-6': section.type === 'grid' })}>
              {section.images.map((image, imageIndex) => (
                <img key={imageIndex} src={image.src} alt={image.alt} className='rounded-lg object-cover' />
              ))}
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}

export default Gallery
```