Features Vertical Tabs
Vertical feature list that advances on its own, with a progress bar and a crossfading photo.
- Type: Features section
- Styles: Light, Minimal
- Licence: Charcoal UI Pro
About Features Vertical Tabs
Features Vertical Tabs lists your features down the left and shows a photo for the active one on the right. It advances on its own, with a progress bar filling on the current item, and pauses while visitors read.
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 Vertical Tabs
- Apps with four or five headline features.
- Travel, finance and consumer apps.
- Beta and early-access pages.
- Product overviews on hardware pages.
How it is built
The timer pauses on hover and stops under reduced motion, the body text expands only for the active tab, and images crossfade with a slight zoom.
It has no component dependencies beyond the shared utilities, so it is one file to read and change.
Goes well with Features Vertical Tabs
Features Vertical Tabs is part of 6 full templates, so you can see it in a finished page.
- Meridian template: The CRM for teams under fifty.
- Halo template: One product, every angle.
- Tally template: Cards, receipts and budgets in one place.
- Breathe template: Ten quiet minutes a day.
- Lingo template: Speak a new language in 15 minutes a day.
- Pilot template: Recruit your first beta testers.
- 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 Vertical Tabs
npx shadcn@latest add @charcoal/features-vertical-tabsFeatures Vertical 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 Vertical 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.