Free React Blog & Article Components
Long-form reading has well-earned conventions and these components respect them: an article header that establishes hierarchy without a hero image cliché, a sticky table-of-contents rail that tracks scroll position, pull quotes that break rhythm intentionally, an author bio card, prev/next navigation, and a card grid for the index page. Semantics come first, real heading structure, time elements, and nav landmarks, so your writing is as readable to crawlers and screen readers as it is to people.
6 components · MIT licensed · installable with the shadcn CLI
Article Card Grid
Editorial article cards, mono kicker with category and read time, display titles, a dek line, and initials-avatar bylines. The featured story spans wide inside a hairline frame.
Article Header
The opening block of a post, category eyebrow, display title, standfirst, and a byline row with preformatted date and read time, closed by a hairline rule that draws itself.
Article TOC Rail
Sticky table-of-contents rail for React articles, mono indices, a hairline spine, and a primary tick that slides to the active heading via built-in scroll-spy. Tailwind tokens throughout.
Author Bio Card
End-of-article author bio for React blogs, mono initials avatar, role, short bio, quiet text links, and a 'More from' reading list with preformatted dates. Tailwind tokens, zero icon clutter.
Prev Next Articles
End-of-article pagination, two hairline panels with mono direction labels and display titles, hairlines extending on hover. A lone neighbour panel spans the full width.
Pull Quote Break
An in-article pause, an oversized pull quote set against a primary quote-bar keyline, attribution in mono, and generous whitespace on both sides. Typography does all the work.
Frequently asked questions
Do these work with MDX or a headless CMS?
Yes. Every component takes plain props, title, date, author, headings, so the source can be MDX frontmatter, Contentlayer, Sanity, or hand-written data. The TOC rail accepts a heading list you can generate from any markdown pipeline.
Does the table of contents track scroll automatically?
The TOC rail uses IntersectionObserver to highlight the active section as you scroll, with smooth anchor navigation. You pass the heading ids; it handles observation, highlighting, and reduced-motion behaviour.
Are the blog components SEO-friendly?
They render semantic HTML, article, header, nav, and time elements with proper heading levels, which is the part a component can own. Structured data and metadata stay in your page layer, where frameworks like Next.js handle them best.