# 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/reveal11. 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. Diagonal Peel Compare

# Diagonal Peel Compare[PRO](/pricing)

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.

ViewCodeDocs

Base UI

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

## Reveal11: Diagonal Peel Compare

A comparison peeled from the corner: the cover image is clipped to a triangle you drag along the diagonal, lifting it off the picture underneath. Three ruled notes explain what survived the change.

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

**Base UI flavor**

bashCopy

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

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

### Quick start

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

tsxCopy

```
import { Reveal11, reveal11Demo } from "@/components/beste/block/reveal11";

export default function Page() {
  return <Reveal11 {...reveal11Demo} />;
}
```

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

tsxCopy

```
import { Reveal11 } from "@/components/beste/block/reveal11";

export default function Page() {
  return (
    <Reveal11
      badge={{ label: "Peel it back" }}
      heading="Pull the corner down and the sketch is still under there."
      description="The printed spread sits on top. Drag diagonally to lift it off."
      startPosition={35}
      cover={{ src: "/case/printed.jpg", alt: "Printed editorial spread", label: "Printed" }}
      beneath={{ src: "/case/sketch.jpg", alt: "Sketches pinned to a desk", label: "Sketch" }}
      notes={[
        { title: "The grid survived", description: "Column widths and margins are unchanged." },
        { title: "The type did not", description: "Three weights were dropped at real size." },
      ]}
      labels={{ handleLabel: "Drag to peel", hint: "Drag anywhere on the picture." }}
    />
  );
}
```

### 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                        |
| cover         | CompareImage      | –       | The image on top, clipped to the peeling triangle                      |
| beneath       | CompareImage      | –       | The image revealed underneath                                          |
| notes         | PeelNote\[\]      | \[\]    | Ruled notes under the frame                                            |
| startPosition | number            | 35      | How far the corner is peeled back at rest, as a percentage             |
| labels        | Reveal11Labels    | {}      | Fixed strings that are not content: the handle label and the hint line |
| className     | string            | –       | Extra classes for the outer <section>                                  |

tsCopy

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

type PeelNote = {
  title: string;
  description: string;
};

type Reveal11Labels = {
  handleLabel?: string;
  hint?: string;
};
```

### Behavior notes

* The peel is a `clip-path: polygon()` triangle anchored to the top left corner, whose legs are derived from one value (`200 - position * 2`), so at zero the cover still fills the frame and at one hundred it is gone.
* Both pointer axes feed that single value (`100 - (x + y) / 2`), which is what makes a diagonal drag feel like lifting a sheet rather than moving two independent sliders.
* Dragging works anywhere on the picture: the frame captures the pointer, so a fast diagonal drag that leaves the box still tracks until release.
* `touch-none` is set on the frame, so a diagonal touch drag peels the corner instead of scrolling the page.
* The handle is a `role="slider"` button with a live `aria-valuenow`; the arrow keys peel and unpeel in four percent steps, so the reveal works without a pointer.
* Labels sit in opposite corners, cover top left and beneath bottom right, so each stays on its own side of the diagonal at every position.
* The frame changes ratio rather than height (`aspect-[4/3]` becoming `md:aspect-[16/9]`), so the diagonal has a sensible slope at both ends of the breakpoint range.

## More Reveal blocks

[View all Reveal](/blocks/reveal)

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

FREE

reveal2

### Comparison Slider with Highlights

Split-layout image comparison with a sidebar featuring benefit highlights and icons alongside a draggable before/after slider. Perfect for demonstrating product improvements with detailed feature callouts.

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

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