Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

CTA blocks

Pro

Split Panel Tier Benefits CTA Block for Ark UI

A reverse split call to action for a partner program: a referral dial in a hairline frame at the start, beside the tiers as ruled rows and a Shine Button that names your tier.

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

Show a partner program's tiers as something to turn with this reverse split dial section, between solid rails. At the start, a Circular Slider of referrals a quarter, from 0 to 45, sits in a hairline frame with + marks on its corners, with a ring of tier arcs around it and a tick where each tier begins, all in foreground tones. Dragging the dial or stepping it with the arrow keys moves the centre, which names the tier and shows its commission with Sliding Number. Past a solid divider that meets the top rule sit a Badge, a headline, a short paragraph, the four tiers as ruled rows with their referral ranges and commission (the row for your tier is bold with a dot) and the Shine Button, the only primary control, which names your tier. Every figure comes from one list of tiers, so the ticks, the arcs, the ranges and the commission can't disagree. The copy comes first in the DOM and on phones, so the button lands on the first screen; the dial follows. Built with Circular Slider, Sliding Number, Badge, Shine Button, Guides and Tailwind CSS, with CSS transitions only. For partner, affiliate and referral programs, loyalty levels and any pricing that depends on a number the visitor controls.

FAQ

How do I change the tiers, the commission and the range of the dial?

Edit the TIERS array at the top of the file: each tier has its name, the referrals a quarter it starts at (from) and its commission rate. The first tier must start at 0. The ticks on the dial, the arcs around it, the ranges in the list, the centre and the button all read that array. The dial turns a full circle over MAX_REFERRALS, which should be a number that divides 360 so a referral is a whole number of degrees; change it to 36 or 60 and everything follows. START is where it rests at first.

How do I connect the button to an application form?

The button is a real link: point its href at your application page and add the tier the visitor settled on, for example /partners/apply?tier=gold. It's a ShineButton with asChild around an a element. The tier is in the tier value the block already keeps.

How do I use the dial with a keyboard or a screen reader?

Tab to the dial, then the arrow keys turn it one referral at a time, Home goes to zero and End to the top. Its name reads the current state, as in "Referrals a quarter. 18 referrals a quarter: Gold tier, 25% commission." Once you stop turning it for a moment, one polite message says the new tier and commission; nothing is announced while you turn or when the page loads. The dial's own value is an angle, so the list beside it is the plain-text way to read every tier.

How does dragging the dial work?

Grab the knob and turn: the dial follows the pointer around the ring in whole referrals, and the centre updates as it goes. Grabbing the ring somewhere else turns the dial by how far the pointer moves from there, instead of jumping the knob to the pointer.

What changes with reduced motion?

The arcs change tone, the list's marker dot and the digits in the centre roll, and the knob eases. With reduced motion set, they all change at once.

Does it work right to left?

The text and the layout mirror, with the dial moving to the other side, but the dial itself doesn't: it's a circle that turns clockwise from the top in every writing direction, as a clock does, so it keeps its own left-to-right setting. Its percentages and ranges are set in their own boxes, so "25%" and "15 to 29" never reorder.

All 100 cta blocks