shadcn.io is not affiliated with official shadcn/ui
Difficulty Ladder Blog Block for React
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 Base 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.
Related
- Pro
Tabs Layout Blog
Post listsA film-criticism reading list with three underline tabs, Latest, Popular and Editor's picks, each drawing a different row: dated rows, ranked rows with read counts, and rows with an editor's note.
- Pro
Categories Blog
Topics and indexesA houseplant magazine's category index: seven cells on shared hairlines, each a link with an icon ring, a scope, the latest post, a post count and a bar for its share, derived from the list of posts.
- 3Pro
Series Tracker Blog
Tutorials and seriesA reader's place in a six-part series: the catalog's vertical Steps with a tick for each part read, the current part's panel with a typographic cover, a thin progress bar and a Shine Button that continues to the next part.
- Pro
Topic Cluster Diagram Blog
Topics and indexesA hub-and-spoke diagram of a topic cluster: the pillar guide at the hub of a drawn wheel, six topic links on the rim, and the cluster's posts as ruled rows beside it; on a phone a nested list with connectors.
- 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
Cards Grid Blog
Card gridsThe six latest posts of an engineering blog as cards on shared hairlines: drawn greyscale covers, a category, the title as the card's one link, a one-line dek and a byline with the date and reading time.