Area charts as Svelte 5 components.
shadcn/ui's 10 area charts, rebuilt on TanStack Charts as Svelte 5 components. Smooth, linear and step edges, stacked and 100% stacked bands, a gradient fill, a legend with icons and a time range kept in a rune. Each is one file with its card, free with an account.
Area charts
10 charts.
- Interactive Area ChartArea charts
- Stacked Area ChartArea charts
- Gradient Area ChartArea charts
- Area ChartArea charts
- Expanded Stacked Area ChartArea charts
- Step Area ChartArea charts
- Linear Area ChartArea charts
- Area Chart with LegendArea charts
- Area Chart with AxesArea charts
- Area Chart with IconsArea 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.
Area charts in other frameworks
The same 10 area 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
For one series over time, the Area Chart; for two that add up, the Stacked Area Chart, or the Expanded Stacked Area Chart when shares matter more than counts. The Gradient, Legend, Icons and Axes versions dress up that same stack, and the Interactive Area Chart adds three months of daily rows and a range select. Only that last one uses runes: in the other nine, `chartData`, `chartConfig` and `definition` are plain constants in `<script lang="ts">`.
Each edge is drawn twice, by an `areaY` and by a `lineY` along its top, and both take the same `curve`. The Area Chart passes `d3Curve(curveNatural)`, the Step Area Chart `d3Curve(curveStep)`, and the Linear Area Chart leaves `curve` out for straight segments. The Svelte kit's index re-exports those curves and `curveMonotoneX` from `d3-shape`, so you import them beside `ChartContainer`.
`let timeRange = $state("90d")` holds the range, and `const definition = $derived(chartDefinition(timeRange))` filters the daily rows, stacks them and builds the chart again whenever it changes. The select writes the rune back with `onValueChange={({ value: [value] }) => value && (timeRange = value)}`, since our Ark UI select reports an array. `ChartContainer` receives the new `definition` and the areas tween to their new shape.
The files take no props: `chartData` is a constant at the top of the script. Add `let { data } = $props()`, then wrap everything that reads the rows in `$derived`: the `stacked` rows from `fold` and `stackRowsY`, and the `defineChart(...)` call after them. Keep a `chartConfig` entry per field, since its `color` becomes the `--color-<key>` variable the areas paint with.
Yes. Each one installs as a single Svelte 5 component, such as `chart-area-gradient.svelte`, that you render from a route's `+page.svelte` like any other. It brings its own `Card`, so it can sit in a grid cell as it is; for a fixed height, pass `ChartContainer` a `class` the way the Interactive Area Chart does with `aspect-auto h-[250px] w-full`.
Put `<ChartLegend />` between `<ChartContainer>` and its closing tag, as the Area Chart with Legend does: the container renders it as its `children` snippet under the chart, and the legend reads labels and colors from the context the container sets. For icons, import one such as `TrendingDown` from `lucide-svelte/icons/trending-down` and set it as `icon` on a `chartConfig` entry, as the Area Chart with Icons does. `verticalAlign="top"` moves the legend above the chart.
Pass `ChartTooltipContent`'s options as an object in `ChartContainer`'s `tooltip` prop. The Area Chart sets `tooltip={{ indicator: "line" }}`, the Linear Area Chart `hideLabel: true`, and the Expanded Stacked Area Chart adds `valueKey: "visitors"` so its rows show visitor counts rather than each band's share. The Step Area Chart gives desktop lucide's `Activity` as its config `icon`, which takes the dot's place in the tooltip.
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
Shade your trends in Svelte.
All 10 Svelte area charts are free with an account. With Pro, your AI agent installs the dashboard, stats and monitoring blocks around them from a prompt.
Get Pro
- Cancel anytime
- Keep what you've shipped