Does Commerce Bundle 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.

Commerce Bundle

Build-a-box bundle with drawn coffee bags and a progress bar that unlocks bigger discounts.

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

About Commerce Bundle

Commerce Bundle lets shoppers build a box. They pick items drawn as packaging, a progress bar shows how close they are to the next discount, and the total updates with the saving struck through.

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

When to use Commerce Bundle

Coffee and tea subscriptions.
Record and book clubs.
Snack and gift boxes.
Beauty and skincare sets.

How it is built

Packaging is drawn in CSS with a shade per item, discount tiers are a prop, and the button label is yours.

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

Goes well with Commerce Bundle

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

Roastery template: Build a box, save every delivery.
Steep template: Loose-leaf, sold like it matters.
Groove template: One great record, every month.
Product Detail: A React product page with gallery, live frame preview, sizes and add to bag
Product Grid: A React shop grid with category chips, sorting, wishlist and quick add
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
Button: An animated React button with six variants, spring press feedback and a width-stable loading state

Install Commerce Bundle

npx shadcn@latest add @charcoal/commerce-bundle

Commerce Bundle 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 Commerce Bundle 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

Button: Six variants with spring press feedback. The loading state swaps the label for a spinner without changing width.

Commerce Bundle as Markdown