Does Features 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.

Features Grid

Six feature cards with an ember spotlight that follows the pointer, revealed in a stagger.

Type: Features section
Styles: Dark, Minimal
Licence: Charcoal UI Pro

About Features Grid

Features Grid lays out six feature cards with a spotlight that follows the pointer, revealed in a stagger as the section scrolls in.

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

When to use Features Grid

SaaS feature overviews.
Product capability sections.
Service listings.
Developer tool benefits.

How it is built

Spotlight Card handles the glow without re-rendering, and Scroll Reveal staggers the cards.

It is composed from Spotlight Card, Scroll Reveal, so installing it also installs those components, and you can restyle each one the same way you would on its own.

Goes well with Features Grid

Features Grid is part of a full template, so you can see it in a finished page.

Kiln template: Ship-ready docs-first dev tool page.
Features Bento: A React bento features section where every tile is a working component
Features Alternating: A free React alternating features section: image and text rows that slide in
Features Tabs: React feature tabs that auto-advance with a progress bar and swap visuals
Features Sticky Scroll: A React sticky scroll features section: steps light up as visuals scroll past
Spotlight Card: A React spotlight card: an accent glow follows the pointer across card and border
Scroll Reveal: A React scroll reveal: fade content in from any direction or out of a blur

Install Features Grid

npx shadcn@latest add @charcoal/features-grid

Features 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 Features 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.

Built from

Spotlight Card: An ember glow follows the pointer across the card and its border.
Scroll Reveal: Wrap anything to fade it in as it scrolls into view, from any direction or out of a blur. Several children stagger.

Features Grid as Markdown