shadcn.io is not affiliated with official shadcn/ui
Countdown Toggle Listicle Blog Block for React Aria
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 React Aria, 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.