# Beste UI

> Beautiful, accessible blocks, pieces and components for shadcn/ui and Tailwind CSS, built for React and Next.js. Install one with the shadcn CLI and the code is yours to edit: no runtime dependency, nothing to upgrade.

Markdown rendition of https://ui.beste.co/block/gallery26. Every page on the site has one: add `.md` to any address, or send `Accept: text/markdown`.

Last updated: 2026-08-12

Whole catalog for LLMs: https://ui.beste.co/llms.txt. Registry index: https://ui.beste.co/r/registry.json

---
1. /
2. [Blocks](/blocks)
3. /
4. [Gallery](/blocks/gallery)
5. /
6. Cover Archive With Lightbox

# Cover Archive With Lightbox[PRO](/pricing)

A square cover grid that names each picture only on hover and opens it full screen on click, where arrows and the keyboard walk the archive and a link leads into the issue itself.

ViewCodeDocs

Base UI

![](https://oud.pics/sm/l/npm.svg)`npx shadcn add https://ui.beste.co/r-base/gallery26`

## Gallery26: Cover Archive With Lightbox

A square cover grid that names each picture only on hover and opens it full screen on click, where arrows and the keyboard walk the archive and a link leads into the issue itself.

Upgrade to Pro

Pro blocks install through the shadcn CLI with your license key and ship their full source. Docs and live previews stay open to everyone, so you can read every block's details first.

[Upgrade NowUpgrade Now](/pricing)

### Installation

Swap `YOUR_EMAIL` and `YOUR_KEY` for the email and license key on your account. Find your license key on your [account page](/account).

**Radix flavor**

bashCopy

```
npx shadcn add "https://ui.beste.co/r/gallery26?email=YOUR_EMAIL&license_key=YOUR_KEY"
```

**Base UI flavor**

bashCopy

```
npx shadcn add "https://ui.beste.co/r-base/gallery26?email=YOUR_EMAIL&license_key=YOUR_KEY"
```

This installs the block to `components/beste/block/gallery26.tsx` and the `badge6` component it uses for the eyebrow (installed to `components/beste/component/badge6.tsx`).

### Quick start

The installed file exports `gallery26Demo` alongside the block: the exact props behind the preview above. Spread it to get a working cover grid in one line.

tsxCopy

```
import { Gallery26, gallery26Demo } from "@/components/beste/block/gallery26";

export default function CoversPage() {
  return <Gallery26 {...gallery26Demo} />;
}
```

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

tsxCopy

```
import { Gallery26 } from "@/components/beste/block/gallery26";

export default function CoversPage() {
  return (
    <Gallery26
      eyebrow="Covers"
      heading="Every issue has its own picture"
      readLabel="Read this issue"
      closeLabel="Close"
      covers={[
        {
          image: { src: "/covers/042.jpg", alt: "Notes across a table" },
          title: "The quote we lost on purpose",
          issue: "042",
          href: "/letters/042",
        },
      ]}
      note="Shot in the studio, on the morning the issue went out."
    />
  );
}
```

### Props

| Prop       | Type      | Default | Description                               |
| ---------- | --------- | ------- | ----------------------------------------- |
| eyebrow    | string    | –       | Badge6 label, sharing a row with the note |
| heading    | string    | –       | Section heading under the rule            |
| covers     | Cover\[\] | \[\]    | Square tiles, four across on desktop      |
| readLabel  | string    | –       | Link into the issue, inside the lightbox  |
| closeLabel | string    | –       | Label on the lightbox close button        |
| note       | string    | –       | Line beside the eyebrow                   |
| className  | string    | –       | Extra classes for the outer section       |

tsCopy

```
type Cover = {
  image: CoverImage;
  title: string;
  issue: string;
  href: string;
};

type CoverImage = {
  src: string;
  alt: string;
};
```

### Behavior notes

* Tiles are buttons rather than links, because a click opens the lightbox. The link into the issue lives inside the lightbox, so the two actions are never confused.
* The lightbox handles Escape to close and the arrow keys to move, and the listener is bound only while it is open rather than for the life of the page.
* Opening it locks `body` scrolling and restores the previous value on close, so the page behind does not drift while the overlay is up.
* Stepping wraps with a modulo, so the last cover leads back to the first in both directions.
* The counter reads "n of total" from state, so it stays correct however many covers you pass.
* Tile captions appear on hover over a scrim. The grid itself shows pictures only, which is the point of a cover archive.

## More Gallery blocks

[View all Gallery](/blocks/gallery)

[](/block/gallery2)

PRO

gallery2

### Lightbox Frame Grid

Captioned image grid where any tile opens a full-screen lightbox on a dark scrim, with a frame counter, keyboard arrows, escape to close and previous and next controls beside the caption.

[](/block/gallery3)

PRO

gallery3

### Filterable Album Grid

Album gallery with pill filters that swap the whole set below, where any tile opens a light full-screen viewer: the frame hangs on the page surface while a side column carries the caption, the album summary, the controls and a plainly labelled thumbnail index.

[](/block/gallery10)

PRO

gallery10

### Overview Toggle Viewer

Square grid whose viewer holds two states: a single frame with caption and controls, or an in-place overview of the whole set that you can jump from without closing the layer.

[](/block/gallery14)

PRO

gallery14

### Walkthrough Exhibition Rail

Long-scroll exhibition where every work sits in its own matted panel with a full label, beside a sticky rail whose numbered index follows the work in the middle of the screen and scrolls to any other on click.

[](/block/gallery22)

PRO

gallery22

### Archive Record Cards

Text-first archive index of reference, thumbnail, title and year, opening a record card with two sides: the work on the front and the registrar's acquisition, condition and storage notes on the back.

[](/block/gallery8)

PRO

gallery8

### Photo Book Spread Viewer

Photographs presented as printed spreads on a soft panel: two plates share a page with a centre rule, round controls turn to the next spread, and a bar index below tracks how far through the book you are.

## Ship the interface, keep the code.

New blocks, pieces and components every week. Install one with a command and it is yours to edit. No runtime dependency, no upgrade path to fight.

[Browse the libraryBrowse the library](/blocks)[See pricingSee pricing](/pricing)

### Library

* [Blocks](/blocks)
* [Pages](/pages)
* [Pieces](/pieces)
* [Components](/components)
* [Search](/search)

### Learn

* [Docs](/docs)
* [AI & MCP](/docs/mcp)
* [Blog](/blog)
* [Free tools](/tools)
* [What's new?](/changelog)
* [Website Builder](https://beste.co)

### More

* [Pricing](/pricing)
* [Referrals](/referrals)
* [License](/license)
* [GitHub](https://github.com/beste-co/beste-ui)

### Shadcn Blocks

* [Shadcn Hero Blocks](/blocks/hero)
* [Shadcn Feature Blocks](/blocks/feature)
* [Shadcn Pricing Blocks](/blocks/pricing)
* [Shadcn CTA Blocks](/blocks/cta)
* [Shadcn FAQ Blocks](/blocks/faq)
* [Shadcn About Blocks](/blocks/about)
* [Shadcn Stats Blocks](/blocks/stats)
* [Shadcn Footer Blocks](/blocks/footer)
* [Shadcn Navigation Blocks](/blocks/navigation)
* [Shadcn Auth Blocks](/blocks/auth)
* [Shadcn Ecommerce Blocks](/blocks/ecommerce)
* [Shadcn Portfolio Blocks](/blocks/portfolio)
* [Shadcn Showcase Blocks](/blocks/showcase)
* [Shadcn Careers Blocks](/blocks/careers)
* [Shadcn Onboarding Blocks](/blocks/onboarding)
* [Shadcn Coming Soon Blocks](/blocks/coming-soon)
* [Shadcn Post Blocks](/blocks/post)
* [Shadcn Legal Blocks](/blocks/legal)
* [Shadcn Workflow Blocks](/blocks/workflow)
* [Shadcn News Blocks](/blocks/news)

© 2026, [Beste](https://beste.co). All rights reserved.