A reusable paired-column chart section for comparing two measures across a handful of categories. Warm dark-clay surfaces, teal and clay bars, and clear labels make it suitable for executive reports and polished product pages.
No external services. Runs entirely on your agent.
/sl-paired-column-chart-ui-block Create a Q2 channel performance section for a report, showing three channel stats with qualified and converted counts for Referral, Search, and Direct. Use the heading “Q2 channel performance” and show “Qualified 148 · Converted 126”, “Qualified 120 · Converted 84”, and “Qualified 96 · Converted 72”. Keep the Teal Clay Ledger style.
Verified
| render-check | pass | 4.0 / 5 | 18s |
Use three to six categories so paired bars and labels remain scannable. For more categories, choose a denser chart type or provide a separate detail view.
No. A paired-column chart implies direct comparison on one shared scale. Convert to a common unit or use a different visualization.
Yes. At narrow widths, each category becomes a row with two horizontal bars and visible, full-size values. The chart must not rely on shrinking SVG text or accessible text alone.
$4.99A focused, dark balance-chart section for showing inflows, outflows, and the resulting net over a stated reporting period. It pairs light, legible labels with restrained teal and clay accents and an explicit explanation of what the chart represents.
$4.99A reusable event comparison chart section with proportional bars, readable direct values, period context, and a concise takeaway for product pages and reports.
$4.99A polished, reusable data-grid section for product interfaces and executive or research reporting. Warm paper tones, working accessible controls, and aligned monospaced values make dense records easier to scan.
$4.99A reusable, polished records grid for reporting and product interfaces, styled with warm-neutral surfaces and crisp teal emphasis. Use it when users need to scan ownership, status, and record details quickly.
FreeCreate a reusable activity calendar chart section that makes daily patterns legible at a glance. Its warm-neutral editorial styling combines an ink canvas, clay surfaces, and teal intensity cells for product analytics and executive reporting.
$4.99A reusable, single-section product hero with warm paper surfaces, quiet framing, and a restrained teal call to action. Designed for founders and product teams who need an editorial, polished first screen without building a full landing page.
$4.99A reusable product-launch hero that balances concise messaging with an art-directed, angled photo gallery. Designed for warm-neutral brands that want kinetic imagery, crisp contrast, and responsive behavior without a full-page template.
$4.99A reusable product hero that pairs a clear launch message with a polished, scannable grid of integrations. Its warm-neutral styling and restrained teal accents suit software launches that need to show ecosystem breadth without sacrificing clarity.