For AI Agents
Hand your agent this brief or the ReUI MCP, not a screenshot. Installs with a ReUI Pro or Ultimate license.
When to use
- A blog, news or insights index of post cards with cover images, in a grid or a carousel
- A single article reading page with a byline, body sections, topic tags and related posts
When not to use
- Dashboard tiles for KPIs, profiles or setup guides, with no article to read: use the Card blocks
- A dashboard side panel of figures, transactions or integrations, one record per row: use the List blocks
- Photo tiles that send shoppers into a store department or collection: use the Category Card blocks
Agent notes
- Every root component takes no props and renders
BLOG_POSTSorARTICLEfrom components/data.ts; add a prop to pass in posts from your CMS - Every link is a hash
hrefplaceholder and every coverimgloads an Unsplash demo image; swap in your post routes and covers - Each page.tsx wraps the block in a padded
min-h-svhcontainer; remove it when the block renders inside your site layout
Third-party API docs
- Embla Carousel v8: API reference, docs, used by 1 of 6 blocks
Markdown
https://web.dev.reui.io/blocks/marketing/blog.mdMCP
search({ query: "blog", type: "block", category: "blog" })Shadcn Blog Blocks: Article Grids, Post Layouts and Content Listings
A blog is two screens repeated: the listing and the post. These blocks give the listing its grid, its featured slot and its category filter, and the post its header, author row and related posts, all on shadcn primitives so they sit next to the rest of the site.
All Blog Blocks
Open any block on its own page for a live preview, the components it is built from, and the install command.
- Blog Index Grid Blog index with cover-image post cards in a responsive three-column grid and author footers
- Cover Story Cards Full-image blog post cards with titles overlaid on covers, hover zoom, and pill category badges
- Article Slider Blog article carousel with cover cards, circular prev/next controls and a progress-line indicator
- News & Insights Three-column blog index with stacked Frame cards, grayscale hover-zoom covers, and author footers
- Article Detail Blog post detail page with gradient overlay image hero, byline, pull quote, and related posts list
- Read Next Post Single-column blog post detail page with breadcrumb, author byline, topic badges, Read Next grid
What the Blog blocks cover
Marketing screens, each a full block with fixture data:
- Blog index with cover-image post cards in a responsive three-column grid and author footers
- Full-image blog post cards with titles overlaid on covers, hover zoom, and pill category badges
- Blog article carousel with cover cards, circular prev/next controls and a progress-line indicator
- Three-column blog index with stacked Frame cards, grayscale hover-zoom covers, and author footers
- Blog post detail page with gradient overlay image hero, byline, pull quote, and related posts list
- Single-column blog post detail page with breadcrumb, author byline, topic badges, Read Next grid
Built from
All Shadcn Block Groups
Browse the full ReUI Shadcn blocks library by product surface. Each group bundles category-level blocks you can mix and match across your project.
- Shadcn Application Blocks (303) Browse 303 Shadcn Application blocks across 23 categories.
- Shadcn Data Grid Blocks (47) Browse 47 Shadcn Data Grid blocks across 9 categories.
- Shadcn Charts Blocks (52) Browse 52 Shadcn Charts blocks across 10 categories.
- Shadcn Solutions Blocks (76) Browse 76 Shadcn Solutions blocks across 11 categories.
- Shadcn AI & Agents Blocks (22) Browse 22 Shadcn AI & Agents blocks across 3 categories.
- Shadcn eCommerce Blocks (87) Browse 87 Shadcn eCommerce blocks across 13 categories.
- Shadcn Marketing Blocks (67) Browse 67 Shadcn Marketing blocks across 8 categories.
Frequently Asked Questions
Do the blocks include a CMS?
No. They render from a small typed fixture; swap it for your CMS or MDX loader and the layout holds.
How do I install a Blog block?
Open the block on its page, copy the install command (the shadcn CLI with the @reui registry and your license key) or the AI prompt, and run it in your project. The block, its fixtures and every ReUI and shadcn dependency land in one command.
Is a license needed?
Blog blocks are part of ReUI Pro: one payment, lifetime updates, every block in every style. The ReUI primitives and the free examples they build on install with no license.
Start building with ReUI Pro today.
Every Pro block, every style, and every future addition, with one license for unlimited projects.
Get All-Access
From $249, once. Lifetime updates.