Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Stats blocks

Pro

Gradient Fill Area Chart Stats Block for Ark UI

A cumulative earnings curve in a card in card, filled with the text colour fading in four stops, with dots on the curve where it crossed $10K, $50K and $100K.

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

A cumulative area chart for React with Ark UI. A centred header says how long the first $100K took, then a card in card (a muted shell around a raised panel) holds the total earned since launch (rolling up once in view), the last month's takings and an eighteen-month curve. The fill under the curve is your text colour fading to nothing in four stops, so it follows light, dark and every preset without a colour gradient. Three dots sit on the curve where it crossed $10K, $50K and $100K, each placed between the two months it fell between and labelled above it with the month; on a phone the same milestones are a list under the chart. Everything is computed from one list of monthly takings. For creators, funds and any page that celebrates a total built up over time.

FAQ

How do I change the earnings and the milestones?

Edit MONTHLY (dollars taken in each month) and MILESTONES_AT at the top of the file. The running totals, the curve, the dots, the labels and the headline are computed from them. If the total goes past $120K, raise CEILING and the GRIDLINES.

How is the four-stop fade made?

The area is filled with the text colour at 30% and a CSS mask fades it from full strength under the line to 55%, 20% and then nothing at the foot of the chart. There is no gradient definition, so nothing needs a unique id, and the fade works in any theme.

How are the dots placed?

For each total the block finds the first month whose running total reached it, then interpolates along the straight segment the chart draws between that month and the one before. The dot's position and the label's position are the same percentages, so they stay with the curve at any width.

Is it accessible?

The chart is an image with a text name that gives the start, the end and the month each milestone was crossed. On a phone the milestones are a visible list; from sm the same list stays for screen readers while the labels above the dots are decorative. The total and the last month are a description list, values sit in bdi elements and the chart stays left to right in right-to-left pages.

What moves, and what happens with reduced motion?

The curve draws from the start to the end, the fill fades in and the total rolls up when it scrolls into view. With reduced motion all of it is off and the finished chart is simply there.

How does it fit on a phone?

The chart is 3:2 instead of 2:1 and the labels above the dots give way to a list of three rows under the chart. The card keeps its shell, and nothing scrolls sideways at 320 pixels.

All 122 stats blocks