Marketing Blog Index
Blog index page with category filter, featured latest post and post cards with author and reading time.
Choose the primitives library your project already uses. Both look the same: your theme, not the variant, controls colors, shape, type and motion.
About this block
What it's for
- Blog index page with category filter, featured latest post and post cards with author and reading time.
- Company blog or engineering blog listing page with load more pagination.
- Resources or articles hub on a marketing site that filters posts by topic.
For only three recent posts on a landing page, use Marketing Blog Cards.
Includes
- Category filter
- Featured post
- Post cards
- Load more
- Token drawn covers
- Heading level
- Dark mode
Works with
- Radix UI and Base UI primitives (pick the one your project uses)
- React 19 and Tailwind CSS 4 in Next.js (App Router), Vite, React Router or TanStack Start, installed with the agentic-ui or shadcn CLI
- Your theme tokens, in light and dark mode
Install
Included with Agentic UI Kit (one-time license). Install needs your license key: see pricing · connect your project.
agentic-ui add marketing-blog-indexnpx shadcn@4.17.0 add @agentic-ui/marketing-blog-indexUsed in
A standalone component: drop it into any screen.
- Type
- Block
- Variants
- Radix UI and Base UI
- Themes
- Light and dark
- Widths
- Preview it at desktop, tablet and mobile widths above.
- npm packages
lucide-react- Registry dependencies
lib-primitives- Files
2 files
- components/agentic-ui/marketing-blog-index/marketing-blog-index/marketing-blog-index.tsx
- components/agentic-ui/marketing-blog-index/marketing-blog-index/blog-index-model.ts
Related components
Marketing 404
404 not found page with search, back to home button and suggested links.
Details and live previewMarketing About Timeline
About us page with mission statement and company history timeline of milestones by year.
Details and live previewMarketing Agent Run Demo
Marketing or landing page section showing an AI agent run step by step with tool calls and a final result.
Details and live previewMarketing Announcement Bar
Announcement bar at the top of a landing page linking to a new feature or launch.
Details and live preview