A blog has two screens and the internet has spent twenty years optimising the wrong one. The index gets the card grid, the hover effects and the filter chips. The article - the page people actually came for, and the one search engines and answer engines read - usually gets whatever the prose styles happened to be.
17 public components on 21st have "blog" in the name. This is about both screens, in the order that matters.
The article
Measure, first. Sixty to seventy-five characters per line. Wider is the most common reason a well-written post is hard to read, and it is one max-width.
A type scale with room. Line height around 1.6 for body text, generous space above headings and less below them, so a heading belongs to what follows rather than floating between sections.
Real heading structure. One h1, then h2 and h3 in order. That outline is how a screen reader navigates and how an answer engine decides what a section is about, and skipping a level to get a smaller size is a styling decision with a comprehension cost.
Code, quotes and tables that behave. Each wide element scrolls inside its own container so the page never scrolls sideways, per the code block guide.
A date that is honest. Published, and updated if it has been. A dateless post is one an answer engine cannot weigh against a newer one.
The index
Blog Posts by Ayman Echakar is the responsive grid, Blog Section by Efferd is the version with lazy-loaded images and hover states, and Blogs by Cnippet is the stacked-headings variant where each entry reveals a preview.
Blog Post Card by Erik X and Glass Blog Card by Moumen Soliman are the card treatments, and the card guide has the two rules that keep a grid of real posts from going ragged: a fixed media aspect ratio and a clamped title.
What the index owes the reader
A date and a reading time on every card. Both are decision information, and both are cheap.
A description that is not the first sentence truncated. An excerpt that ends mid-clause reads as broken rather than as a teaser.
Real links, real markup. The card guide covers the stretched-link pattern that makes a whole card clickable without breaking middle-click or the keyboard.
Something for the empty and the long case. A blog with three posts and one with three hundred are different screens, and the second needs pagination that lives in the URL, per the pagination guide.
The part that is not layout
Two things decide whether a post is found at all, and neither is visual.
Every post needs a description and an image for the link preview, because a shared post with no card looks careless in the place you are being judged. And the content has to be in the HTML: a post rendered client-side is a post an answer engine sees as an empty page, which the review checklist puts first for exactly this reason.
Worth adding, cheaply: a markdown twin of each post. A plain-text version at a predictable URL is the cleanest thing to hand an LLM fetcher, and it costs one route.
Where else to look
The honest list, because the answer is not always us:
| Source | Best for | Trade-off |
|---|---|---|
| A prose typography plugin | The article, in one class | Opinionated, and you will override some of it |
| An MDX pipeline | Components inside posts | Build complexity for a blog that may not need it |
| A hosted blog platform | Writing today with no code | Their design, their domain path |
| 21st | Index grids, cards and blog sections | Quality varies by author, so preview before you take it |
Taking one
Every component page has a live preview and the code. Installing goes through the shadcn CLI against our registry:
That key comes from your 21st account, and installs require a membership. Set API_KEY_21ST once in your shell and the command works for anything in the catalogue.
Frequently asked
- What makes a blog article readable?
- A measure of sixty to seventy-five characters, line height around 1.6, space above headings rather than below, real heading structure in order, wide elements scrolling inside their own containers, and an honest published and updated date.
- Why does heading structure matter beyond styling?
- Because the outline is how a screen reader navigates and how an answer engine decides what a section is about. Skipping a heading level to get a smaller font is a styling decision with a comprehension cost, and it is invisible until someone navigates by headings.
- What does a blog index need?
- A date and reading time on every card, an excerpt written as an excerpt rather than a truncated first sentence, real links using the stretched-link pattern, and pagination in the URL once there are enough posts to need it.
- What decides whether a post is found at all?
- Two things that are not layout: a description and image for the link preview, since a shared post with no card looks careless where you are being judged, and content that exists in the HTML rather than only after hydration. A plain markdown twin at a predictable URL is a cheap addition for LLM fetchers.