Ark UI stats blocks.

They are 122 React sections for showing numbers on a dashboard or a landing page, in 14 groups: area and line, bar and column, distributions, parts of a whole, heatmaps, funnels, hero metric, kpi bands and tiles, sparklines, live, comparisons, goals and progress, leaderboards, tables. They cover headline figures, KPI bands, charts, goals, leaderboards and live readouts.

Hero Metric Card Stats puts one headline figure with its change in a card, Connected KPI Bar Stats lines a few figures up between shared hairlines, and Sparkline Stats gives each figure its own small trend. Goal Ring Tiles Stats shows progress toward targets and Ranked List Leaderboard Stats ranks names with scores.

Area Chart Hero Stats, Vertical Stages Funnel Stats, Donut Center Readout Stats, Calendar Month Heatmap Stats and Distribution Card Histogram Stats are drawn as inline SVG and CSS inside the block. No chart library is imported, so there is nothing to install beyond the block's own components.

The numbers are typed series and lists at the top of the file, and the figures, changes, headlines and drawings are all computed from them, so the text and the picture always agree. The companies and data are invented samples.

Replace the typed series with your own arrays, oldest first, and keep the computations. For example Sparkline Stats works its figure, its change on the period before and its line from one daily series, and Hero Metric Card Stats computes its change and headline from a balance and its burn. Fetch the data in your page and pass it in.

The Live group does not open a socket: each block plays a fixed script on a timer, once it is on screen, and then holds. To go live, replace the script with your stream (a WebSocket, server-sent events or polling) and append readings to the same state. Live Metrics Stats moves four figures from one shared sample index so they never disagree.

Keep the pause control the live blocks give you. It is a ghost button with a pressed state, and once the script holds or motion is reduced it stays in place and says the reading is held. The word beside it (Live, Paused, Held or Still) is a polite live region, so pausing is announced but each new number is not.

The live blocks check `prefers-reduced-motion` and stay on the first reading without ticking, and the badge or word says Still. Keep that branch when you connect real data, and show the latest value in place instead of rolling digits.

The blocks show direction with an arrow and a sign in the text colour, not green and red, because a falling bounce rate or refund count is good news. If your product wants colour, add it on the change cell, and keep the arrow and sign so the meaning does not depend on colour.

This page lists 122 of the category's 122 stats blocks for React on Ark UI. The category comes in React (Base UI, React Aria, Ark UI and Radix UI), Vue, Svelte and Solid; the framework and UI library pickers at the top of any block's page switch between them.

The stats blocks here are written on Ark UI primitives; the layout, the copy and the theme tokens are the same on every base, and the install path follows it (/r/ark/stats-activity-streak.json). The other bases are one picker away from /stats-block/ark.

Each block is TypeScript and Tailwind CSS v4, styled with your theme's tokens, and imports our components (installed with it) on Ark UI. Icons come from lucide-react.

Open a block, copy its command and run it: `npx shadcn@latest add` with the block's registry URL, such as /r/ark/stats-activity-streak.json for Activity Streak Stats. The code is copied into your project and it's yours to edit.

The block's file and the components it imports: Activity Streak Stats brings Guides and Sliding Number, installed before it. Nothing else changes in your project.

Use the filters above the grid: 14 kinds of stats block, led by goals and progress (15), area and line (13), bar and column (12) and kpi bands and tiles (12), and sort by popular or name. A good first look: Activity Streak Stats, Endpoint Latency Range Stats and Dual Series Area Chart Stats. Each card opens the block's live page.

Every block draws the same page column and side rails with a top rule only (the Guides component), so a stats block lines up with the one above and below it. Stack one per section and the rails read as a single drawing; pick across the charts, figures and progress and tables kinds.

Open its page and use the full-screen viewer (/view/stats/ark/activity-streak) or the device-width previews. Every preview is free for everyone; only the code needs Pro.

Each stats block uses semantic HTML: one heading level, real lists and labelled controls. Interactive parts sit on Ark UI, a headless library that follows the WAI-ARIA patterns, and the layouts use logical properties so they hold in right-to-left languages.

Yes. They use semantic tokens only (bg-card, text-muted-foreground), never palette colors, so they follow your preset, radius and dark mode. The primary color marks one action per block and is never a background.

No animation library: the stats blocks' motion is CSS (transitions, entrance animations and SVG), and it stands still under prefers-reduced-motion.

The previews are free for everyone. The code of all 122 stats blocks is Pro, as is every block: Pro unlocks the code, the install command and the MCP.

Only with a Team or Organization license: client work, SaaS products and anything your users pay for. The Individual license is for personal, non-commercial projects. See the license page for the full terms.

You keep using what you installed in your existing projects, but get no new downloads or updates, and the MCP stops answering. A Lifetime license includes all future updates.

No. You can use them in your own End Products, but not redistribute the code or designs on their own, or in a UI library, kit, template or website builder.

With Pro, yes: the MCP server (22 tools, one personal URL from /dashboard/mcp) lets your agent search_blocks for a stats block, read it with get_block and install it on your React on Ark UI stack.

Pass `category: "stats"` to search_blocks to search only the 122 stats blocks, or to list_blocks for the 14 groups with their blocks. get_block then returns one with its install command.

plan_page plans a page as a stack of blocks for a brief. Pass `sections` with category ids, such as ["hero", "stats", "footer"], to force the order; each section gets a pick and two alternatives, and get_block installs the stack.