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

Product Grid

Shop grid with category chips, sorting, wishlist hearts and a quick-add button that fills the bag.

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

About Product Grid

Product Grid is a shop listing: category chips, a sort menu, a bag count that pops when items are added, wishlist hearts on every card and a quick-add button that slides up on hover.

It is a full-width commerce 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 Product Grid

Online shops of every kind.
Drops and limited releases.
Bookshops and record shops.
Plant and tea shops.

How it is built

Uses Like Button and Select. Items take a name, price, category, image and optional badge, and sorting and filtering are local.

It is composed from Like Button, Select, so installing it also installs those components, and you can restyle each one the same way you would on its own.

Goes well with Product Grid

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

Atelier template: A gallery that happens to have a checkout.
Steep template: Loose-leaf, sold like it matters.
Fernhouse template: Plants that arrive happy.
Dropline template: Built for the hour everything sells out.
Marginalia template: An independent bookshop, online.
Product Detail: A React product page with gallery, live frame preview, sizes and add to bag
Menu Restaurant: A printed-menu React section with serif dishes, price leaders and course tabs
Listings Stays: React rental listings beside a map where cards and price pins highlight together
Commerce Bundle: A build-your-own bundle React section with tiered discounts and a progress bar
Like Button: An animated React like button: the heart pops, sparks burst and the count rolls
Select: An animated React select with staggered options, full keyboard support and type-ahead

Install Product Grid

npx shadcn@latest add @charcoal/product-grid

Product 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 Product 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

Like Button: The heart squashes and pops, a ring and eight sparks burst out, and the count rolls.
Select: Listbox select that unfolds from its trigger with staggered options, full keyboard support and type-ahead.

Product Grid as Markdown