Does Blog Grid 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 Grid

Blog index where the newest post runs wide, the rest sit in a grid and tag chips filter them.

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

About Blog Grid

Blog Grid puts your newest post first in a wide layout and the rest in a grid, with tag chips that filter the list. Each post shows the tag, date, reading time, excerpt and author.

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 Grid

Company and engineering blogs.
Magazines and archives.
Research libraries.
Agency journals.

How it is built

Posts reflow with layout animation when filtered, the first post always runs wide, and posts are plain objects.

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

Goes well with Blog Grid

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

Fieldnotes template: Long reads, beautifully set.
Archive template: A library people can search.
Blog Featured: A magazine-style React front with a serif lead story and most-read list
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 Grid

npx shadcn@latest add @charcoal/blog-grid

Blog Grid 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 Grid 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 Grid as Markdown