Gallery

The Gallery component provides you with image galleries and media showcases.

Import

import { Gallery } from '@nostromo/ui-marketing'
// or
import { Gallery } from '@nostromo/ui-marketing/gallery'

Usage

import { Gallery } from '@nostromo/ui-marketing'
 
export default function Example() {
  return (
    <Gallery
      images={[
        { src: "/image1.jpg", alt: "Image 1" },
        { src: "/image2.jpg", alt: "Image 2" }
      ]}
    />
  )
}

Live Examples

Live Example

☀️

Copy

Storybook →

View Code

import { Gallery } from '@nostromo/ui-marketing' export default function GalleryExample() { return ( <Gallery images={[ { src: "https://via.placeholder.com/400x300?text=Image+1", alt: "Image 1" }, { src: "https://via.placeholder.com/400x300?text=Image+2", alt: "Image 2" }, { src: "https://via.placeholder.com/400x300?text=Image+3", alt: "Image 3" }, { src: "https://via.placeholder.com/400x300?text=Image+4", alt: "Image 4" },...

Live Example

☀️

Copy

Storybook →

View Code

import { Gallery } from '@nostromo/ui-marketing' export default function GalleryMasonryExample() { return ( <Gallery variant="masonry" images={[ { src: "https://via.placeholder.com/400x500?text=Tall+1", alt: "Tall Image 1" }, { src: "https://via.placeholder.com/400x300?text=Wide+1", alt: "Wide Image 1" }, { src: "https://via.placeholder.com/400x400?text=Square+1", alt: "Square Image 1" },...

Live Example

☀️

Copy

Storybook →

View Code

import { Gallery } from '@nostromo/ui-marketing' export default function GalleryGridExample() { return ( <Gallery variant="grid" images={[ { src: "https://via.placeholder.com/300x300?text=1", alt: "Image 1" }, { src: "https://via.placeholder.com/300x300?text=2", alt: "Image 2" }, { src: "https://via.placeholder.com/300x300?text=3", alt: "Image 3" },...

Code Examples

Props

Prop	Type	Default	Required	Description
`images`	`GalleryImage[]`	-	Yes	Array of image objects (see GalleryImage interface below)
`variant`	`"default" \| "masonry" \| "grid"`	`"default"`	No	Visual variant
`itemAspectRatio`	`"square" \| "landscape" \| "portrait" \| "auto"`	`"auto"`	No	Aspect ratio for gallery items
`itemHover`	`"none" \| "zoom" \| "overlay"`	`"zoom"`	No	Hover effect for items
`showLightbox`	`boolean`	`true`	No	Whether to enable lightbox on click
`lightboxAnimation`	`"fade" \| "slide" \| "zoom"`	`"fade"`	No	Lightbox animation type
`showThumbnails`	`boolean`	`false`	No	Whether to show thumbnails in lightbox
`thumbnailSize`	`"sm" \| "md" \| "lg"`	`"md"`	No	Size of thumbnails
`onImageClick`	`(image: GalleryImage, index: number) => void`	`undefined`	No	Callback when image is clicked
`className`	`string`	`undefined`	No	Additional CSS classes
`itemClassName`	`string`	`undefined`	No	Additional CSS classes for items

GalleryImage Interface

interface GalleryImage {
  src: string;
  alt: string;
  title?: string;
  description?: string;
  thumbnail?: string;
}

Pricing LogoWall