# Blog — Page Template for React

> An editorial blog home template: a serif masthead with slim nav and a subscribe button, a two-column featured essay over graded cover art with an Anneal headline, a recent-posts grid of Kindle spotlight cards with topic chips and initials bylines, a browse-by-topic rail, a newsletter sign-up card, and a multi-column footer — every string a prop, one warm-terracotta accent knob.

- Page: https://crucibleui.com/components/templates/blog
- Category: [templates](https://crucibleui.com/components/templates)
- Tier: pro (one-time purchase, see https://crucibleui.com/pricing)
- Engine: motion
- npm dependencies: motion

## Install

```bash
npx shadcn@latest add @crucible/blog
```

Pro install requires adding the token-bearing `@crucible` registry to components.json (issued at https://crucibleui.com/account after purchase).

Import from `@/components/crucible/blog`.

## Props (`BlogTemplateProps`)

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `brand?` | `string` | `"The Filament"` | Publication name in the masthead + footer. |
| `logo?` | `React.ReactNode` | `the built-in nib mark` | Inline logo mark (20×20, currentColor). |
| `kicker?` | `string` | `"Field notes on craft & code"` | Short kicker above the masthead, e.g. an issue line. |
| `nav?` | `BlogNavItem[]` | — | Top navigation links. |
| `subscribeLabel?` | `string` | `"Subscribe"` | Header subscribe-button label. |
| `featuredLabel?` | `string` | `"Featured"` | Small eyebrow over the featured post. |
| `featured?` | `BlogPost` | — | The lead article. |
| `latestHeading?` | `string` | `"Latest writing"` | Section heading over the recent-posts grid. |
| `latestLink?` | `BlogNavItem` | — | "See all" link beside the latest heading. |
| `posts?` | `BlogPost[]` | — | Recent-article cards. |
| `topicsHeading?` | `string` | `"Browse by topic"` | Heading over the topics rail. |
| `categories?` | `BlogCategory[]` | — | Topic chips. |
| `newsletterHeading?` | `React.ReactNode` | — | Newsletter band heading. |
| `newsletterSubhead?` | `React.ReactNode` | — | Newsletter band supporting line. |
| `newsletterPlaceholder?` | `string` | `"you@studio.com"` | Email input placeholder. |
| `newsletterCta?` | `string` | `"Subscribe"` | Newsletter submit label. |
| `newsletterConfirmation?` | `string` | — | Confirmation shown after a successful (client-side) submit. |
| `newsletterNote?` | `React.ReactNode` | — | Fine print under the newsletter form. |
| `onSubscribe?` | `(email: string) => void` | — | Called with the entered email on newsletter submit. The form always shows its confirmation state locally; wire this to a real endpoint if you like. |
| `footerGroups?` | `BlogFooterGroup[]` | — | Footer link groups. |
| `footerNote?` | `React.ReactNode` | — | Footer legal line. |
| `accent?` | `string` | `"#d98a5b" (warm terracotta)` | Signature hue, any CSS color. |

Also accepts: `Omit<React.ComponentPropsWithoutRef<"div">, "children" | "onSubmit">`.

## Usage example

```tsx
import { BlogTemplate } from "@/components/crucible/blog";

export default function BlogTemplateDemo() {
  return (
    <div className="relative isolate h-[560px] w-full overflow-hidden rounded-xl bg-neutral-950">
      <BlogTemplate className="h-full overflow-y-auto overflow-x-hidden overscroll-contain" />
    </div>
  );
}
```

## Accessibility & performance

Honors `prefers-reduced-motion` with a designed static frame or fade (never a blank box) and passes `className` through.