# Blog Pages

> A blog home with a featured story, filterable recent grid and newsletter signup, plus a long-form article page with a reading progress bar, live table of contents, share actions and related posts.

- Collection: Pages
- Tier: pro
- Docs: https://geturui.com/docs/blog-pages
- Install: `npx shadcn@latest add @geturui-pro/blog-pages`
- Dependencies: motion, lucide-react

## Variants

### Blog index

A featured story card, category chips that re-flow a staggered post grid, “show more” paging and a validated newsletter signup.

Install: `npx shadcn@latest add @geturui-pro/blog-pages-blog-index`

```tsx
import { BlogIndex } from "@/components/pages/blog-pages/blog-index";

export default function Blog() {
  return (
    <BlogIndex
      blogName="Fieldnotes"
      tagline="Stories from the team building Tessellate."
      basePath="/blog/"
      onSubscribe={(email) => console.log(email)}
    />
  );
}
```

| Prop | Type | Default | Description |
|---|---|---|---|
| blogName | `string` | "Fieldnotes" | Blog title. |
| tagline | `string` | — | Line under the title. |
| posts | `BlogPost[]` | — | Posts with slug, title, excerpt, category, author, date, readMinutes and optional featured. |
| basePath | `string` | "/blog/" | Prefix for post links. |
| pageSize | `number` | 6 | Posts shown before “Show more”. |
| onSubscribe | `(email: string) => void` | — | Called with a valid newsletter email. |
| className | `string` | — | Classes for the outer section. |

### Article

A long-form post with a spring-smoothed reading bar, a sticky table of contents that follows the section in view, copy-link and native share, and related posts.

Install: `npx shadcn@latest add @geturui-pro/blog-pages-article`

```tsx
import { Article } from "@/components/pages/blog-pages/article";

export default function Post() {
  return (
    <Article
      title="What we learned shipping multiplayer cursors to 40,000 teams"
      author={{ name: "Priya Raman", role: "Staff engineer" }}
      date="2026-09-18"
      sections={[
        { id: "intro", heading: "The problem", body: <p>When we launched live cursors…</p> },
      ]}
    />
  );
}
```

| Prop | Type | Default | Description |
|---|---|---|---|
| category | `string` | — | Label above the title. |
| title | `string` | — | Article title. |
| standfirst | `string` | — | Summary paragraph under the title. |
| author | `{ name: string; role: string }` | — | Byline; initials become the avatar. |
| authorBio | `string` | — | Bio in the author card after the article. |
| date | `string` | — | ISO publish date. |
| readMinutes | `number` | — | Reading time in the byline. |
| sections | `{ id: string; heading: string; body: ReactNode }[]` | — | Article body; each section becomes a ToC entry. |
| related | `{ title: string; href: string; category: string; readMinutes: number }[]` | — | Cards under “Keep reading”. |
| url | `string` | — | Canonical URL used by copy link, email and native share. |
| backHref | `string` | "/blog" | Target of the “All posts” link. |
| className | `string` | — | Classes for the outer section. |

## Accessibility

- Posts are single links with the title as their accessible name; category filters are a radio group.
- The table of contents marks the current section with aria-current and scrolls without smooth motion when reduced motion is on.
- Newsletter and share feedback is announced through status and live regions.

## Source

Pro item — send `Authorization: Bearer <registry token>` to include the source.