# Blog Featured Plus Grid — React Blog Section

> One large featured story beside its drawn cover, followed by a three-up grid; covers zoom and a reading arrow slides in on hover.

- Category: [Blog Sections](https://pixelpapa.com/components/blog.md)
- Tags: blog, featured, grid, posts, cover
- Dependencies: lucide-react, motion (plus React and Tailwind CSS v4)
- Last updated: 2026-11-13
- Live preview: https://pixelpapa.com/components/blog/blog-featured-plus-grid

## Install (PixelPapa Pro)

This is a Pro component. With a Pro or Scale plan and the `@pixelpapa` registry set up (https://pixelpapa.com/docs/installation#pro):

```bash
npx shadcn@latest add @pixelpapa/blog-featured-plus-grid
```

The file is written to `components/pixelpapa/blog-featured-plus-grid.tsx`. Source code is available to Pro members on https://pixelpapa.com/components/blog/blog-featured-plus-grid.

## AI prompt

```text
Add the "Blog Featured Plus Grid" component from PixelPapa UI to this project.

What it is: One large featured story beside its drawn cover, followed by a three-up grid; covers zoom and a reading arrow slides in on hover.
Category: Blog Sections. Depends on: lucide-react, motion.

1. Install it with the shadcn CLI. It is a PixelPapa Pro component, so components.json needs the "@pixelpapa" registry with my API key (https://pixelpapa.com/docs/installation#pro):
   npx shadcn@latest add @pixelpapa/blog-featured-plus-grid
   (If the CLI is unavailable, fetch https://pixelpapa.com/r/blog-featured-plus-grid.json with the header "Authorization: Bearer $PIXELPAPA_API_KEY", write files[0].content to components/pixelpapa/blog-featured-plus-grid.tsx and install the listed dependencies.)
2. Import it from "@/components/pixelpapa/blog-featured-plus-grid" and place it where I describe below.
3. Keep its animation timings and accessibility attributes. Replace the demo copy and data with content that fits my product, and use my existing theme tokens (bg-background, text-foreground, bg-primary, border-border) rather than hard-coded colours.

Where to use it: <describe the page and position here>
```

## More blog sections

- [Blog Category Filter](https://pixelpapa.com/components/blog/blog-category-filter.md): Filter chips with a sliding active pill and live counts; the post grid reflows with shared layout animation as cards pop in and out.
- [Blog Changelog Feed](https://pixelpapa.com/components/blog/blog-changelog-feed.md) (Pro): A versioned changelog with a sticky date rail, colour-coded tags you can filter by, and entries that collapse out of the timeline with layout animation.
- [Blog List Hover Preview](https://pixelpapa.com/components/blog/blog-list-hover-preview.md): A typographic list of posts; a floating cover card trails the cursor on a spring, tilts with its speed and flips to the hovered post's artwork.
- [Blog Magazine Layout](https://pixelpapa.com/components/blog/blog-magazine-layout.md): A newspaper-style front page: masthead, a serif lead story with drawn cover art, a column of hairline-ruled briefs and a numbered most-read list.