# Fullscreen Gallery Viewer

An accessible asset viewer with captions, cyclic navigation, position feedback, and an explicit close action.

## Installation

```bash
npx shadcn@latest add https://amro-ui.vercel.app/r/fullscreen-gallery-viewer.json
```

[Registry JSON](https://amro-ui.vercel.app/r/fullscreen-gallery-viewer.json)

## Preview

```tsx
import { FullscreenGalleryViewer } from "@amro-ui/react";

export function Preview() {
  return (
    <div className="grid min-h-72 w-full place-items-center rounded-xl border bg-background p-6 sm:p-10">
      <FullscreenGalleryViewer assets={[{ id: "amro", src: "/amro-ui-mark.svg", alt: "AmroUI product asset", caption: "Durable AmroVisionAI campaign asset" }]} />
    </div>
  );
}
```


## Source

### ui/fullscreen-gallery-viewer.tsx

```tsx
"use client";

import "@/components/amro/amro-ui.css";

export { FullscreenGalleryViewer } from "@/components/amro/components/shared";
export type { FullscreenGalleryViewerProps } from "@/components/amro/components/shared";
```



## Usage

An accessible asset viewer with captions, cyclic navigation, position feedback, and an explicit close action.

### Package

```tsx
import { FullscreenGalleryViewer } from "@amro-ui/react";

<FullscreenGalleryViewer />
```

### shadcn copy

```tsx
import { FullscreenGalleryViewer } from "@/components/ui/fullscreen-gallery-viewer";

<FullscreenGalleryViewer />
```