# 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/reveal13. 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. Hold To Compare

# Hold To Compare[PRO](/pricing)

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.

ViewCodeDocs

Base UI

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

## Reveal13: Hold To Compare

The simplest comparison there is: press and hold to put the old state back, let go and the current one returns. The picture, the pill label, the button and the caption all follow the hold.

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

**Base UI flavor**

bashCopy

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

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

### Quick start

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

tsxCopy

```
import { Reveal13, reveal13Demo } from "@/components/beste/block/reveal13";

export default function Page() {
  return <Reveal13 {...reveal13Demo} />;
}
```

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

tsxCopy

```
import { Reveal13 } from "@/components/beste/block/reveal13";

export default function Page() {
  return (
    <Reveal13
      badge={{ label: "Hold to see" }}
      heading="Press and hold to put the old control panel back."
      description="Let go and the current one returns."
      resting={{
        src: "/hardware/now.jpg",
        alt: "Minimal control surface",
        label: "Now",
        description: "One dial, one indicator and nothing else on the face.",
      }}
      held={{
        src: "/hardware/before.jpg",
        alt: "Audio hardware on a bench",
        label: "Before",
        description: "Four buttons, two switches and an unreadable legend.",
      }}
      changes={[
        { title: "Controls removed", value: "Five" },
        { title: "Setup support tickets", value: "Halved" },
      ]}
      labels={{
        holdLabel: "Hold to see the old panel",
        holdingLabel: "Release to come back",
        hint: "Works with a mouse, a finger, or the space bar.",
      }}
    />
  );
}
```

### 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                             |
| resting     | CompareImage      | –       | The state shown when nothing is held                                        |
| held        | CompareImage      | –       | The state shown while the press is held                                     |
| changes     | CompareChange\[\] | \[\]    | Ruled facts under the comparison                                            |
| labels      | Reveal13Labels    | {}      | Fixed strings that are not content: the two button states and the hint line |
| className   | string            | –       | Extra classes for the outer <section>                                       |

tsCopy

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

type CompareChange = {
  title: string;
  value: string;
};

type Reveal13Labels = {
  holdLabel?: string;
  holdingLabel?: string;
  hint?: string;
};
```

### Behavior notes

* Both images stay mounted and the held one is cross-faded with `transition-opacity duration-300`, so the swap never flashes an empty frame while a file loads.
* The hold works on the picture itself and on the button, and both release on `onPointerLeave` and `onPointerCancel`, so a pointer that slides off the frame mid-press cannot leave the block stuck in the held state.
* Keyboard users get the same interaction: space or enter on the button holds on `keydown` and releases on `keyup`, which is why the control carries `aria-pressed` rather than pretending to be a toggle.
* The pill label swaps its own colours between the two states (light on dark while held), so the state is legible on the picture without reading the button.
* The caption under the frame is taken from the active state, so the explanation changes with the picture instead of describing both at once.
* `touch-none` is set on the frame, so a press and hold on a phone compares rather than scrolls or opens a context menu.
* The frame changes ratio rather than height (`aspect-[16/10]` becoming `md:aspect-[2/1]`), keeping the pair cinematic on desktop without a letterbox strip on a phone.

## More Reveal blocks

[View all Reveal](/blocks/reveal)

[](/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/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/reveal12)

PRO

reveal12

### Tile Flip Compare

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.

[](/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.

[](/block/reveal11)

PRO

reveal11

### Diagonal Peel Compare

Comparison that lifts diagonally instead of wiping straight: dragging the corner handle shrinks a triangular clip on the covering photograph to expose the one underneath, with notes on what changed.

[](/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.

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