# Blog 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.

- Slug: `blog-grid`
- Category: [Blog](https://www.assembli.design/category/blog.md)
- Type: block
- Tags: blog, articles, featured-post, filter, tabs, load-more, authors
- npm dependencies: motion, lucide-react
- shadcn/ui dependencies: none
- Live preview: https://www.assembli.design/preview/blog-grid
- Page: https://www.assembli.design/components/blog-grid

![Blog Grid preview](https://www.assembli.design/thumbnails/blog-grid-light.png)

## Props

Other props pass through to the root element.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `eyebrow` | `React.ReactNode` | `"Blog"` |  |
| `title` | `React.ReactNode` | `"Latest from the team"` |  |
| `intro` | `React.ReactNode` |  |  |
| `posts` (required) | `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. |

## Install

One-time setup (needs a subscription):

1. Add the registry to the project's `components.json`: `{"@assembli":{"url":"https://www.assembli.design/r/{name}.json","headers":{"Authorization":"Bearer ${ASSEMBLI_API_KEY}"}}}` (merge into `"registries"`).
2. Put an API key from https://www.assembli.design/account in `.env.local` as `ASSEMBLI_API_KEY=asm_…`.

Then install with the shadcn CLI (writes `components/blog-grid/blog-grid.tsx` and installs dependencies):

```bash
npx shadcn@latest add @assembli/blog-grid
```

Registry item JSON: https://www.assembli.design/r/blog-grid.json (send `Authorization: Bearer <api key>`)

## Code

> Component source needs an Assembli subscription ($12/month or $96/year) and an API key sent as `Authorization: Bearer <key>`. To get one without copying anything, POST https://www.assembli.design/api/agent/login (or call the MCP tool connect_account), show the user the link it returns, and poll https://www.assembli.design/api/agent/token for the key. Or subscribe at https://www.assembli.design/pricing and create a key at https://www.assembli.design/account.