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

Alternating image and text rows that slide in from opposite sides as you scroll.

Type: Features section
Styles: Light, Minimal
Licence: Free, MIT

About Features Alternating

Features Alternating pairs images and text in rows that alternate sides and slide in from opposite directions as you scroll.

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 Alternating

Explaining a product step by step.
Case-study highlights.
Service pages.
About pages.

How it is built

Scroll Reveal drives the entrances. Rows are an array of title, text and image props.

It is composed from Scroll Reveal, 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 Alternating

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

Ashfall template: Work first. Words second.
Cinder template: Serious numbers, calmly presented.
Foundry template: Big agency work, small agency speed.
Fernhouse template: Plants that arrive happy.
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 Tabs: React feature tabs that auto-advance with a progress bar and swap visuals
Features Sticky Scroll: A React sticky scroll features section: steps light up as visuals scroll past
Scroll Reveal: A React scroll reveal: fade content in from any direction or out of a blur

Install Features Alternating

npx shadcn@latest add https://charcoalui.com/r/features-alternating.json

Features Alternating is free and MIT licensed. The command installs the section into components/sections along with every component it uses.

Frequently asked questions

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

Scroll Reveal: Wrap anything to fade it in as it scrolls into view, from any direction or out of a blur. Several children stagger.

Features Alternating as Markdown