Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Onboarding blocks

Pro

Support Tier Onboarding Block for Ark UI

A support step as a whole screen: three tiers as radio rows with a bar whose length follows the promised first reply on a square-root scale, a price a month, and what each includes.

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 new customers choose how fast they want an answer, with this support step for React with Ark UI. It is a whole screen of Helmhurst, a managed-database service: the page's rails and one band, a step header ("Step 3 of 5" and a hairline), and one framed panel of three tiers as native radios on shared hairlines. Community promises a first reply within 48 hours, Priority within 4 and Dedicated within 1. Each row draws a bar whose length follows that promise on a square-root scale, says the same in words, shows a price a month and opens its inclusions in a Collapsible. The panel ends on one sentence for the chosen tier, and the one Shine Button names it: "Choose Priority".

FAQ

Why a square-root scale?

On a straight scale one hour would be a sliver next to 48. The bar's length is the square root of the hours over the slowest promise, so 1 hour is about 14% of the bar and 4 hours about 29%. The scale is worked out from the typed hours in TIERS, and each row also says the promise in words, because a bar alone is not a number.

What are the rows made of?

Plain radio inputs in a labelled radio group, with a drawn dot. They need no extra script, are chosen with the arrow keys and Space, and keep a visible focus outline. The chosen row is tinted, its dot filled and its bar full-strength, so choosing never relies on colour.

Does opening What's included move the page?

Only what is under that row: the list opens in place and the rows below it make room. Choosing a tier does not change any height, because the sentence under the rows reserves its lines.

What stays local in the demo, and how do I wire it?

Everything: nothing is charged, and Choose Priority says "Priority chosen in this demo." In your app send the tier's id from choose and set the plan on your side; keep prices and promises in TIERS so the bars and sentences follow.

Can I use it from the keyboard?

Yes. Tab enters the radio group, the arrow keys choose a tier, and Tab then reaches each row's What's included button. Enter or Space opens it.

How does it look on a phone?

Each row keeps its name, price and bar across the full width, the sentence sits under the rows, and the primary pins to the bottom of the screen with its status line.

All 100 onboarding blocks