shadcn.io is not affiliated with official shadcn/ui
Series Deck Grid Blog Block for React
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 Base 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.
Related
- 3Pro
Series Tracker Blog
Tutorials and seriesA reader's place in a six-part series: the catalog's vertical Steps with a tick for each part read, the current part's panel with a typographic cover, a thin progress bar and a Shine Button that continues to the next part.
- Pro
Filter Chips Blog
Card gridsA coffee journal's archive with a ruled band of category chips and their counts over eight post cells: choosing a chip removes the other posts, a polite line says how many show, and the wall keeps its height.
- Pro
Categories Blog
Topics and indexesA houseplant magazine's category index: seven cells on shared hairlines, each a link with an icon ring, a scope, the latest post, a post count and a bar for its share, derived from the list of posts.
- Pro
Cards Grid Blog
Card gridsThe six latest posts of an engineering blog as cards on shared hairlines: drawn greyscale covers, a category, the title as the card's one link, a one-line dek and a byline with the date and reading time.
- Pro
Masonry Wall Blog
Card gridsEight posts in staggered CSS columns, each cell leading with a drawn pattern cover in a poster, square or wide shape; six show on a phone behind a More posts button.
- Pro
Reading List Blog
Reading toolsFive saved articles with a bookmark toggle on each: un-saving strikes the row through in place with an Undo link, and the foot reads the derived totals, like 5 saved, 46 min to read.