shadcn.io is not affiliated with official shadcn/ui
Tick Dial Hero Metric Stats Block for React
A hero figure for a crowdfunding page as a dial of sixty radial ticks, the share raised drawn at full weight, with the amount raised in the middle and the percent funded beside it.
Installation
Overview
A tick dial for React with Base UI. Sixty short ticks run round a clock face from twelve o'clock; the first ones, as many as the share of the goal raised, are drawn at full weight and the rest faint, and the amount raised, "$184K of $250K goal", sits in the middle. The dial is a framed square (a hairline frame with a + on each corner) at the start of a reverse split. At the end, a header that says what is left, "$65,680 to go, 19 days left", the percent funded as a big number and four facts (raised, still to raise, backers, average pledge) in one hairline frame. The ticks sweep in once. The ticks, the middle, the percent and the facts are all computed from one set of campaign figures, so the dial and the text always agree. It is not a continuous ring and has no needle. It is built from Guides, the Sliding Number, a small inline SVG and CSS transitions. For fundraising, goals and quotas.
FAQ
How do I change the campaign?
Edit CAMPAIGN at the top of the file: the amount raised and the goal, the backers and the days left. The percent, the number of lit ticks (LIT, out of TICKS), the amount still to raise, the average pledge and the dial's text alternative are all worked out from it.
How are the ticks drawn?
Each tick is a short path from an inner to an outer radius, six degrees from the last, computed when the module loads and drawn in a 200 by 200 SVG. Lit ticks use the text colour and the others a faint 15% of it. The middle of the dial is HTML, so it stays crisp and selectable.
Can I use a different number of ticks?
Yes. Change TICKS: the geometry, the lit count and the text alternative follow. Sixty reads like a clock face; forty or a hundred suits a goal that is easier to think of in tens.
Is it accessible?
Yes. The dial is an image whose name says how many ticks are lit and the share of the goal, and the same numbers are in the text beside it: the percent, the amount to go and the four facts, as a description list. Values sit in bdi elements so a right-to-left page keeps them in order, and the dial is dir="ltr".
Related
- Pro
Hero Metric Card Stats
Hero metricOne headline figure for a treasury tool, cash on hand in a big number inside a card in a card, with a change pill, a comparison and a two-line footnote that says when it was read and from where.
- Pro
Delta Arrow Hero Metric Stats
Hero metricA hero figure for an ad-spend tool beside an oversized arrow whose angle is the slope of the change, with a pill for the percent and its comparison.
- Pro
Goal Ring Tiles Stats
Goals and progressFour goal tiles for an OKR tool, each a thin ring with the part done drawn solid, the part today's pace will add drawn lighter after it and a tick for the target, with the projected finish in words.
- Pro
Half Donut Card Stats
Parts of a wholeA team's weekly capacity as a 180-degree arc of four segments with the total in its foot and a four-cell legend band, with no needle: one whole, shared out.
- Pro
Gauge Cluster Features
Metrics and chartsThree semicircle gauges in one framed band, driven by a single "Simulate load" slider: CPU, memory and queue wait, each with a needle, an arc, a reading and a state.
- Pro
Ring Chart Metric Logos
MetricsA retention ring for an expense-report tool in a framed figure beside the claim and three supporting facts, with a closing strip of six customer wordmarks.