shadcn.io is not affiliated with official shadcn/ui
Customer Profiles Carousel Block for React
Eight invented customers on a hairline track, three at a time, each with a plan chip and a lifetime value from integer cents, a derived 'N of M active' count, and a detail band that reads the customer you pressed.
Installation
Overview
Pick a customer and read the account underneath, with this customer profiles carousel for React with Base UI. Tribeline, a customer-analytics tool, follows eight accounts. Each hairline cell has the person's initials, name, role and company, a Badge for the plan (Free, Team, Business or Enterprise), their lifetime value in dollars worked out from integer cents, and an Active or Dormant word with the last-seen date. A summary band counts "5 of 8 active" from the dates, and under the track a detail band gives the pressed customer a plan and seat count, customer-since and last-active dates, their share of all lifetime value (whole percents that add up to 100) and the three things they use most. Pressing a cell chooses it and the arrows only scroll the track, so choosing and scrolling are separate. Three cells show from the large breakpoint, two from medium, one with the next peeking on a phone. The people, companies and figures are made up.
FAQ
How do I use my own customers?
Edit CUSTOMERS. Each has an id, a name, a role, a company, a plan, seats, since and last as ISO dates, an ltv in whole cents and a uses list. Active is last within ACTIVE_DAYS (30) of AS_OF; the count, the total, the days since last seen and each share are worked out from those, so nothing is typed twice.
How are the shares worked out?
Each customer's cents are divided by the total and rounded by the largest remainder method, so the whole percents always add up to 100 and nobody is rounded away to zero by accident.
What is the difference between choosing and scrolling?
A press or Enter on a cell chooses it: it gets aria-current and the detail below follows. The arrow keys, Previous and Next only move the track. The detail keeps its height because all eight details sit in the same grid cell, the other seven unseen.
How does it work with a keyboard?
Tab reaches each visible customer, Previous and Next. Enter or Space chooses a customer. With focus in the track the arrow keys move it by one cell (mirrored in a right-to-left layout) and Home and End jump to the ends. Cells out of view are hidden from the tab order.
The step is Embla's slidesToScroll; the track re-measures when it changes.