shadcn.io is not affiliated with official shadcn/ui
Stats Overview Profile Block for Svelte
A developer stats profile with four metric tiles on shared hairlines and a week of seven bars that switch between commits and reviews, where pressing or focusing a bar reads that day.
Installation
Overview
Give a developer a one-glance scorecard with this stats overview for Svelte with Ark UI. A compact header holds the title and one sentence, and the frame under it opens on a small initials header, then four tiles on shared hairlines: contributions this year, day streak, projects and stars, with the large counts in compact notation. Under them a week of seven bars shows the last seven days, and a Toggle Group switches the bars between commits and reviews, each series scaled to its own busiest day with the week total worked out beside the title. Every bar is a button: pressing or focusing it reads that day in the status line, such as Fri 9 Oct: 8 commits. The bars are plain CSS with a short height transition that reduced motion turns off. It's built from Toggle Group, Avatar and Guides, with a CSS entrance only. For a developer profile, a stats page or any card that pairs a few totals with a short series.
FAQ
How do I use my own numbers?
Edit TILES for the four tiles and WEEK for the seven days, each with a count for commits and for reviews. The week totals, the bar heights and the status text are worked out from WEEK, and the bars are scaled to the busiest day of the series that is showing.
Why are the two series scaled separately?
Reviews are far fewer than commits, so one shared scale would flatten them. Each series fills the bar height with its own busiest day, and the status line and the total give the real counts, so the bars compare days within a series rather than between the two.
Is it a chart library?
No. The bars are button elements with a styled box inside, which keeps them focusable and keeps the page free of chart code. The bar row is laid out left to right in every language, since time runs that way.
Why does the week end on a fixed day?
The page never reads the clock: the seven days are typed ISO dates, so server and browser agree. Replace them with your own week when you load real data.
Is it accessible?
Each bar has a name that includes the day and its count, and a pressed state for the day being read. The status line is a polite live region, so pressing or tabbing across the bars reads each day aloud. The toggle group is named Show, and the tiles are a description list so each number is read with its label.