shadcn.io is not affiliated with official shadcn/ui
Split Stats Awards Block for Ark UI
A split for an analytics tool: three figures at the start (awards won, a selection rate like 1 in 60 and years running) and Recent highlights at the end, an ordered list of the four newest awards with a small drawn mark each.
Installation
Overview
A stats split for React with Ark UI. At the start of the split are the header and three figures in a description list: awards won, the selection rate written as "1 in 60" (entries submitted divided by awards won) and years running. At the end, "Recent highlights" is an ordered list of the four newest awards, each with a small mark drawn in SVG, its category and its date. A divider with a + mark where it meets the top rule separates the halves; on a phone the figures come first and the highlights follow under a rule. It's built from Guides, inline SVG and your theme's tokens. The awards and entries are made up for the example.
FAQ
How do I change the figures?
Edit AWARDS (each with an ISO date, a category, a shape and a title) and SUBMISSIONS (how many entries you submitted each year). The count, the categories, the years running and the selection rate are all worked out from those two lists, and the highlights are the four newest awards.
How is the selection rate worked out?
Total entries divided by awards won, rounded to a whole number and written "1 in N". With 480 entries and 8 awards that is 1 in 60. The detail line under it shows both figures.
How do I change a mark?
Each award names a shape: cup, star, shield, medal or rosette. The shapes live in MARKS, one list of stroked paths in a 24 by 24 box each, drawn in your foreground colour. Add a shape by adding a key. The marks are hidden from assistive technology; the award's name, category and date are text.
How does it read to a screen reader?
The figures are a description list, so each reads as a term and its value. The highlights are an ordered list of headings with the category and the date, and the date is a time element.