Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Hero blocks

Pro

Split Integration Flow Hero Block for Radix UI

A split hero for a metrics pipeline: the headline and a Shine Button beside a divider and a flow diagram in a hairline frame, with a closing band of three proof cells.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A split hero for Rivulet, a metrics pipeline, on drafting lines. The copy sits at the start: an announcement link, the headline, a sentence and a Shine Button with an outline second action. A solid divider separates it from a flow diagram in a hairline frame with + marks on its corners: three source cards, Database, Cloud API and Inbox, slide in one after the other, their lines draw in and meet at a metrics card that shows events per second, connected sources, freshness and a sparkline. A closing band across the column, ruled with + marks, holds three proof cells: SOC 2, GDPR and the uptime SLA. The diagram mirrors for right-to-left languages. For analytics platforms, data integration tools and any product that brings many sources into one place.

FAQ

How do I change the sources, the metrics and the proof cells?

Edit the constants at the top of the file. SOURCES is a list of name and Lucide icon, METRICS the card's labels and values, SPARK the sparkline's path and PROOF the closing band's three cells. LINES are the curves from each source to the card.

Can I show four or five sources?

The diagram is drawn for three, with its lines on a 100 by 60 grid. For more, change grid-rows-3 to the new count, add a line per source to LINES at the middle of each row and keep every line ending at 30 on the right edge.

How are the lines drawn, and why don't they thicken on wide screens?

They're SVG paths stretched to fill the space between the sources and the card, with vector-effect: non-scaling-stroke, so they stay one pixel however wide the gap. They draw in once on load with a clip-path. The frame, the divider and the band's rule come from our Guides component, in solid hairlines.

Is the diagram read by screen readers?

No: it's a picture of the product, hidden from screen readers and marked inert. The screen reader gets the announcement link, the headline (the block's one h1), the paragraph, the two links and the proof cells as a list. If the connections matter to your page, say so in the copy.

How does the diagram fit on a phone?

The parts stack below the lg breakpoint, copy first and the diagram under it. Below sm the sources keep only their icons so the diagram fits at 320 px. The three proof cells stay in one row, with their labels wrapping.

What moves on load, and can I turn it off?

The copy fades and rises in, the sources slide in one after another, the lines draw in and the metrics card settles last. It's all CSS, with no animation library, and nothing loops. With reduced motion on, everything appears in place.

All 150 hero blocks