Enlarge Gallery

A cinematic, full-screen image gallery that displays a large background image with text content, and a row of smaller thumbnail images at the bottom. Clicking a thumbnail makes it "grow" into the main image.

Showcase

Forest path with light filtering through trees

01 / 06

Into the Pines

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam at posuere magna. Nam eros purus, congue pulvinar turpis pretium, vulputate interdum turpis. Vivamus non arcu.

Installation

npx shadcn-extras@latest add enlarge-gallery

Usage


npx shadcn-extras@latest add enlarge-gallery


import { EnlargeGallery } from '@/components/core/enlarge-gallery';
export function Example() {
  const items = [
    {
      id: 1,
      src: '/image-1.jpg',
      title: 'Forest',
      description: 'A beautiful forest.',
    },
    // ...
  ];
  // Note: the component takes 100% height of its parent.
  // Make sure to wrap it in a container with a defined height!
  return (
    <div className='h-[600px] w-full'>
      <EnlargeGallery items={items} />
    </div>
  );
}

Props

Prop	Type	Default	Description
`items`	`EnlargeGalleryItem[]`	required	Array of items with `id`, `src`, `title`, and optional `description` and `alt`.