shadcn.io is not affiliated with official shadcn/ui
Community Growth Chart About Block for React
A community's growth in one framed area chart, month by month for a year, beside three channel counts (forum, chat, office hours) that roll up as they scroll into view.
Installation
Overview
A community growth block for React with Base UI, written for Gatherly, a fictional place where developers help each other. The title states the growth in a sentence worked out from the data: the community is three times the size it was a year ago. Beside it, a split on a solid divider: at the start, a framed area chart of members by month, from twelve months ago to now, with the same two numbers repeated in a caption; at the end, three channel counts (forum members, chat members, office-hours seats), each with how many joined this month and one line on how alive the channel is. The counts roll up once when they scroll into view and keep their final width, so nothing shifts while they count; with reduced motion they are simply there. On a phone the chart sits between the title and the counts. For community pages, developer-relations updates and any about page that has to show a community is growing, not just big. The figures are example data.
FAQ
How do I change the numbers?
The chart reads MEMBERS, one reading per month with the oldest first, and the title's multiple, the axis ceiling, the curve and the caption are all computed from it, so the text and the drawing always agree. The three counts are CHANNELS: a label, a total, how many joined this month and a line of detail.
Is the chart a chart library?
No. It is one SVG path stretched into a box, with the gridlines, the axis numbers and the end dot as plain HTML placed by percentage, so it needs no chart code and renders on the server. The chart box is dir="ltr" so the time axis never flips in a right-to-left layout.
How is the chart read by a screen reader?
The chart is one image with a text name that gives the first month, the last month and the difference; the caption under it repeats the two numbers. The drawing's own parts are hidden from assistive technology so nothing is read twice. The counts are a description list: each channel is a term followed by its figure and its detail.
Related
- Pro
By The Numbers Bento About
NumbersAn asymmetric bento of company figures for an expense tool: a lead cell with the customer count over a twelve-bar trend, and five smaller cells tagged People, Customers or Product, each footnoted with how it was counted.
- Pro
Counters Row About
NumbersFour counters for an uptime monitor in one hairline band, each rolling up once on view with an arrow and a sign for how it moved on last month, under a header that says when the figures were last updated.
- Pro
Large Figures About
NumbersFour huge figures for a beekeeping marketplace in a two by two grid with one word under each and nothing else, split by a cross of two hairlines with plus marks.
- Pro
Stacked Total Impact About
NumbersA total built from its parts for a scheduling tool: a framed lead with the hours returned over a stacked bar and a legend whose numbers add up to it, and a band of three smaller impact cells.
- Pro
Area Chart Hero Stats
Area and lineA rail-to-rail area chart for a farm-shop sales tool: twelve months of sales fading out toward the foot, with the latest month's figure and its change laid over the top corner.
- Pro
Two Column About
Company storyA freight forwarder's story in two columns on a solid divider: prose at the start, and six figures at the end as a description list with numbers that roll up once on view, one ruled row each.