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

A bento grid where every tile is a working component, not a screenshot.

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

About Features Bento

Features Bento is a bento grid where every tile is a working component, a slider, a switch, a ticker and a live status, not a screenshot.

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 Bento

Showing product interactions on a landing page.
UI libraries and design systems.
SaaS with configurable features.
Developer platforms.

How it is built

Real Charcoal components sit in each tile, so visitors can touch the product before signing up.

It is composed from Range Slider, Switch, Number Ticker, Status Badge, Loader, Spotlight Card, 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 Bento

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

Ember template: An AI product site that glows.
Tidepool template: Postgres that scales to zero and back.
Features Grid: A React features grid of six cards with a pointer spotlight and staggered reveal
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
Features Sticky Scroll: A React sticky scroll features section: steps light up as visuals scroll past
Range Slider: Six animated React range sliders on one accessible core: inline, tick, fluid, wave, bubble and ruler
Switch: An animated React toggle switch whose thumb stretches when pressed, like a real switch
Number Ticker: An animated React number ticker: each digit rolls on its own wheel
Status Badge: A React status badge that morphs between states with a pulsing live dot

Install Features Bento

npx shadcn@latest add @charcoal/features-bento

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

Range Slider: Six sliders that share one accessible core: drag, click, or use the arrow, Page and Home/End keys. Every variant respects reduced motion.
Switch: A spring-driven thumb that stretches while pressed, like a real toggle under your thumb.
Number Ticker: Each digit rolls on its own wheel to the new number, so changes read as motion instead of a flicker.
Status Badge: Badge that morphs between states: the width animates, the label cross-fades and the dot pulses while live.
Loader: Four quiet loaders: dots, bars, orbit and ember pulse. Each announces itself to screen readers.
Spotlight Card: An ember glow follows the pointer across the card and its border.

Features Bento as Markdown