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: Sales and views on 2 independent hidden axes, solid against dashed, with summed period totals, sales in pounds, and a 30 or 90 day Select
When to use
- A balance, price or revenue trend as a single stroke with period tabs and a peak marker
- Several platforms or channels compared as separate strokes on one time axis
- Two measures on different scales plotted against left and right axes
When not to use
- Several stages that add up, stacked into one funnel with a tile per stage: use the Conversion Funnel block
- Monthly sales measured against a goal line with a dated marker: use the Sales vs Goal block
- A trend that needs its volume emphasized with a filled region below it: use the Area Chart blocks
- Compact tiles where each figure carries a small trend of its own: use the Sparkline blocks
Agent notes
salesViewsDataholds 6 weeks under 30d and 6 months under 90d; rebuild both to match thePERIODSlabels- The +8% and +5%
Badgedeltas are literals; onlytotalSalesandtotalViewsfollow the period ChartContainerreceives an inline config, so editingchartConfigin data.ts changes nothing- Each stroke takes its label and color from a
chartConfigkey passed toChartContainer, so add a key for every new series
https://reui.io/blocks/chart/line-chart/chart-24.mdget_block("chart-24")npx shadcn@latest add @reui/chart-24Shadcn Sales vs Traffic Block
Dual-axis e-commerce sales vs views line chart with period selector and KPI trend badges. Part of the ReUI Shadcn Line Chart blocks collection.
Plots sales and views on two independent Y-axes as solid and dashed recharts lines, with a 30 vs 90 day Select, KPI totals plus trend Badges, and a dark custom tooltip in a ReUI Frame. For e-commerce analytics and revenue vs traffic dashboards.
It is composed from Badge, Frame, Select, so every part of it is a primitive you can restyle with your own design tokens.
What You Can Build With the Sales vs Traffic 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 Line Chart blocks to assemble a full screen instead of a single section.
All Shadcn Line 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.
- Balance Tracker Account Balance Line Chart with Reference Line, Peak Dots and Stat Header
- Metric Switcher Metric-switcher line chart card with clickable KPI tabs and pulsing animated dots
- Revenue Trend Revenue performance card with line chart and period tabs (5D / 2W / 1M)
- Social Engagement Multi-line social media activity chart with platform comparison and time-range selector
- NFT Floor Price Dark floor price analytics card with period tabs and monotone line chart
Related Shadcn Charts Block Categories
- Area Chart (3) Area chart cards with gradient fills, stacked series, period tabs and hover tooltips for trends over time.
- 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.
- 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 Sales vs Traffic block?
Use it for sales and views on 2 independent hidden axes, solid against dashed, with summed period totals, sales in pounds, and a 30 or 90 day Select.
The Line Chart category fits:
- A balance, price or revenue trend as a single stroke with period tabs and a peak marker
- Several platforms or channels compared as separate strokes on one time axis
- Two measures on different scales plotted against left and right axes
For several stages that add up, stacked into one funnel with a tile per stage, use the Conversion Funnel block. For monthly sales measured against a goal line with a dated marker, use the Sales vs Goal block. For a trend that needs its volume emphasized with a filled region below it, use the Area Chart blocks. For compact tiles where each figure carries a small trend of its own, use the Sparkline blocks.
What is the Sales vs Traffic block built with?
Can I restyle the Sales vs Traffic block?
How should I use Shadcn line 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.