Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Hero blocks

Pro

Split Integration Flow Hero Block for React

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.

  • Pro

    Centered Integration Grid Hero

    Logos and social proof

    A centered showcase hero for a workflow tool: an announcement link, two calls to action and the integration directory as a framed panel of twelve tiles that share their hairlines.

  • Pro

    Split Architecture Diagram Hero

    Diagrams and maps

    A reverse split hero for an infrastructure platform: a service topology on a tinted canvas flush with the start rail, six icon nodes, a travelling request and an inspector, beside a headline, a Shine Button and three ticks.

  • Pro

    Metric Tiles Hero

    Stats and live data

    A compact left-aligned hero for an edge network with a live status pill, a Shine Button and an outline button at the end of the row, and four metric tiles below, each a ruled cell with a trend.

  • Pro

    Dashboard Preview Hero

    Product windows

    A showcase hero with a headline, a Shine Button, an outline button and a trust line above a wide browser window in a hairline frame, a greyscale sketch of an analytics dashboard that runs on below the fold.

  • Pro

    Centered Logo Cloud Hero

    Logos and social proof

    A compact centered hero for a planning tool: an announcement link, two calls to action and a trusted-by band across the column of eight customer wordmarks in cells that share their hairlines.

  • Pro

    Counter Stats Hero

    Stats and live data

    A compact, start-aligned hero for an email API on solid rails: a headline, a Shine Button and an outline button, then four counters in separate cells whose hairlines overshoot their corners.

All 150 hero blocks