shadcn.io is not affiliated with official shadcn/ui
Icon Features Split Banner Block for React Aria
A platform claim for an infrastructure product: a tinted half with the headline and a docs link, and three capabilities on shared hairlines, each with a framed icon tile, a title and one line.
Installation
Overview
A banner for React with React Aria, for the claims a platform wants every visitor to see: how fast, how safe, how close. Between the page's rails, a split on a solid divider that meets the top rule: the start half is a faint tint with the headline, "Production-ready infrastructure out of the box", and a text link to the docs; the end half is three capabilities, "200 ms p99", "SOC 2 Type II" and "12 regions", each an Item with a framed icon tile, a title and one line, separated by shared hairlines. On a phone the halves stack under a rule and the three become rows. It's built from Item and Guides, with your theme's tokens for every colour. For platform pages, security overviews and any claim that comes in threes.
FAQ
Are the numbers real?
They are placeholders for a fictional platform, so replace them with figures you can prove: a latency figure with the percentile and what it is measured on, a certification with its report type, a region count that matches your status page. The lines under the titles say what each number covers; keep that, because a bare number is easy to doubt.
How do I add or change a capability?
Edit the CAPABILITIES list: an icon, a title and a line each. The end half is a three-column grid from lg, so three fit; a fourth would need lg:grid-cols-4 and a narrower start half, or a second row.
Which icons does it use, and can I swap them?
Three Lucide icons (a gauge, a shield and a globe) in a small bordered tile on the muted tone. Any icon works: the tile is an Item media with variant="icon", and the icon is hidden from screen readers because the title says the same thing.