shadcn.io is not affiliated with official shadcn/ui
Format Filter Multi-Format Blog Block for React
One list of eight pieces with a format filter that has counts (All, Read, Watch, Listen, Look) and a small drawn tile for each format: text lines, a player frame, a waveform, a bar chart.
Installation
Overview
A multi-format blog block for React with Base UI, written for Plinthby, a design-and-culture magazine. A centred header sits over a format filter (All, Read, Watch, Listen, Look, each with its count) and, under it, eight pieces as rows rail to rail. Every row has a small drawn tile for its format, the title as the row's one link, a dek, the byline and its own length ("12 min read", "8 min watch", "24 min listen", "5 min look"). Choosing a format keeps only its rows, and a polite line says how many are shown. It's built from ToggleGroup and Guides. For a magazine that publishes the same story as text, video, audio and a chart. Nothing plays here: every row links to the piece's page.
FAQ
How does the filter work?
It's a ToggleGroup where exactly one chip is always chosen (All to start). The rows are filtered from PIECES, the counts on the chips are derived from the same data, and a status line says "3 of 8 pieces shown". Arrow keys move between the chips.
The group takes its value as an array of one.
Why does the page not jump when I filter?
All eight rows are drawn once more, unseen, in the same grid cell as the live list. The cell keeps the height of the full list, so rows above and below never move, and the unseen copy is hidden from assistive technology and the keyboard.
How are the format tiles drawn?
Each is a 56 by 56 SVG at module scope: Read is a headline bar over text lines, Watch a player frame with a play mark, Listen nine bars and Look four rising bars. They are decoration only (the length text names the format), hidden from assistive technology, and they don't mirror in a right-to-left page.
What are the lengths?
Each piece has its minutes and its format, and the label is built from both: "8 min watch". They are example data.
Related
- Pro
Speed Select Audio Blog
Audio, video, photosA read-aloud list: a Select picks the playback speed and every article's listening time and the total recompute, beside a waveform drawn from the title's letters with chapter ticks.
- Pro
Player Frame Video Blog
Audio, video, photosFour video lessons as cells: each cover is a drawn player frame with a poster pattern, a play mark and a scrub bar with a tick for every chapter, a duration badge, the title and the date.
- 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
Latest Posts Blog
Featured storyJust published: the newest post as a lead band in large type with a pulsing dot and a New mark, three earlier posts as rows with unread dots, and a Mark all as read button.
- Pro
Compact List Blog
Post listsTwenty posts as dense one-line rows like a printed contents page: date, title, a dotted leader and the reading time, eight shown and twelve behind a Show more button.
- Pro
Minimal Article Blog
Article partsOne article's opening and nothing else: a narrow reading measure with title, dek and byline, two paragraphs with a sunk initial, and a quiet Continue reading link.