Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Pricing blocks

Pro

Side by Side Pricing Block for Svelte

A before and after reveal: drag a handle across one photo editor to turn the Free version into the Pro version, with each half's price and button right under it.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Let visitors see the upgrade instead of reading it with this side by side pricing section, shown here for Gleam, a photo editor. One editor is drawn twice in a single figure, Free on the left and Pro on the right, split by a handle with a round grip that you drag, or move with the arrow keys. On the Free side the tools Retouch, Remove object and Batch carry a lock, three of the six adjustments are dimmed and locked, the export reads JPG at 1080 px, and a "Made with Gleam" mark sits on the photo. On the Pro side every tool is open, the photo has more depth, and the export reads RAW at 6K. Under each half, in one band of cells split by a hairline, are its price and button: Free $0 with an outline button, Pro $5.99 a month with the section's only filled Shine Button. The figure is 384 px tall, so both buttons are on the first screen. Built with Guides, Shine Button and Lucide icons, with a native range input as the handle, and CSS only. For freemium products where the paid version is visibly better: editors, exporters, recorders.

FAQ

How does the reveal work?

The figure draws the editor twice: the Free version fills the box, and the Pro version sits on top of it, clipped from the handle's position to the far edge with a CSS clip-path. The handle is a native <input type="range"> laid invisibly over the whole figure, so a pointer or finger drag anywhere moves it, and the grip and line follow its value. There is no drag code to maintain, and the figure doesn't use a motion library.

Can it be used with a keyboard and a screen reader?

Yes. The range input is the one focusable element: Tab reaches it, the arrow keys move the handle one percent at a time, and Home and End jump to either edge. It's named "Compare Free and Pro" and its value text says where the split is. The two drawings are decoration, hidden from assistive technology, and the plans under them carry the same information as text, with a price, a description and a button each.

Does dragging block scrolling on a phone?

Only sideways. The range input uses touch-action: pan-y, so a finger moving up or down scrolls the page as usual and a finger moving across drags the handle. On a phone the adjustments panel is left out so the photo has room, and the two plans stack under the figure.

How do I change the editor and the plans?

The figure's data are TOOLS (each with an icon and whether it is locked on Free) and ADJUSTMENTS; the Editor component draws the version for Free or for Pro, so add a lock or a difference there. The plans, with their prices, a line of what they include, and the button's text and href, are in PLANS. START is where the handle begins, 50 by default.

How do I connect the buttons to sign-up and checkout?

Each button is a real link. It's a ShineButton with asChild around an a element. Point Free at your download or sign-up page and Pro at a checkout with the trial, so the visitor lands on the plan they were looking at.

Does the figure mirror in right-to-left languages?

No, on purpose: it is a picture of a product's interface, so it stays left to right, with Free on the left and Pro on the right. The text around it, the header and the plans, follows the page's direction.

All 108 pricing blocks