Post Index
Blog
Source and install need .
pnpm dlx shadcn@latest add @assembli/blog-gridBlog Grid
Blog index section: a featured post in a wide card above a three-column grid of recent posts, each with a cover, category, date, reading time and stacked author avatars. Category tabs with a sliding underline filter the posts, cards glide into place, and Load more adds the next page with a short stagger. Whole cards are links; the title underline draws in on hover.
Props
Other props pass through to the root element.
eyebrow
React.ReactNode
Default
"Blog"title
React.ReactNode
Default
"Latest from the team"intro
React.ReactNode
posts*
BlogGridPost[]
categories
string[]
Tab order after "All". Defaults to the order categories first appear in
posts.pageSize
number
Default
6Cards shown before "Load more", and how many each press adds.
viewAll
{ label: string; href: string }
A link beside the heading, e.g. to the full archive or RSS.
| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | React.ReactNode | "Blog" | |
| title | React.ReactNode | "Latest from the team" | |
| intro | React.ReactNode | – | |
| posts* | BlogGridPost[] | – | |
| categories | string[] | – | Tab order after "All". Defaults to the order categories first appear in posts. |
| pageSize | number | 6 | Cards shown before "Load more", and how many each press adds. |
| viewAll | { label: string; href: string } | – | A link beside the heading, e.g. to the full archive or RSS. |
Related
Block