shadcn.io is not affiliated with official shadcn/ui
Difficulty Ladder Blog Block for Ark UI
Posts sorted by difficulty: three columns whose heads climb in height like a staircase, each marked with one, two or three dots, over the level's posts as ruled rows.
Installation
Overview
A difficulty ladder for React with Ark UI, written for Stairgambit, a chess-training blog. A centred header sits over three columns on shared hairlines. Their heads climb in height from the first level to the third like a staircase: a tinted block per level, bottom-aligned, so the treads step up towards the hardest. Each head carries a level badge, a mark of one, two or three dots, the level's name and a one-line promise, and under it the level's posts are ruled rows, each one link with its dek, author, date and reading time. Level is told in words and dots, never in colour. On a phone the three levels stack in order with the heads as short rows and the deks hidden. It's built from Badge and Guides, with CSS for the stair, the hairlines and the entrance. For a blog with beginner to advanced material, a course catalogue or any reading list where order matters. The posts are fictional.
FAQ
How do I add or rename a level?
Edit LEVELS: each has a name, a number, a one-line promise, its posts and a head height class from lg. The dots are worked out from the number and the count of levels, so a fourth level gets four dots on every head. Give each head a taller literal class than the one before (for example lg:h-36, lg:h-48, lg:h-60), because Tailwind needs to see the class in the file.
How is the staircase drawn?
The columns are rows of a CSS subgrid: the first row holds the heads, bottom-aligned, and the second holds the posts, so every column's posts start on the same line. The heads' different heights are the treads; the air above a short head is the page. Their tops get a stronger line than the rows' hairlines. No images or SVG are used.
Why are there no colours for the levels?
Colour alone isn't enough to tell difficulty, and the blocks use theme tokens only. Each level has its name and number, and a mark of dots (filled for the level, hollow for the rest) with an accessible name such as "Level 2 of 3".
How does it fit on a phone?
The levels stack in order, easiest first, each head a short row with its badge, dots, name and promise. The posts' deks are hidden to keep eight posts within about two and a half screens. From lg the three columns sit side by side.