# Shadcn Blog blocks

> Blog post layouts, article grids, and content listing components for editorial sites.

- Type: Pro blocks (Marketing)
- Page: https://web.dev.reui.io/blocks/marketing/blog
- Blocks: 6
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## 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](https://web.dev.reui.io/blocks/application/card.md)
- A dashboard side panel of figures, transactions or integrations, one record per row: use the [List blocks](https://web.dev.reui.io/blocks/application/list.md)
- Photo tiles that send shoppers into a store department or collection: use the [Category Card blocks](https://web.dev.reui.io/blocks/ecommerce/category-card.md)

## Agent notes

- Every root component takes no props and renders `BLOG_POSTS` or `ARTICLE` from components/data.ts; add a prop to pass in posts from your CMS
- Every link is a hash `href` placeholder and every cover `img` loads an Unsplash demo image; swap in your post routes and covers
- Each page.tsx wraps the block in a padded `min-h-svh` container; remove it when the block renders inside your site layout

## Third-party libraries

- Embla Carousel v8: [API reference](https://www.embla-carousel.com/docs/v8/api), [docs](https://www.embla-carousel.com/docs/v8/get-started/react), used by 1 of 6 blocks

## Blocks

- [Blog Index Grid](https://web.dev.reui.io/blocks/marketing/blog/blog-1.md): Blog index with cover-image post cards in a responsive three-column grid and author footers. Best for card tiles with a date and read time line, a clamped excerpt and an author footer, stepping 1, 2, then 3 across.
- [Cover Story Cards](https://web.dev.reui.io/blocks/marketing/blog/blog-2.md): Full-image blog post cards with titles overlaid on covers, hover zoom, and pill category badges. Best for tall photo tiles that are one link each, with a white category pill on top and the title over a dark scrim.
- [Article Slider](https://web.dev.reui.io/blocks/marketing/blog/blog-3.md): Blog article carousel with cover cards, circular prev/next controls and a progress-line indicator. Best for a post slider stepped by round previous and next buttons, with a 1px progress line that fills to the last visible post.
- [News & Insights](https://web.dev.reui.io/blocks/marketing/blog/blog-4.md): Three-column blog index with stacked Frame cards, grayscale hover-zoom covers, and author footers. Best for stacked Frame panels with grayscale covers that zoom on hover, a linked category beside the date and an author footer.
- [Article Detail](https://web.dev.reui.io/blocks/marketing/blog/blog-5.md): Blog post detail page with gradient overlay image hero, byline, pull quote, and related posts list. Best for a post with its title overlaid on the cover image, a bordered pull quote and divided text rows of related posts.
- [Read Next Post](https://web.dev.reui.io/blocks/marketing/blog/blog-6.md): Single-column blog post detail page with breadcrumb, author byline, topic badges, Read Next grid. Best for a post with a breadcrumb, subhead and byline above the cover, a lead summary, a More from author link and a 2 column Read Next grid.

Every ReUI item has a twin like this one; the index is https://web.dev.reui.io/llms.txt. Agents with the ReUI MCP (https://web.dev.reui.io/docs/mcp) get the same guidance from the getters named above.