Does Blog Featured work with Next.js?

Yes. It is a React 19 component styled with Tailwind CSS 4, so it drops into a Next.js page, a Vite app, Remix or Astro.

Can I change the copy and colours?

Yes. The section is a file in your project. Text, links and images are plain props or JSX, and colours come from your theme's CSS variables, so a brand change is a token edit.

Blog Featured

Magazine front with a serif lead story, a column of more stories and a numbered most-read list.

Type: Content section
Styles: Light, Minimal
Licence: Charcoal UI Pro

About Blog Featured

Blog Featured lays out content like a magazine homepage: a large lead story with a serif headline and dek, a column of more stories and a numbered most-read list.

It is a full-width content section for React and Tailwind CSS 4, in a light and minimal style. Preview it at any width above, then install it with one command.

When to use Blog Featured

Online magazines.
Newsletters with essays.
Bookshops with staff picks.
Brand journals.

How it is built

All three columns are props, headlines underline on hover, and the layout stacks cleanly on phones.

It has no component dependencies beyond the shared utilities, so it is one file to read and change.

Goes well with Blog Featured

Blog Featured is part of 3 full templates, so you can see it in a finished page.

Marginalia template: An independent bookshop, online.
The Margin template: A publication with paying readers.
Fieldnotes template: Long reads, beautifully set.
Blog Grid: A React blog index with a wide featured post, grid and tag filters
Changelog: A React changelog with sticky version dates, screenshots and type filters
Resources Library: A React resource library with type tabs, search and patterned tiles
Newsletter Issues: A React newsletter landing block with sign-up, reader proof and archive

Install Blog Featured

npx shadcn@latest add @charcoal/blog-featured

Blog Featured is part of Charcoal UI Pro: one seat covers all 107 sections, 100 templates and 300 Pro components, for unlimited projects. The command installs the section into components/sections along with every component it uses.

Frequently asked questions

Does Blog Featured work with Next.js?: Yes. It is a React 19 component styled with Tailwind CSS 4, so it drops into a Next.js page, a Vite app, Remix or Astro.
Can I change the copy and colours?: Yes. The section is a file in your project. Text, links and images are plain props or JSX, and colours come from your theme's CSS variables, so a brand change is a token edit.

Blog Featured as Markdown