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

Old way versus new way: the same tasks side by side, with a toggle that flips the whole table.

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

About Features Versus

Features Versus shows the same tasks done the old way and your way. A segmented toggle flips the whole table, each row slides to its new answer, and a total at the bottom shows the time or money saved.

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

When to use Features Versus

Automation and workflow tools.
Products replacing spreadsheets or agencies.
Version 2 launches comparing to version 1.
Copywriters and consultants showing before and after.

How it is built

Rows are task, before and after, the toggle is Segmented Control, and rows animate with a slight stagger. The totals and labels are props.

It is composed from Segmented Control, 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 Versus

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

Quill template: Ask your data, get answers.
Relay template: Status updates that write themselves.
Vellum template: Find anything your team ever wrote.
Hexwork template: The framework, and the people behind it.
Copyhouse template: Words that sell, from one writer.
Steep template: Loose-leaf, sold like it matters.
Ledger template: Bookkeeping that reads like a newspaper.
Harbor template: Payroll in ten minutes a month.
Canopy template: Insurance explained in plain English.
Relaunch template: Announce the big new version.
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
Segmented Control: An animated React segmented control with a pill that glides to the selected option

Install Features Versus

npx shadcn@latest add @charcoal/features-versus

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

Segmented Control: Two to five exclusive options with a pill that glides to the selection. Arrow keys move and select.

Features Versus as Markdown