Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Blog blocks

Pro

Format Filter Multi-Format Blog Block for Radix UI

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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A multi-format blog block for React with Radix 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 is type="single" and ignores a deselect.

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.

How does it fit on a phone?

The chips scroll sideways with the next one peeking at the edge. Each row keeps the tile at the start, drops the dek and puts the length under the byline.

Does it work right to left?

Yes. The rows and chips mirror, the counts, dates and lengths are isolated with bdi, and the tiles keep their direction as artwork.

All 100 blog blocks