---
title: "MazGallery"
description: "MazGallery is a standalone component used to display images in a container and has many options and actions"
package: "maz-ui"
url: "https://maz-ui.com/components/maz-gallery"
---

# MazGallery

> MazGallery is a standalone component used to display images in a container and has many options and actions

- Package: `maz-ui`
- Import: `import MazGallery from 'maz-ui/components/MazGallery'`
- Nuxt: auto-imported by `@maz-ui/nuxt`, no import needed in a Nuxt app
- Web: https://maz-ui.com/components/maz-gallery

> Before use it, you should install the MazUi plugin in your project, follow instructions in [Getting Started](../guide/getting-started.md)

## Basic usage

```vue
<script lang="ts" setup>
import { MazGallery, type MazGalleryImage } from 'maz-ui/components'

const images: MazGalleryImage[] = [
  'https://placedog.net/640/400',
  { src: 'https://placedog.net/640/600', thumbnail: 'https://placedog.net/100/100', alt: 'image description' },
  { src: 'https://placedog.net/640/700', alt: 'image description' },
  'https://placedog.net/640/800',
  'https://placedog.net/640/1000',
  'https://placedog.net/800/800'
]
</script>

<template>
  <MazGallery
    :images
    :height="320"
  />
</template>
```

## Set height by CSS

```html
<MazGallery :images="images" class="h-48 md:h-60 lg:h-80" :height="false" />
```

## Types

```ts
type MazGalleryImage
  = | {
    thumbnail?: string
    src: string
    alt?: string
  }
  | string
```

## MazGallery API

`import MazGallery from 'maz-ui/components/MazGallery'`

### Props

- `images` (`MazGalleryImage[]`, default: `[]`): Array of string or object: `['https://via.placeholder.com/500', 'https://via.placeholder.com/600']` or `[{ slug: 'https://via.placeholder.com/500', alt: 'image descripton' }, { slug: 'https://via.placeholder.com/600', alt: 'image descripton' }]`.
- `displayed-count` (`number`, default: `5`): Images count shown (max: 5).
- `remaining` (`boolean`, default: `true`): Remove transparent layer with the remain count (ex: +2).
- `height` (`string | number | false`, default: `"100%"`): Height of gallery - set to `false` to remove default height.
- `width` (`string | number | false`, default: `"100%"`): Width of gallery - set to `false` to remove default width.
- `radius` (`boolean`, default: `true`): Disable the border radius of the gallery.
- `zoom` (`boolean`, default: `true`): Disable full size display when clicking on image.
- `has-empty-layer` (`boolean`, default: `true`): Layer with photography icon when no images is provided.
- `lazy` (`boolean`, default: `true`): Lazy load image - if false, images are directly loaded.
- `blur` (`boolean`, default: `true`): Disable blur effect on image hover.
- `scale` (`boolean`, default: `true`): Disable scale animation effect on image hover.
- `separator-color` (`string`, default: `"transparent"`): Choose color of borders between images - Should be a CSS color or CSS variable - Ex: `#000`.
- `background-color` (`string`): Choose background color of the gallery - Should be a CSS color or CSS variable - Ex: `#000`.