shadcn.io is not affiliated with official shadcn/ui
Split Panel Counter Stats Grid CTA Block for Solid
A reverse split call to action: a two by two grid of ruled stat tiles that turn over in 3D to show how each figure is measured, beside the copy, a Shine Button and an outline button.
Installation
Overview
A reverse split call to action for Solid with Ark UI, here for Halyard, a fictional deploy platform. At the start is a two by two grid of stat tiles, each its own cell: solid hairlines that overshoot the corners a little and a + mark on its top corner, with an icon, a figure and a label inside. Press a tile and it turns over in 3D to say how that figure is measured; press Back, or another tile, and it turns back. One tile is open at a time. At the end, behind a split divider, sit an outline badge, the headline, a paragraph, a Shine Button and an outline button, between solid rails. The copy comes first in the page, so on a phone the buttons are on the first screen and the tiles follow, one per row. It's built from Badge, Button, Shine Button and Guides, with CSS transforms and transitions for the flip and your theme's tokens for every colour. For platform pages whose numbers are part of the pitch and should show their working.
FAQ
How do I change the tiles?
Edit STATS at the top of the file: each entry has an icon, a value, a label and the definition shown on the back. The grid holds four tiles in two columns; with an odd number the last one sits alone in its row.
How does the flip work?
Each tile holds two faces in the same grid cell, so it is always as tall as the taller one and nothing around it moves. The front is turned by a CSS 3D rotation with the back face hidden from behind, and the faces swap their inert state with it, so only the face you can see can be reached. The ruled cell around it never turns: it is a separate layer outside the flipping element. One open value holds the open tile, which is why opening a second turns the first back.
Can I use it with a keyboard and a screen reader?
Yes. The front of a tile is a button whose name is its figure and label, with "show how it is measured" read after it. Pressing it moves focus to the Back button on the new face, which is named "Back to" and the label, and pressing Back returns focus to the tile's front. The hidden face is inert and hidden from assistive technology, so a screen reader only ever meets one face.
What happens with reduced motion?
The tile doesn't rotate: the two faces swap with a short fade instead, and the entrance fade is off. The Shine Button's light fades in instead of sweeping. Everything else works the same.
Do the figures count up?
No. They're plain text, readable the moment the page loads and in a screenshot. A count-up that nobody can pause only delays the number you came for.
Where do the buttons go?
Both are links (href="#"): point Start building at your sign-up and Read the methodology at the page that explains your numbers.
Each button's asChild receives its props: spread them onto your router's link.
How does it fit a phone?
The copy stacks above the grid, with a rule between them, and the grid keeps two columns until the screen is narrower than 26rem, where the tiles stack one per row so a definition has room to wrap. The cells are spaced a full gutter apart so their overshooting lines never touch. From the lg breakpoint the grid and the copy sit side by side, the grid at the start.