shadcn.io is not affiliated with official shadcn/ui
Bestsellers Ranking Storefront Block for Svelte
A ranked bestsellers list for a bookshop: a Week, Month and All time switch, eight titles with a drawn spine, units sold and movement against the period before as an arrow, a number and a word.
Installation
Overview
Show what is selling and how it moved, with this bestsellers list for Svelte with Ark UI. A header names the list, says what Bittern Books is and holds a Segment Group of Week, Month and All time. A hairline frame with a plus mark on each corner holds a numbered list of eight titles: the rank, the book drawn as a spine, the title and author, the units sold in that period and its movement against the period before, written as an arrow, a number and a word (Up 2, Down 1, Same, New) so colour is never the signal. The units are typed for each period and the ranks are worked out from them, ties going to the title in alphabetical order; a book with no sales in the period before is New. Choosing a period re-ranks the list on the press, and a status line says what it is ranked by and the date of the sample figures. It's built from Segment Group and Guides, with a CSS entrance only. For a shop's bestsellers page, a top charts section or a store's weekly ranking.
FAQ
How do I fill it with my own books?
Edit BOOKS. Each has an id, a title, an author, the units sold in each of the three periods, the prior units for the period before each one (0 if it was not on sale), and a spine that says how it is drawn: a height class, a width class and a grey step. Nothing about the order is typed: the ranks and the movement come from the numbers.
How is movement worked out?
For each period the books are ranked by units sold, then ranked again by the units of the period before. The difference between the two places is the movement: positive is Up, negative is Down, zero is Same. A book with no prior sales has no earlier place, so it is New. For All time, the period before is the total as it stood at the last month's start.
What stays local, and how do I wire it to real sales?
The units are sample figures typed in the file, and the date is fixed (the block says it is as of 9 October 2026). Replace BOOKS with a call to your sales report for each period and its predecessor; the rest is derived. No sales are recorded by the page.
Can I use real covers?
Yes. The spine is a small drawing, there to avoid a photograph in the example; swap the Spine component for an img of the cover. Keep the column width, so the title column does not move when a cover loads.