shadcn.io is not affiliated with official shadcn/ui
Client Results Table About Block for Solid
A framed table across five shop clients for an A/B testing tool: what was tested, before and after, and the improvement computed as a chip with an arrow and a sign, with a ringed row on hover and focus.
Installation
Overview
A client-results table for Solid with Ark UI, written for Yieldwise, a fictional A/B testing tool for online shops. A start header sits over a framed table with one row per client: the client's name as a link to its story, what was tested and the metric it moved, the reading before and after, and the improvement as a small outlined chip with an arrow and a sign. The improvement is computed from the two readings, never typed, so the three always agree. Hovering a row tints and rings it, and keyboard focus on its link rings it more strongly. The first column stays put while the table scrolls sideways on a phone. It's built from a native table, Badge and Guides, with your theme's tokens for every colour. For an about page, a case-study index or a sales page. The clients and figures are invented example data.
FAQ
How do I change the clients and the readings?
Edit RESULTS at the top: each row has a client, a test, a metric and the before and after, each as the text shown and as a number. The improvement chip is computed from the two numbers to one decimal, with a true minus sign for a drop and a flat dash for no change. The clients and figures are example data.
Does the chip use colour for good and bad?
No. The chip is an outlined badge with an arrow and a sign in the foreground colour; the direction is in the arrow and the sign, so it reads the same in any theme and for anyone who cannot tell colours apart.
How do the row hover and focus rings work?
The row's tint and thin ring come from hover, and a stronger ring appears while the client's link has keyboard focus. The pinned first column takes the same tint, so a hovered row never shows a seam.
Why is the table plain HTML?
It needs a caption, a row header per client and a pinned column, which a real table gives on every base. The code is the same on every base.