Blog Magazine
Blog
Source and install need .
pnpm dlx shadcn@latest add @assembli/article-layoutArticle Layout
A blog post page: breadcrumb, title, standfirst, authors and reading time over a wide cover. The table of contents is built from the post's own headings, pins beside the text, tracks the section you're reading and folds into a menu on phones. A progress bar, a share rail, heading anchors, author bios and related posts frame it, with figure, callout and pull-quote parts for the body.
Props
Other props pass through to the root element.
category
{ label: string; href: string }
Breadcrumb back to the index, e.g. { label: "Engineering", href: "/blog/engineering" }.
title*
React.ReactNode
dek
React.ReactNode
The standfirst under the title.
authors*
ArticleAuthor[]
date*
string
ISO date, e.g. "2026-10-21". Formatted in UTC so server and browser agree.
readingTime
number
Minutes.
cover
{ src: string; alt: string; caption?: React.ReactNode }
children*
React.ReactNode
The article. Top-level h2 and h3 elements become the table of contents and get anchor links.
tags
string[]
related
ArticleRelated[]
shareUrl
string
The canonical URL to share. Defaults to the page's own URL at the time of sharing.
stickyTop
number
Default
0Distance from the top of the viewport for the sticky bar, TOC and anchors, e.g. under a site header.
| Description | |||
|---|---|---|---|
| category | { label: string; href: string } | – | Breadcrumb back to the index, e.g. { label: "Engineering", href: "/blog/engineering" }. |
| title* | React.ReactNode | – | |
| dek | React.ReactNode | – | The standfirst under the title. |
| authors* | ArticleAuthor[] | – | |
| date* | string | – | ISO date, e.g. "2026-10-21". Formatted in UTC so server and browser agree. |
| readingTime | number | – | Minutes. |
| cover | { src: string; alt: string; caption?: React.ReactNode } | – | |
| children* | React.ReactNode | – | The article. Top-level h2 and h3 elements become the table of contents and get anchor links. |
| tags | string[] | – | |
| related | ArticleRelated[] | – | |
| shareUrl | string | – | The canonical URL to share. Defaults to the page's own URL at the time of sharing. |
| stickyTop | number | 0 | Distance from the top of the viewport for the sticky bar, TOC and anchors, e.g. under a site header. |
