Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Success blocks

Pro

Goal Exceeded Success Block for React Aria

A page for a revenue goal passed at 108%: a bullet chart with a tick at 100%, three sub-goals each with a signed difference, a group of buttons that raises the next target by 10, 20 or 30 percent, and a Celebrate button that throws confetti.

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 quarter that beat its target with this confirmation page for React with React Aria. It is the page Quotabeam, a revenue-goal tracker, shows when Q3 closes at 108% of plan: the page's side rails and one band frame it, and the heading says how far past the target the quarter landed. One framed panel draws a bullet chart, a wide bar with a tick at 100% and the result counted up by Counting Number, then three sub-goals (new business, expansion, renewals) each with its own bar and a signed difference. A Toggle Group raises the next target by 10, 20 or 30 percent and the new target and its gap are rewritten in one live line. The Shine Button sets the next target and the only other action, an outline Confetti Button, throws a short burst. For sales, goal and OKR tools.

FAQ

What stays in the page, and how do I wire it for real?

Nothing was saved. The amounts are typed in GOALS in cents, and Set the next target only changes the live line to say it was set in this demo. To wire it, build GOALS from your own targets and bookings, save the chosen raise from the button's handler, and rename the quarter and dates.

Where do the percentages come from?

From the amounts. The whole quarter is the sum of the three sub-goals, each percentage is rounded from its own two amounts, and each difference is the booked amount minus the target, signed, so the heading, the chart and the rows always agree. The next target is the old one plus the chosen percent, rounded to a thousand dollars.

How is the chart read without seeing it?

The bars are drawings hidden from assistive technology; every figure is also written as text ("$540,000 of $500,000", "112% of $250,000", "+$30,000 over"). The tick sits at 100% on a scale that runs to 120%, so a result past the target has room to show.

What does Celebrate do with reduced motion?

Nothing visible: the burst is hidden for a visitor who asked for less motion, and the button still works. Otherwise it throws a short burst from where it was pressed, in the theme's own tones, once per press. It never loops.

Can I use it with the keyboard?

Yes. The three raise buttons are one group with the arrow keys moving between them, and choosing one never moves focus. The two actions are ordinary buttons.

All 100 success blocks