# 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/reveal7. 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. Segmented State Compare

# Segmented State Compare[PRO](/pricing)

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.

ViewCodeDocs

Base UI

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

## Reveal7: Segmented State Compare

Two states of the same thing, switched with a segmented control in the header. The photograph cross-fades while the statement, paragraph and ruled notes beside it swap to match.

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

**Base UI flavor**

bashCopy

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

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

### Quick start

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

tsxCopy

```
import { Reveal7, reveal7Demo } from "@/components/beste/block/reveal7";

export default function Page() {
  return <Reveal7 {...reveal7Demo} />;
}
```

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

tsxCopy

```
import { Reveal7 } from "@/components/beste/block/reveal7";

export default function Page() {
  return (
    <Reveal7
      badge={{ label: "Switch it" }}
      heading="The old bag and the one that replaced it."
      states={[
        {
          label: "2019 packaging",
          title: "Illustrated, crowded, unreadable at arm's length",
          description: "Six colours, a hand-drawn scene and four typefaces.",
          src: "/packaging/old.jpg",
          alt: "Unbranded paper packaging",
          notes: ["Six-colour print run", "Origin buried on the reverse"],
        },
        {
          label: "Current packaging",
          title: "One colour, one voice and the origin on the front",
          description: "Uncoated stock, a single ink and the name doing the work.",
          src: "/packaging/new.jpg",
          alt: "Minimal coffee packaging",
          notes: ["Single-colour print run", "Origin and roast date on the face"],
        },
      ]}
    />
  );
}
```

### Props

| Prop      | Type              | Default | Description                                 |
| --------- | ----------------- | ------- | ------------------------------------------- |
| badge     | { label: string } | –       | Eyebrow label rendered as a Badge7          |
| heading   | string            | –       | Section heading in the header row           |
| states    | CompareState\[\]  | \[\]    | The states being compared, one segment each |
| className | string            | –       | Extra classes for the outer <section>       |

tsCopy

```
type CompareState = {
  label: string;
  title: string;
  description: string;
  src: string;
  alt: string;
  notes: string[];
};
```

### Behavior notes

* The block opens on the last state when more than one is passed (`useState(states.length > 1 ? 1 : 0)`), so a visitor sees the current version first and switches back to the old one deliberately.
* Every image is rendered at once and cross-faded with `transition-opacity duration-500`, so switching never shows an empty frame while a file downloads.
* The segmented control is a real set of `button` elements with `aria-pressed`, sitting in a `bg-muted` track with the selected pill on `bg-background`, so the state is exposed as well as drawn.
* Notes are a plain `ul` with a `border-t` rule per row, which lets the two lists line up against each other when you flip between the states.
* The control lives in the header on the heading's baseline (`items-end`), so switching does not require scrolling past the picture.
* The frame changes ratio rather than height (`aspect-[4/3]` becoming `md:aspect-[3/2]`), so both states are cropped identically at every width and the comparison stays honest.
* Copy is capped at `max-w-md` in the side column, so the two states' text blocks occupy the same measure and differences in length read as content rather than layout.

## 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/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/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/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/reveal10)

PRO

reveal10

### Self Sweeping Compare

Before and after comparison that plays itself: the seam walks from edge to edge on a timer, clicking the picture freezes it at that point, and a single round control resumes or holds the sweep between the two captions.

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

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