Blog
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.
motionpro
Pro
The preview is live. The source is Pro.
One purchase, lifetime access: every pro component's source, CLI install with your own registry token, and all future drops.
Installation
CLI
npx shadcn@latest add @crucible/blogManual — install dependencies, then copy the source
npm install motionProps
| 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 all props of Omit<React.ComponentPropsWithoutRef<"div">, "children" | "onSubmit"> — they pass through to the underlying element. | |||
Honors prefers-reduced-motion with a designed static fallback, and passes className through.