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

Public roadmap in Now, Next and Later columns with upvotes that re-sort the cards.

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

About Features Roadmap

Features Roadmap shows what you are building in three columns and lets visitors vote. Votes re-sort the cards live, so the most wanted ideas rise to the top of each column.

It is a full-width features 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 Features Roadmap

Products built in public.
Open-source and creator projects.
Pre-launch waitlists.
Crowdfunding production timelines.

How it is built

Cards are title, tag and votes, votes toggle locally and cards move with layout animation. Wire the toggle to your own feedback store.

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

Goes well with Features Roadmap

Features Roadmap is part of 6 full templates, so you can see it in a finished page.

Aperture template: Know what users do, and why.
Sentinel template: Know before your users do.
Patron template: Let your audience fund the work.
Campfire template: Group chat that stays readable.
Stealth template: Say little. Collect emails.
Kickstart template: Back the first production run.
Features Grid: A React features grid of six cards with a pointer spotlight and staggered reveal
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

Install Features Roadmap

npx shadcn@latest add @charcoal/features-roadmap

Features Roadmap 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 Roadmap 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 Roadmap as Markdown