Gallery

Responsive grid for displaying images and media.

import { Gallery } from 'ui-lab-components/gallery';
 
const items = [
  { id: 1, title: 'Brand Kit', image: '...' },
  { id: 2, title: 'Icon Set', image: '...' },
  { id: 3, title: 'Type Scale', image: '...' },
];
 
export function Example() {
  return (
    <Gallery columns={3} gap="md">
      {items.map((item) => (
        <Gallery.Item key={item.id}>
          <Gallery.View aspectRatio="4/3">
            <img src={item.image} alt={item.title} />
          </Gallery.View>
          <Gallery.Body>
            <strong>{item.title}</strong>
          </Gallery.Body>
        </Gallery.Item>
      ))}
    </Gallery>
  );
}

gallery/02-item-orientation

Gallery items can be oriented vertically (stacked view + body) or horizontally (side-by-side view + body).

Loading interactive preview
"use client";
 
import { Gallery } from 'ui-lab-components/gallery';
 
export const metadata = {
  title: 'Item Orientation',
  description: 'Gallery items can be oriented vertically (stacked view + body) or horizontally (side-by-side view + body).',
  access: 'free' as const,
};
 
export default function Example() {
  return (
    <div className="flex flex-col gap-8 w-full">
      <Gallery columns={3} gap="sm" className="w-full">
        {Array.from({ length: 3 }, (_, i) => (
          <Gallery.Item key={i} orientation="vertical">
            <Gallery.View aspectRatio="4/3">
              <div className="h-20 w-full rounded bg-background-700/30" />
            </Gallery.View>
            <Gallery.Body>
              <div className="h-2.5 w-24 rounded bg-background-700/50" aria-hidden="true" />
              <div className="h-2 w-16 rounded bg-background-700/30" aria-hidden="true" />
            </Gallery.Body>
          </Gallery.Item>
        ))}
      </Gallery>
 
      <Gallery columns={1} gap="sm" className="w-full">
        {Array.from({ length: 3 }, (_, i) => (
          <Gallery.Item key={i} orientation="horizontal">
            <Gallery.View aspectRatio="1/1">
              <div className="h-20 w-full rounded bg-background-700/30" />
            </Gallery.View>
            <Gallery.Body>
              <div className="h-2.5 w-32 rounded bg-background-700/50" aria-hidden="true" />
              <div className="h-2 w-20 rounded bg-background-700/30" aria-hidden="true" />
            </Gallery.Body>
          </Gallery.Item>
        ))}
      </Gallery>
    </div>
  );
}

gallery/03-span-layout

A featured item spans multiple columns and rows to create an editorial grid layout.

Loading interactive preview
"use client";
 
import { Gallery } from 'ui-lab-components/gallery';
 
export const metadata = {
  title: 'Span Layout',
  description: 'A featured item spans multiple columns and rows to create an editorial grid layout.',
  access: 'free' as const,
};
 
export default function Example() {
  return (
    <Gallery columns={3} gap="md" className="w-full">
      <Gallery.Item columnSpan={2} rowSpan={2}>
        <Gallery.View aspectRatio="16/9">
          <div className="h-20 w-full rounded bg-background-700/30" />
        </Gallery.View>
        <Gallery.Body>
          <div className="h-2.5 w-36 rounded bg-background-700/50" aria-hidden="true" />
          <div className="h-2 w-24 rounded bg-background-700/30" aria-hidden="true" />
        </Gallery.Body>
      </Gallery.Item>
 
      {Array.from({ length: 4 }, (_, i) => (
        <Gallery.Item key={i}>
          <Gallery.View aspectRatio="4/3">
            <div className="h-20 w-full rounded bg-background-700/30" />
          </Gallery.View>
          <Gallery.Body>
            <div className="h-2.5 w-24 rounded bg-background-700/50" aria-hidden="true" />
            <div className="h-2 w-16 rounded bg-background-700/30" aria-hidden="true" />
          </Gallery.Body>
        </Gallery.Item>
      ))}
    </Gallery>
  );
}
UI Lab