shadcn.io is not affiliated with official shadcn/ui
Split Stat Overlay Hero Block for Solid
A split hero for a live revenue dashboard: the headline, a checklist and a Shine Button beside a dashboard sketch in a hairline frame, with three stat cards (revenue, users, churn) floating over its edges.
Installation
Overview
A split-layout hero between solid rails, for Solid with Ark UI, built around a dashboard with three stat cards floating over its edges. On one side sit an announcement link, the headline, a supporting sentence, a three-point checklist and two calls to action: a ShineButton, the block's only primary control, and an outline Button, both links. A divider with + marks where it meets the top rule separates it from the visual: a dashboard sketch in greyscale (a revenue line chart with its ranges, and three account rows) inside a hairline frame with + marks on its corners. Revenue, Users and Churn each get a card with a trend badge, and they slide in one after another once the page loads. The product is Tideline, a fictional live revenue dashboard for subscription apps. On phones the dashboard follows the copy under its own rule and drops its third account row. For analytics products, BI tools, observability platforms and any dashboard whose headline numbers sell it.
FAQ
How do I change the stat cards?
Edit STATS at the top of the file. Each card has a label, a value as you want it shown ($48.2K), a change and a direction, up or down, which picks the trend arrow. place holds the card's position classes and the side it slides in from, with a delay-* for the stagger, so you can move a card or swap two by editing that string. The dashboard's own rows live in ACCOUNTS and its chart in SERIES.
Why aren't the trend badges green and red?
The block keeps colour for its one action, so the badges are outline badges and the arrow says which way each figure went: revenue and users up, churn down. If a figure moves the wrong way, say so in the badge's text. The card's content is only read visually: put the figures in the copy as well if they matter to your pitch.
Can the cards show live figures?
Yes. Load the figures on the server and pass them in place of STATS: the cards only read value, change and direction. To roll a figure to its new value when it updates, put our Sliding Number in place of the value text, and render the real value first so the card never counts up from zero.
How does a screen reader read this hero?
It reads the announcement link, the h1, the paragraph, the three checklist items and the two links. The dashboard and its floating cards are an illustration of the product, so the whole visual is hidden from screen readers and out of the tab order with aria-hidden and inert. Say the figures in the copy too if they carry your pitch.
What moves, and can I turn it off?
The copy fades and rises in, the dashboard fades and settles in just after it, then the three cards slide in one by one: Revenue from above, Users from the start side, Churn from below. It's all CSS transitions on first paint, with no animation library, and the Users card comes from the opposite side in a right-to-left page. With reduced motion on, everything appears in place.
How does the hero fit on a phone?
The two columns stack below the lg breakpoint, with the dashboard under the copy and a rule between them. The cards hang over the frame's edges by a few pixels, which the padding around it absorbs, so they're never clipped, and below sm the third account row is dropped so the chart keeps its height. Nothing scrolls sideways down to 320 px, and the Shine Button ends within the first screen.