# 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/reveal6. 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. Drag Compare Slider
# Drag Compare Slider[PRO](/pricing)
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.
ViewCodeDocs
Base UI
`npx shadcn add https://ui.beste.co/r-base/reveal6`
## Reveal6: Drag Compare Slider
A true before and after: two photographs stacked in one frame with a draggable divider between them, labelled pills in the top corners, and a ruled row of facts underneath.
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/reveal6?email=YOUR_EMAIL&license_key=YOUR_KEY"
```
**Base UI flavor**
bashCopy
```
npx shadcn add "https://ui.beste.co/r-base/reveal6?email=YOUR_EMAIL&license_key=YOUR_KEY"
```
This installs the block to `components/beste/block/reveal6.tsx` plus the `badge7` eyebrow it uses.
### Quick start
The installed file exports `reveal6Demo` alongside the block: the exact props behind the preview above. Spread it to get a working comparison in one line.
tsxCopy
```
import { Reveal6, reveal6Demo } from "@/components/beste/block/reveal6";
export default function Page() {
return ;
}
```
Then replace the demo with your own props. Written out, a trimmed setup looks like this:
tsxCopy
```
import { Reveal6 } from "@/components/beste/block/reveal6";
export default function Page() {
return (
);
}
```
### 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 revealed to the left of the divider |
| after | CompareImage | – | The image revealed to the right of the divider |
| facts | CompareFact\[\] | \[\] | Ruled facts under the comparison |
| startPosition | number | 50 | Where the divider starts, as a percentage from the left |
| labels | Reveal6Labels | {} | Fixed strings that are not content: the handle's accessible name |
| className | string | – | Extra classes for the outer |
tsCopy
```
type CompareImage = {
src: string;
alt: string;
label: string;
};
type CompareFact = {
title: string;
value: string;
};
type Reveal6Labels = {
handleLabel?: string;
};
```
### Behavior notes
* The reveal is a `clip-path: inset()` on the before layer rather than a width change, so neither photograph is ever squashed: both stay `object-cover` at full frame size while only the visible slice changes.
* Dragging works anywhere in the frame, not only on the handle: `onPointerDown` captures the pointer on the container, so a fast drag that leaves the box still tracks until release.
* `touch-none` is set on the frame, which is what stops a touch drag from scrolling the page instead of moving the divider.
* The handle is a `role="slider"` button with `aria-valuemin`, `aria-valuemax` and a live `aria-valuenow`, and arrow keys nudge it in four percent steps, so the comparison is operable without a pointer.
* Both labels are always visible in the top corners, one light and one dark, so the reader knows which side is which before touching anything.
* `startPosition` is only the initial value: the component owns the position from then on, so passing a new one does not fight the user's drag.
* The frame switches 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/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/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/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/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/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.
## 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.