👋 This is a community-driven shadcn/ui resource. For the official documentation, visit ui.shadcn.com
Blog with Pagination
Blog with pagination controls showing page numbers, previous/next buttons, and posts per page selector
Looking to implement shadcn/ui blocks?
Join our Discord community for help from other developers.
Navigation through content needs clarity. This React blog component combines post grid with pagination controls featuring page numbers, previous/next buttons, current page indicator, and posts per page selector. Built with shadcn/ui Button, Select, Card components, users can jump to specific pages, navigate sequentially, and control content density. Disabled states, active indicators, and mobile-responsive layout—perfect for archives, search results, or content libraries where pagination improves performance and lets users find older content efficiently.
Installation
npx shadcn@latest add https://www.shadcn.io/registry/blog-pagination-01.jsonnpx shadcn@latest add https://www.shadcn.io/registry/blog-pagination-01.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/blog-pagination-01.jsonbunx shadcn@latest add https://www.shadcn.io/registry/blog-pagination-01.jsonRelated blocks you will also like
Blog Grid with Search
Blog with search and filters
Compact Blog List
Dense blog list view
Blog with Sidebar
Blog layout with sidebar navigation
Blog Cards with Load More
Blog grid with view more button
Simple Blog Cards
Clean blog card grid layout
Featured Blog Posts
Highlighted blog post grid
Questions you might have
Blog Newsletter Signup
Newsletter signup section with email input, subscribe button, social proof, privacy notice, and success state for blog subscriptions
Large Blog Preview
Large hero-style blog preview with prominent featured image, category badge, headline, excerpt, read more link, and author attribution
