Blog grid

A blog index with a featured post, category filter, post cards, pagination and an in-place reader.

$npx shadcn@latest add @silicon-ui/blog-grid

Installation

$npx shadcn@latest add @silicon-ui/blog-grid

Install the dependencies.
$npm install lucide-react motion
Copy these files into your project. Shared files are skipped if you already have them.
- components/silicon-ui/blocks/blog-grid/blog-grid.tsx
- components/silicon-ui/blocks/blog-grid/blog-grid-data.ts
- components/silicon-ui/blocks/blog-grid/blog-grid.module.css
Install the foundation once per app for the design and motion tokens: $npx shadcn@latest add @silicon-ui/silicon-foundation

Source codetsx

import { BlogGrid } from "@/components/silicon-ui/blocks/blog-grid/blog-grid";

Prop	Type	Default
`title`	`string`	`"Journal"`
`description`	`string`	`"Product news, design notes and engineering deep dives from the team."`
`posts`	`BlogPost[]`	`blogPosts`
`categories` Category filter labels, in order. "All" is added in front.	`string[]`	`blogCategories`
`category` Active category, or "All" (controlled).	`string`	—
`defaultCategory`	`string`	`"All"`
`onCategoryChange`	`(category: string) => void`	—
`page` One based page (controlled).	`number`	—
`defaultPage`	`number`	`1`
`onPageChange`	`(page: number) => void`	—
`pageSize` Cards per page below the featured post. Defaults to 6.	`number`	`6`
`showFeatured` Shows the newest post of the current filter as a large card on page one. Defaults to true.	`boolean`	`true`
`getHref` Link for each post. When set, cards render as links and the in-place reader is off.	`(post: BlogPost) => string`	—
`onPostOpen` Called when a post opens, from a link or the in-place reader.	`(post: BlogPost) => void`	—
`className`	`string`	—