UI Lab | Gallery

Gallery

Responsive grid for displaying images and media.

Mountain Landscape

Ocean Waves

Forest Path

import { Gallery } from "ui-lab-components"
 
const items = [
  { id: 1, title: "Mountain", image: "...", href: "#" },
  { id: 2, title: "Ocean", image: "...", href: "#" },
  { id: 3, title: "Forest", image: "...", href: "#" },
]
 
export function Example() {
  return (
    <Gallery columns={3}>
      {items.map((item) => (
        <Gallery.Item key={item.id} href={item.href}>
          <Gallery.View aspectRatio="16/9">
            <img src={item.image} alt={item.title} />
          </Gallery.View>
          <Gallery.Body>
            <strong>{item.title}</strong>
          </Gallery.Body>
        </Gallery.Item>
      ))}
    </Gallery>
  )
}

Columns

Gap

Basic Gallery

A simple gallery with multiple items in a grid layout. Use this for displaying collections of images or content.

import { Gallery } from 'ui-lab-components';
 
export default function Example() {
  return (
    <Gallery columns={3} gap="md">
      <Gallery.Item>
        <Gallery.View aspectRatio="1/1">
          <div style={{ background: '#e0e0e0', width: '100%', height: '100%' }} />
        </Gallery.View>
      </Gallery.Item>
      <Gallery.Item>
        <Gallery.View aspectRatio="1/1">
          <div style={{ background: '#d0d0d0', width: '100%', height: '100%' }} />
        </Gallery.View>
      </Gallery.Item>
      <Gallery.Item>
        <Gallery.View aspectRatio="1/1">
          <div style={{ background: '#c0c0c0', width: '100%', height: '100%' }} />
        </Gallery.View>
      </Gallery.Item>
    </Gallery>
  );
}