# 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/reveal12. Every page on the site has one: add `.md` to any address, or send `Accept: text/markdown`.

Last updated: 2026-07-29

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. [Reveal](/blocks/reveal)
5. /
6. Tile Flip Compare

# Tile Flip Compare[PRO](/pricing)

Two photographs split across the same grid so each square can be flipped from before to after on click, with buttons to turn the whole frame over and a counter of how much has been revealed.

ViewCodeDocs

Base UI

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

## Reveal12: Tile Flip Compare

The before and after are cut into a grid of squares, and each one flips on its own. Turn over a corner, a diagonal or the whole picture, with a counter and two controls under the frame.

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/reveal12?email=YOUR_EMAIL&license_key=YOUR_KEY"
```

**Base UI flavor**

bashCopy

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

This installs the block to `components/beste/block/reveal12.tsx` plus the `badge7` eyebrow it uses.

### Quick start

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

tsxCopy

```
import { Reveal12, reveal12Demo } from "@/components/beste/block/reveal12";

export default function Page() {
  return <Reveal12 {...reveal12Demo} />;
}
```

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

tsxCopy

```
import { Reveal12 } from "@/components/beste/block/reveal12";

export default function Page() {
  return (
    <Reveal12
      badge={{ label: "Tile by tile" }}
      heading="Turn over as much of the room as you want to see."
      description="Each square flips between the fit-out we inherited and the one we handed back."
      columns={4}
      rows={3}
      before={{ src: "/room/inherited.jpg", alt: "Room as inherited", label: "Inherited" }}
      after={{ src: "/room/handed-back.jpg", alt: "Room as handed back", label: "Handed back" }}
      labels={{
        revealAll: "Flip everything",
        coverAll: "Put it back",
        tileLabel: "Flip this square",
        counterSuffix: "squares flipped",
      }}
    />
  );
}
```

### Props

| Prop        | Type              | Default | Description                                                                                 |
| ----------- | ----------------- | ------- | ------------------------------------------------------------------------------------------- |
| badge       | { label: string } | –       | Eyebrow label rendered as a Badge7                                                          |
| heading     | string            | –       | Section heading in the left header column                                                   |
| description | string            | –       | Supporting paragraph in the right header column                                             |
| before      | CompareImage      | –       | The image every tile starts on                                                              |
| after       | CompareImage      | –       | The image a flipped tile shows                                                              |
| columns     | number            | 4       | Tiles across the frame                                                                      |
| rows        | number            | 3       | Tiles down the frame                                                                        |
| labels      | Reveal12Labels    | {}      | Fixed strings that are not content: the two controls, the tile label and the counter suffix |
| className   | string            | –       | Extra classes for the outer <section>                                                       |

tsCopy

```
type CompareImage = {
  src: string;
  alt: string;
  label: string;
};

type Reveal12Labels = {
  revealAll?: string;
  coverAll?: string;
  tileLabel?: string;
  counterSuffix?: string;
};
```

### Behavior notes

* Each tile shows one fragment of the whole photograph rather than a scaled copy: the image is sized to `columns * 100%` by `rows * 100%` and offset by the tile's own row and column, so the picture stays continuous across the grid.
* The grid's `aspectRatio` is computed from `columns / rows`, so every tile is square whatever grid size you pass and the two source images are cropped identically.
* Flipped tiles are tracked as an array of indexes, so the two controls are simple: reveal all sets the full list, cover all sets an empty one.
* Every tile is a real `button` carrying `aria-pressed` and the shared tile label, and the fragment images use an empty `alt` because the picture is described once by the labelled states rather than twelve times.
* The counter reads `flipped of total` with a caption suffix you supply, so it stays translatable without any string concatenation in the block.
* The state labels sit under the frame at opposite ends of a `md:grid-cols-2` row, which keeps the legend readable rather than pinning two pills onto a busy mosaic.
* Grid size is fully driven by props: passing `columns={6} rows={4}` gives twenty-four tiles with no other change.

## More Reveal blocks

[View all Reveal](/blocks/reveal)

[](/block/reveal13)

PRO

reveal13

### Hold To Compare

Press-and-hold comparison: holding the frame or the button cross-fades the earlier photograph in and swaps the corner label and caption, releasing returns to the current one.

[](/block/reveal7)

PRO

reveal7

### Segmented State Compare

Two versions of the same object compared through a segmented pill control: the photographs cross-fade in place while the title, explanation and ruled note list swap beside them.

[](/block/reveal8)

PRO

reveal8

### Vertical Split Compare

Comparison that splits horizontally instead of down the middle: a draggable divider wipes the upper photograph away to expose the lower one, with pill labels and a caption for each state.

[](/block/reveal1)

FREE

reveal1

### Before/After Image Slider

Interactive image comparison component with a draggable divider supporting horizontal and vertical orientations. Perfect for showcasing transformations, photo editing results, or design improvements.

[](/block/reveal6)

PRO

reveal6

### Drag Compare Slider

Before and after comparison where a pointer-driven handle clips the earlier photograph over the later one, with pill labels on both corners and a ruled row of outcome figures beneath.

[](/block/reveal9)

PRO

reveal9

### Spotlight Lens Compare

Before and after comparison seen through a draggable circular lens: the earlier photograph fills the frame while the later one shows only inside the circle, which follows the pointer or the arrow keys.

## 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.