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.
blogarticlenewslettertable of contentsreading progresspage kitcontent
Blog index
blog-index.tsxA featured story card, category chips that re-flow a staggered post grid, “show more” paging and a validated newsletter signup.
$npx shadcn@latest add @geturui-pro/blog-pages-blog-index
| 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
article.tsxA 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.
$npx shadcn@latest add @geturui-pro/blog-pages-article
| 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. |
Install the whole set
Installs every blog pages variant at once. Each section above has its own command for a single variant.
Pro installs use your private registry token. Add the @geturui-pro registry once — setup guide. The command works after you get Pro.
$npx shadcn@latest add @geturui-pro/blog-pages
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.