shadcn.io is not affiliated with official shadcn/ui
Top Products Dashboard Block for React Aria
Ten best sellers ranked by revenue, units or margin with a drawn tile per category, a bar scaled to the leader, how far each moved, and a category filter.
Installation
Overview
See what sells and by how much, with this product ranking for React with React Aria. A Toggle Group in the header switches the measure between Revenue, Units and Margin, which re-sorts ten products and says in words how each moved against last month: "Up 3", "Down 1" or "Unchanged". A hairline frame with a plus mark on each corner holds the rows, each with its rank, a small greyscale tile drawn for its category (headphones, monitor, keyboard, chair, lamp or bag), the name, the category, the value and a bar scaled to the leader. A Native Select in the first band narrows the list to one category without moving the others, and the foot says how much of the total the top three make up, for example "Top 3 are 58% of revenue". Margin is gross margin in dollars. The figures are typed, the rows are two lines on a phone, and the list holds its height for every filter. It's built from Toggle Group, Native Select and Guides, with drawn tiles instead of photos. For merchandising and e-commerce teams.
FAQ
How do I load my own products?
Edit PRODUCTS. Each has an id, a name, a category, revenue and gross margin in dollars, units sold and last month's rank for each measure. Ranks, bars, moves and the top-three share are all worked out from those rows. A new category needs a drawing in SHAPES: one stroke path per mark in a 24 by 24 box.
How is a move worked out?
It is last month's rank for the chosen measure minus the current rank, so a product that went from eighth to fifth is "Up 3". A product keeps its place in the whole ranking when you filter by category, so its rank number never changes with the filter.
How is the top-three share calculated?
It is the sum of the first three products in the full ranking divided by the sum of all ten, rounded to a whole percent. It stays the same when a category filter is on, and the line also says how many products are showing.
What stays local, and how do I wire it for real?
Everything is typed and the choices are in component state. To wire it up, load sales for the period and the one before it, rank them on the server and pass the same fields down.