Progress rings for Svelte 5 apps.
shadcn/ui's 6 radial charts on TanStack Charts, as Svelte 5 components: a ring per browser over a muted track, names written on the rings, a circle grid with spokes, a rounded ring with the number in its center, a thick square-ended one and two series stacked on a half ring.
Radial charts
6 charts.
Need the page around it? With Pro, your AI agent installs dashboard, stats and monitoring blocks from a prompt, charts already laid out in them.
Get ProMore Svelte charts
The other 6 families. Each opens its charts on Svelte, live, with their code.
Radial charts in other frameworks
The same 6 radial charts on every framework. React, Vue, Svelte and Solid draw them with TanStack Charts; React on Recharts keeps shadcn/ui's originals.
Pricing
Charts are free. Pro builds the rest of the page
All 70 charts are free with an account. Pro adds 6,000+ blocks, from dashboards to pricing, the Pro backgrounds, buttons, shaders and text effects, and the MCP that installs them from a prompt.
4.9/5 out of 5 · 150+ reviewsfrom 150+ founders and developers.
Billing
Billed once a year in USD. Cancel anytime.
- How many people can use the license.
- Client work, SaaS products and anything you charge for.
- Page sections in 56 categories, from heroes and pricing tables to dashboards and settings, on every framework and UI library, in your theme.
- Complete Next.js sites for startups, SaaS, agencies and portfolios, every page designed, ready to ship.
- Your AI agent searches, previews and installs any component, block, icon or DESIGN.md from a prompt: 22 tools in Claude Code, Cursor, VS Code and 35 more clients.
- Buttons with motion and states of their own, from an arrow that slides in to a burst of confetti.
- Typewriters, scrambles, counters and more, for headlines, labels and numbers.
- Animated backgrounds for heroes, sections and cards, from a soft aurora to a flock that flees the cursor. Most are pure CSS.
- WebGPU shaders, from a slow aurora to a black hole, each drawing only while it's on screen.
- One design and one theme on all four: the components, blocks and effects are built for each framework.
- React on Base UI, Radix UI, React Aria or Ark UI: install the version for the library your project already uses. Vue, Svelte and Solid run on Ark UI.
- From a button to a date picker, a color picker or a guided tour: accessible, typed in TypeScript, each with live demos.
- Real-world patterns built from the components, in 53 galleries: forms, tables, menus, dialogs and more.
- Area, bar, line, pie, radar and radial charts on TanStack Charts, on every framework. React also gets the Recharts originals.
- Debounce, local storage, media queries and more: each hook is one typed file you own.
- From 222 libraries, Lucide, Heroicons, Tabler and Material Symbols among them, as SVG or a React component in one command.
- Stripe, Linear, Apple and 497 more: a brand's colors, typography and components in one file your AI agent builds from.
- Restyle every component and block at once: 8 styles, 8 grays, 18 colors and 5 radii, shared as a shadcn preset code.
- Priority requests are answered first.
Individual
For personal projects & open source
$32instead of $49/mo
$389 billed yearly
- Seats: 1 seat
- Commercial use: Personal & open source only
- Blocks: All 6,181 blocks
- Templates: All 14 templates
- MCP server: 38 AI clients
- Animated buttons: All 35 buttons
- Text effects: All 97 effects
- Backgrounds: All 100 backgrounds
- Shaders: All 100 shaders
- Frameworks: React, Vue, Svelte, Solid
- UI libraries: Base UI, Radix, Aria, Ark
- Components: All 174 components
- Examples: All 1,103 examples
- Charts: All 70 charts
- React hooks: All 35 hooks
- Icons: 294k+ icons
- DESIGN.md files: All 500 brands
- Theme builder: 8 styles × 18 colors
- Support: Standard
Team
Most popularFor freelancers, agencies & startups
$66instead of $99/mo
$789 billed yearly · ≈ $13/dev/mo
- Seats: Up to 5 seats
- Commercial use: Included
- Blocks: All 6,181 blocks
- Templates: All 14 templates
- MCP server: 38 AI clients
- Animated buttons: All 35 buttons
- Text effects: All 97 effects
- Backgrounds: All 100 backgrounds
- Shaders: All 100 shaders
- Frameworks: React, Vue, Svelte, Solid
- UI libraries: Base UI, Radix, Aria, Ark
- Components: All 174 components
- Examples: All 1,103 examples
- Charts: All 70 charts
- React hooks: All 35 hooks
- Icons: 294k+ icons
- DESIGN.md files: All 500 brands
- Theme builder: 8 styles × 18 colors
- Support: Priority
Organization
For companies with larger teams
$132instead of $199/mo
$1,589 billed yearly
- Seats: Unlimited seats
- Commercial use: Included
- Blocks: All 6,181 blocks
- Templates: All 14 templates
- MCP server: 38 AI clients
- Animated buttons: All 35 buttons
- Text effects: All 97 effects
- Backgrounds: All 100 backgrounds
- Shaders: All 100 shaders
- Frameworks: React, Vue, Svelte, Solid
- UI libraries: Base UI, Radix, Aria, Ark
- Components: All 174 components
- Examples: All 1,103 examples
- Charts: All 70 charts
- React hooks: All 35 hooks
- Icons: 294k+ icons
- DESIGN.md files: All 500 brands
- Theme builder: 8 styles × 18 colors
- Support: Priority
Billed once a year in USD. Cancel anytime.
Individual
For personal projects & open source
$32instead of $49/mo
$389 billed yearly
- How many people can use the license.Seats: 1 seat
- Client work, SaaS products and anything you charge for.Commercial use: Personal & open source only
- Page sections in 56 categories, from heroes and pricing tables to dashboards and settings, on every framework and UI library, in your theme.Blocks: All 6,181 blocks
- Complete Next.js sites for startups, SaaS, agencies and portfolios, every page designed, ready to ship.Templates: All 14 templates
- Your AI agent searches, previews and installs any component, block, icon or DESIGN.md from a prompt: 22 tools in Claude Code, Cursor, VS Code and 35 more clients.MCP server: 38 AI clients
- Buttons with motion and states of their own, from an arrow that slides in to a burst of confetti.Animated buttons: All 35 buttons
- Typewriters, scrambles, counters and more, for headlines, labels and numbers.Text effects: All 97 effects
- Animated backgrounds for heroes, sections and cards, from a soft aurora to a flock that flees the cursor. Most are pure CSS.Backgrounds: All 100 backgrounds
- WebGPU shaders, from a slow aurora to a black hole, each drawing only while it's on screen.Shaders: All 100 shaders
- One design and one theme on all four: the components, blocks and effects are built for each framework.Frameworks: React, Vue, Svelte, Solid
- React on Base UI, Radix UI, React Aria or Ark UI: install the version for the library your project already uses. Vue, Svelte and Solid run on Ark UI.UI libraries: Base UI, Radix, Aria, Ark
- From a button to a date picker, a color picker or a guided tour: accessible, typed in TypeScript, each with live demos.Components: All 174 components
- Real-world patterns built from the components, in 53 galleries: forms, tables, menus, dialogs and more.Examples: All 1,103 examples
- Area, bar, line, pie, radar and radial charts on TanStack Charts, on every framework. React also gets the Recharts originals.Charts: All 70 charts
- Debounce, local storage, media queries and more: each hook is one typed file you own.React hooks: All 35 hooks
- From 222 libraries, Lucide, Heroicons, Tabler and Material Symbols among them, as SVG or a React component in one command.Icons: 294k+ icons
- Stripe, Linear, Apple and 497 more: a brand's colors, typography and components in one file your AI agent builds from.DESIGN.md files: All 500 brands
- Restyle every component and block at once: 8 styles, 8 grays, 18 colors and 5 radii, shared as a shadcn preset code.Theme builder: 8 styles × 18 colors
- Priority requests are answered first.Support: Standard
Team
Most popularFor freelancers, agencies & startups
$66instead of $99/mo
$789 billed yearly · ≈ $13/dev/mo
Everything in Individual, plus
- How many people can use the license.Seats: Up to 5 seats
- Client work, SaaS products and anything you charge for.Commercial use: Included
- Priority requests are answered first.Support: Priority
Organization
For companies with larger teams
$132instead of $199/mo
$1,589 billed yearly
Everything in Team, plus
- How many people can use the license.Seats: Unlimited seats
- Secure checkout via Stripe
- Code lives in your repo
- Keep what you've shipped if you cancel
- License terms
FAQ
Frequently asked questions
To rank a few categories, the Radial Chart gives each browser a ring as long as its count; the Labels version writes the names on the rings, and the Grid version draws circles and spokes instead of tracks. For one number, the Radial Chart with Text is a thin ring with rounded ends and the count in the middle, and the Custom Shape version a thicker one with square ends. The Stacked Radial Chart splits a half ring between desktop and mobile and prints their sum.
In the Radial Chart, the angle scale runs from 0 to `maxVisitors`, the largest count, so Chrome makes a full turn and the others a part of it. The Text and Custom Shape versions use a bare `scaleLinear`, so their single value always fills the sweep `endAngle` sets. To show progress toward a target instead, put that target in the angle scale's domain rather than letting it fit the value.
Two `radialText` marks at `radius: () => 0` in a `decorative()` `polar()` layer: the count in bold `var(--foreground)`, and Visitors under it in `var(--muted-foreground)`. The Text and Custom Shape versions read the count from `chartData[0].visitors.toLocaleString()`, and the Stacked Radial Chart from `totalVisitors`, the sum of its one row. Both are worked out once in the script, so if the row comes in as a prop, make the total a `$derived`.
Set `polar()`'s `startAngle` and `endAngle`. Each file has a `rechartsAngle()` helper that turns Recharts' degrees into TanStack's radians, so the Stacked Radial Chart's half ring runs from `rechartsAngle(0)` to `rechartsAngle(180)`. The Text version stops at 250 degrees and the Custom Shape version at 100, with the center text left where it is.
`cornerRadius` on `radialBarAngle` rounds the ends: 10 in the Text version, 5 in the stacked one, none in Custom Shape. The radius scale's `range` sets the thickness in pixels, `[80, 90]` for the thin ring and `[65, 95]` for the thick one, and the track behind is `var(--muted)`. `ChartContainer`'s `class="mx-auto aspect-square max-h-[250px]"` keeps the card square, so the ring stays round at any width.
No: all six are static, with `chartData`, `chartConfig` and `definition` as constants in `<script lang="ts">`. To drive a progress ring from a number, add `let { value } = $props()`, build the row from it, and wrap the row and the `defineChart(...)` call in `$derived`, so the ring redraws when the parent passes a new value.
Yes. Each `ChartContainer` takes a unique id from Svelte's `$props.id()`, writes its `--color-<key>` variables on its own `<div>` and scopes any `theme` colors to its `data-chart` attribute, so one ring's config never leaks into the next. Render the component once per value and lay the cards out in a grid.
`ariaLabel` names the chart by its card title, but the count in the middle is SVG text. Pass it in `ChartContainer`'s `ariaDescription` prop as well, or keep it in the card's description, so it doesn't depend on reading the graphic.
Signed in, copy the chart's command: `npx shadcn-svelte@latest add` with its URL. It adds the chart to `components/charts`, the `tanstack-chart` kit to your ui folder, and `@tanstack/charts`. Import the chart and render it.
Yes. Every chart is free to use in personal and commercial projects. Seeing the code and installing it takes a free account, one tap with Google or GitHub. Pro is the site's paid plan for blocks, the Pro collections and the MCP; you don't need it for charts.
4.9 out of 5 from 150+ developers
Your numbers, in rings.
The 6 Svelte radial charts are free with an account. With Pro, your AI agent installs the dashboard, stats and monitoring blocks your rings sit in, from a prompt.
Get Pro
- Cancel anytime
- Keep what you've shipped