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

Feature tabs that auto-advance with a filling progress bar, swapping a visual on the right.

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

About Features Tabs

Features Tabs auto-advances through feature tabs with a filling progress bar, swapping the visual on the right, and lets visitors click to jump.

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

When to use Features Tabs

Product tours on homepages.
Multi-feature SaaS.
Onboarding highlights.
Comparison of workflows.

How it is built

A timer drives the active tab and progress, pausing on hover and focus.

It is composed from Progress, 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 Tabs

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

Ember template: An AI product site that glows.
Terminus template: A terminal with taste.
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 Sticky Scroll: A React sticky scroll features section: steps light up as visuals scroll past
Progress: Animated React progress bars and rings on springs, with an indeterminate sweep

Install Features Tabs

npx shadcn@latest add @charcoal/features-tabs

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

Progress: Linear and circular progress on a spring, with an optional indeterminate sweep.

Features Tabs as Markdown