shadcn.io is not affiliated with official shadcn/ui
Countdown Toggle Listicle Blog Block for React
A seven-item countdown with huge drawn numerals, prep-time and difficulty chips, and a Countdown / Count up toggle that reverses the list without moving the page.
Installation
Overview
A listicle block for React with Base UI, written for Tenfold Kitchen, a pantry-cooking magazine: seven dinners from the shelf, ranked by how often the kitchen cooks them. A start-aligned header gives the total prep time, summed from the rows, and holds a "Countdown / Count up" toggle at its end. The list runs rail to rail: each dinner has its rank as a huge outlined numeral (the winner filled), a title, a line on why it works and two chips, its prep time and how hard it is in words. The toggle reverses the order. It's built from ToggleGroup, Badge and Guides. For a ranked list that wants a reading direction: best-last countdowns, "top 10" posts, any numbered set. The numerals and chips are artwork backed by text.
FAQ
How do I change the dinners?
Edit DINNERS: each has a rank (1 is the best), a title, a line, the minutes of prep and a difficulty (Easy, Medium or Fiddly). The countdown is the same array reversed, and the header's "3 h 30 min" is the sum of the minutes.
How does the toggle work?
It is a single-choice ToggleGroup that is never empty: pressing the chosen item again does nothing. Arrow keys move between "Countdown" and "Count up". Both orders are drawn once more, unseen, in the same grid cell, so the block never changes height and nothing below it moves.
How do screen readers hear the numbers?
The drawn numeral is hidden from them, and each title starts with a hidden "Number 7:", so the rank is read in the order the list is in, whichever way it runs.
Why is the difficulty in words?
A word says it without colour: Easy, Medium or Fiddly. The chips are plain outlines, so the block has no palette to clash with your theme.
Related
- Pro
Accordion Step By Step Blog
Tutorials and seriesA tutorial in five steps: a single-open accordion on a vertical rail, a Done button that ticks a step and opens the next, and a framed drawing of the open step.
- 1425Pro
Trending Posts Blog
Post listsSix ranked stories in two columns of three on shared hairlines, each with a huge outline numeral and its move since last week, as an arrow and a number.
- Pro
Tick-Off Checklist Blog
Tutorials and seriesA "before you start" checklist for a tutorial: six real checkboxes for tools and parts, struck through when ticked, with a count, a thin bar and a Reset.
- Pro
Segmented Bar Recap Blog
Post listsA product team's weekly recap as five numbered posts under one segmented bar whose segments are as long as each post's reading time; pointing at a row lights its segment.
- 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
Format Filter Multi-Format Blog
Audio, video, photosOne 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.