Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Storefront blocks

Pro

Rewards Tier Storefront Block for Vue

A tier ladder for a skincare shop: four tiers from Bronze to Platinum, a slider for what you would spend this year that names the tier it reaches and the dollars to the next, and a benefits table marking what that tier adds.

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 a shopper see what a year of orders would unlock, with this tier page for Vue with Ark UI. A header names the page and says what Aster & Oak is. A hairline frame with a plus mark on each corner holds three bands: a ladder of four tiers from Bronze to Platinum with the spend each one starts at, the tier held today marked Today and the tier the slider reaches marked Your choice; a Slider, from nothing to $1,500, labelled with what you would spend this year; and a table of benefits by tier (free shipping, rewards back, early access, birthday gift, returns window) with the reached tier's column tinted and a New mark on each benefit it adds. The tier and the dollars to the next one are worked out from the typed thresholds, and a status line says them in words. On a phone the table becomes the reached tier's benefits as a list. It's built from Slider, Badge and Guides, with a CSS entrance only. For a loyalty tier page, a membership explainer or a shop's VIP programme.

FAQ

How do I change the tiers and benefits?

Edit TIERS (a name and the yearly spend in whole dollars where it starts, in ascending order), BENEFITS (one value per tier, in the same order) and SPENT, what the shopper has spent so far. The reached tier is the highest one whose start the slider value meets.

How does the New mark work?

In the reached tier's column, a benefit gets New when its value differs from the tier below. Bronze, the lowest tier, never shows it.

Can I use the slider from the keyboard?

Yes. Arrow keys move it by $10, Home and End go to the ends, and the thumb reads its value as dollars this year. The status line is a polite live region, so each step is announced.

What stays local, and how do I wire it to real spend?

The year-to-date spend of $410 and the tiers are sample figures, and the slider is a what-if: it changes nothing but the page. Replace SPENT with the shopper's real total from your orders and the benefits with your programme; the tier, the gap and the marks follow.

How does it look on a phone?

The ladder is two columns of two tiers, the slider spans the width, and the table is replaced by a list of the reached tier's benefits so there is nothing to scroll sideways.

Is it accessible?

The tiers are an ordered list with the current choice marked with aria-current, the benefits table has column and row headers, the slider is named, and no meaning depends on the tint: the reached column is also named in the heading and the status line.

All 100 storefront blocks