shadcn.io is not affiliated with official shadcn/ui
Client Results Table About Block for React
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 React with Base 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.
Related
- Pro
Snap Row Case Study Cards
CustomersA scroll-snap row of five case-study covers, each with a drawn wordmark, a giant result figure, two tags and a link, and a wider first card.
- Pro
Struck Through Before After
ComparisonsTabs of three workflows, each with a Before list where removed steps are struck through and an After list, a step count and one customer line.
- Pro
Tabbed Success Stories About
CustomersThree customer stories for an onboarding product, one tab each: a short quote and a three-node track of the customer's first 90 days, with one result on Day 1, Day 30 and Day 90.
- Pro
A framed table of seven company figures for an open-startup tracker: last quarter, this quarter, the computed change and a thin bar toward each target, sortable by metric, change or progress.
- “Pro
Split Layout Quote Metrics Hero
TestimonialsA compact hero with a headline and two actions beside a customer's pull quote, over a ruled band of before-and-after metrics with their improvements.
- Pro
Stacked Total Impact About
NumbersA total built from its parts for a scheduling tool: a framed lead with the hours returned over a stacked bar and a legend whose numbers add up to it, and a band of three smaller impact cells.