The features section is where most landing pages stop being about the product. Three cards, three icons, three sentences of equal length, each claiming something unfalsifiable: "Powerful", "Flexible", "Built for scale". That layout is not the problem. The problem is that it invites copy nobody can disagree with.
141 public components on 21st have "feature" in the name. Here are the shapes, and the copy rule that decides whether any of them work.
The shapes
The grid. Features 8 by meschacirung is the conventional version, and Feature Section with hover effects by Manu Arora is the same layout with a pointer treatment.
The bento. Unequal cells, so the layout carries priority. Stack Feature Section by Ruixen UI and the bento guide cover why one cell being bigger is the entire value.
The carousel. Feature Carousel by 0xUrvish and Feature Carousel by Ravi Katiyar show one feature at a time. Right when each feature needs a screenshot; wrong when the reader is scanning, because a carousel hides what it is not showing.
The stepper. Feature Section by Ayushmaan Singh walks through features as a sequence, which suits a product with an actual workflow.
The accordion. Feature Accordion Section by Ruixen UI and Feature 197 from Shadcnblocks.com expand one at a time, which fits when each feature needs a paragraph rather than a line.
The copy rule
One test, and it is the same one the not-generated guide applies to a whole page: could a competitor put this sentence on their site unchanged? If yes, it is not a feature, it is a category description.
"Real-time collaboration" is a category. "See a teammate's cursor while they edit, with changes merged rather than locked" is a feature. The second is longer, harder to write, and the only one that tells a reader anything.
Two more that follow from it. Show rather than describe wherever you can - a small screenshot or a loop beats an icon and a sentence. And write uneven features: real products have one thing that is genuinely better and one that is a workaround, and a grid of three equal claims reads as marketing rather than as a product.
How many
Three to six. Past six the reader is skimming, and skimmed features do not persuade.
If you have twelve, that is a features page rather than a section, and the section should carry the three that decide the sale with a link to the rest.
The layout details
Icons are decoration. They break up the grid and carry no information, so mark them aria-hidden and let the heading do the work, per the icon guide.
Headings are headings. Each feature's title should be a real heading element in the document outline, not a styled div, because that outline is what a screen reader and an answer engine navigate by.
Equal heights, unequal content. Clamp the descriptions or the grid goes ragged, which is the same rule the card guide applies to any grid of real content.
Where else to look
The honest list, because the answer is not always us:
| Source | Best for | Trade-off |
|---|---|---|
| shadcn/ui | Card and the typography underneath | No section |
| CSS grid | The layout, which is genuinely a few lines | You design the composition |
| Tailwind Plus | Conventional grids with the breakpoints decided | Paid, and widely used |
| 21st | Grids, bentos, carousels, steppers and accordions | 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
- How many features should a section show?
- Three to six. Past six the reader skims, and skimmed features do not persuade. If you have twelve, that is a features page, and the section should carry the three that decide the sale with a link to the rest.
- What makes feature copy actually useful?
- One test: could a competitor put the sentence on their site unchanged? Real-time collaboration is a category description; seeing a teammate's cursor while they edit, with changes merged rather than locked, is a feature. The second is harder to write and the only one that tells a reader anything.
- Grid, carousel or accordion?
- Grid when features are scannable and equal, bento when one genuinely matters more, carousel when each feature needs a screenshot, accordion when each needs a paragraph, and a stepper when the product has an actual workflow. The layout should follow the shape of the content.
- Do feature icons help?
- They break up the grid and carry no information, so treat them as decoration: mark them aria-hidden and let the heading do the work. Each feature title should also be a real heading element, because the document outline is what screen readers and answer engines navigate by.