React Blog Block with Pagination

Blog post list with page numbers, previous/next controls, and current page indicator

A paginated blog list with prev/next navigation and page numbers. Ideal for archives, search results, or content-heavy blogs where users need to browse pages of posts efficiently.

React Blog Block with Pagination preview

Scroll to load preview

Installation

Install

Pro block

npx shadcn@latest add https://www.shadcn.io/r/blog-pagination.json

npx shadcn@latest add https://www.shadcn.io/r/blog-pagination.json

pnpm dlx shadcn@latest add https://www.shadcn.io/r/blog-pagination.json

bunx shadcn@latest add https://www.shadcn.io/r/blog-pagination.json

React Blog Block Grid with Search

Blog with search and filters

React Blog Block Compact List

Dense blog list view

React Blog Block Large Preview

Hero-style blog preview

React Blog Block Posts with Tags

Blog posts with multiple tag badges

React Blog Block Rectangular Layout

Horizontal blog card layout

React Blog Block Reading List

Saved articles with bookmarks

FAQ

Last updated on March 15, 2026

Was this page helpful?

Blog New Post Notification

Compact notification widget for new blog post alerts with bell icon, post title, author, and action buttons

Blog Pinned Posts

Pinned and sticky posts section with visual indicators separating featured from regular content

React Blog Block with Pagination