For AI Agents
Hand your agent this brief or the ReUI MCP, not a screenshot. Installs with a ReUI Pro or Ultimate license.
Best for: A 4 stage stacked area funnel whose stage tiles read the last point of a 7 day to 12 month Select, with every stage in one tooltip
When to use
- A volume trend over time drawn as a gradient filled area under a headline total and period tabs
- Funnel stages stacked as layered areas so each step reads against the one before it
When not to use
- Sales against views on 2 independent scales, one line solid and one dashed: use the Sales vs Traffic block
- Product activation from signup to week 4 retention with a cohort grid below: use the Activation Funnel block
- A metric judged against a goal, a forecast or a second series drawn as a stroke: use the Composed Chart blocks
- Several KPI tiles, each with a tiny trend tucked under its value: use the Sparkline blocks
Agent notes
- Replace
conversionFunnelDataperPeriodKey; the stage tiles show only the last row of the selected period, not a period total - Trend chips read the hand set
periodChanges, not a change computed fromconversionFunnelData - The 4
Areaseries share onestackId, so the top edge plots the sum of all stages, not store visits - Gradient fills are
linearGradientdefs referenced by id, so a renamed series needs its gradient id renamed too
https://reui.io/blocks/chart/area-chart/chart-16.mdget_block("chart-16")npx shadcn@latest add @reui/chart-16Shadcn Conversion Funnel Block
Conversion Funnel Stacked Area Chart with Stage KPI Tiles and Period Selector. Part of the ReUI Shadcn Area Chart blocks collection.
Ecommerce funnel as a stacked area chart over visits, product views, add to cart, and checkout, with four KPI tiles (value plus trend), a 7d/30d/90d/12m period selector, and custom tooltip. ReUI Frame, shadcn ChartContainer and Select.
It is composed from Frame, Select, so every part of it is a primitive you can restyle with your own design tokens.
What You Can Build With the Conversion Funnel Block
- Install it with the ReUI registry command in the toolbar above, then swap the placeholder content, data wiring, and business logic for your own.
- Compare it across all eight ReUI styles and both the Base UI and Radix bases in the customizer before committing to one direction.
- Combine it with the other Shadcn Area Chart blocks to assemble a full screen instead of a single section.
All Shadcn Area Chart Blocks
The rest of this category, each on its own page with a live preview, the components it is built from, and the install command.
- Campaign Impressions Compact campaign analytics card with gradient area chart and 5D to 6M period tabs
- Orders Overview Orders overview card with period tabs, stat tiles, and animated gradient area chart
Related Shadcn Charts Block Categories
- Bar Chart (14) Bar and column charts, grouped and stacked bars, lollipop stems and segmented bar meters for comparing values.
- Composed Chart (5) Composed charts that layer areas and lines on one axis, with reference lines, goals and release markers.
- Line Chart (6) Line chart cards with single and multi-series lines, dual axes, reference lines and metric switchers.
- Pie Chart (2) Pie and donut chart cards with center totals, per-segment legends and period tabs for share of a whole.
- Radial Chart (3) Radial gauges with semicircle and full arcs, segmented rings and status labels for progress toward a target.
- Sparkline (11) KPI tiles and metric lists where each value pairs with a small line, area or bar sparkline and a delta.
All Shadcn Block Groups
Browse the full ReUI Shadcn blocks library by product surface. Each group bundles category-level blocks you can mix and match across your project.
- Shadcn Application Blocks (301) Browse 301 Shadcn Application blocks across 23 categories.
- Shadcn Data Grid Blocks (42) Browse 42 Shadcn Data Grid blocks across 9 categories.
- Shadcn Charts Blocks (47) Browse 47 Shadcn Charts blocks across 8 categories.
- Shadcn Solutions Blocks (74) Browse 74 Shadcn Solutions blocks across 10 categories.
- Shadcn AI & Agents Blocks (18) Browse 18 Shadcn AI & Agents blocks across 2 categories.
- Shadcn eCommerce Blocks (87) Browse 87 Shadcn eCommerce blocks across 13 categories.
- Shadcn Marketing Blocks (67) Browse 67 Shadcn Marketing blocks across 8 categories.
Frequently Asked Questions
When should I use the Conversion Funnel block?
Use it for a 4 stage stacked area funnel whose stage tiles read the last point of a 7 day to 12 month Select, with every stage in one tooltip.
The Area Chart category fits:
- A volume trend over time drawn as a gradient filled area under a headline total and period tabs
- Funnel stages stacked as layered areas so each step reads against the one before it
For sales against views on 2 independent scales, one line solid and one dashed, use the Sales vs Traffic block. For product activation from signup to week 4 retention with a cohort grid below, use the Activation Funnel block. For a metric judged against a goal, a forecast or a second series drawn as a stroke, use the Composed Chart blocks. For several KPI tiles, each with a tiny trend tucked under its value, use the Sparkline blocks.
What is the Conversion Funnel block built with?
Can I restyle the Conversion Funnel block?
How should I use Shadcn area chart blocks in a real project?
Start building with ReUI Pro today.
Every Pro block, every style, and every future addition, with one license for unlimited projects.
From $249, once. Lifetime updates.