shadcn.io is not affiliated with official shadcn/ui
Series Deck Grid Blog Block for Ark UI
Six series as decks: each cell draws three offset covers, the series title as one link, a status badge and a thin bar with how far you have read, with a toggle group that filters All, In progress and Finished without moving the page.
Installation
Overview
A grid of series for React with Ark UI, written for Quirewell, a hobby bookbinding blog. A header with a three-way toggle group at its end (All, In progress, Finished, each with its count) and a polite "4 of 6 series shown" line sits over six cells. Each cell is its own frame, with rules and plus marks that overshoot at the corners, and draws its series as a stack of three offset covers, the front one a typographic cover with the series' name in display type. Under the deck are a status badge (a tick for Finished), the title as the cell's one link and a thin bar with "3 of 8 read". Two columns on a phone, three from lg. Every series is also stacked unseen under the shown cells, so a filter never moves the page. It's built from ToggleGroup, Progress, Badge and Guides, with CSS for the entrance and the hover lift. For a blog that publishes courses and multi-part guides and wants readers to see where they stopped. The series and the reading progress are example data.
FAQ
How do I add a series?
Add an entry to SERIES: an id, the title, the display words for the front cover, the number of parts, how many the reader has read and an href. Whether a series is finished is worked out (read equals parts), and so are the counts on the toggle and the "shown" line. Six cells fill two rows of three or three rows of two; any other count leaves a short last row, which is fine because each cell draws its own frame.
How does the filter work?
The toggle group is a single choice that can't be switched off: pick All, In progress or Finished. The shown cells are laid out in one grid cell, and a copy of every series sits unseen in the same cell (invisible, inert, hidden from assistive tech), so the block keeps the height of the full set. Block-review may report the cells moving when you pick a filter; that is the layout changing inside a held height. The status line is a polite live region.
How is the deck drawn?
Three layers in a frame: two plain covers peeking out above, and the front cover with a masthead, a short rule and the series' name in display type. Sizes are container units, so the masthead drops out in the narrow phone cells. It uses only theme tokens and doesn't mirror in a right-to-left page. On hover the front cover rises a few pixels; with reduced motion it stays put.
How does it fit on a phone?
Two columns, so all six series fit in about two and a half screens. The toggle group scrolls sideways if the three chips don't fit, with the next chip peeking at the edge. The covers' masthead is hidden and the titles wrap.