shadcn.io is not affiliated with official shadcn/ui
Stats Ribbon Over Grid Features Block for Solid
A features section for payments infrastructure: a compact header with two buttons, a slim ribbon of four stat chips between hairlines, and three cells led by a settlement timeline, ledger rows and a payout schedule.
Installation
Overview
A features section for Solid with Ark UI. A compact header holds the Shine Button and an outline button at its end. Under it, a slim ribbon runs between two hairlines with + marks on the rails: four stat chips in small type, a value and a label each, two by two on a phone. Below, a separate row of three cells is led by drawings (a payment's settlement timeline, ledger rows whose debits and credits cancel, and a week of payouts with the next one filled), each with a title and a sentence. The cells sit apart with overshoot lines. It's built from Guides, Shine Button and Button. For payments, finance and infrastructure products.
FAQ
How do I change the ribbon?
Edit STATS: each has a value and a label. They render as a list; each value is wrapped in a bdi element so a right-to-left layout keeps units in order. Keep them short: the ribbon is four chips on one line from lg.
How do I change the three cells?
Each cell is a title, a sentence and a drawing component (TimelineDrawing, LedgerDrawing, ScheduleDrawing) passed as its child. Their data are STAGES, ENTRIES and PAYOUTS at the top of the file.
Where do the buttons go?
Both are links (href="#") at the end of the header: Start building is a Shine Button and Talk to sales an outline button.
Each button's asChild receives its props: spread them onto your router's link.
Are the drawings read by screen readers?
No. Each drawing is decoration, hidden from assistive technology and not focusable. Each cell's title and sentence carry the content, and the ribbon is a real list.