Bento Features
An asymmetric bento grid where each feature is demonstrated by a small live interaction, not an icon.
Overview
Feature sections usually show an icon and two lines of text. In this one, every cell proves its claim: the search types and returns results, the sync badge cycles from syncing to synced, the shortcut keys press themselves, and the chart breathes on a slow loop and lifts on hover.
The layout alternates wide and narrow cells on a six-column grid, so the rhythm never feels like a spreadsheet. On small screens it collapses to a single column. Each demo is a small, self-contained component you can replace with your own product’s micro-moments.
Use it as the main feature section on a product landing page. Keep it to four or five cells.
When to use
- Marketing and product pages that need a complete, responsive band of content.
When not to use
- Inside dense app screens, where a smaller component fits better.
Installation
pnpm dlx shadcn@latest add https://sundaeui.dev/r/bento-features.jsonnpx shadcn@latest add https://sundaeui.dev/r/bento-features.jsonyarn dlx shadcn@latest add https://sundaeui.dev/r/bento-features.jsonbunx --bun shadcn@latest add https://sundaeui.dev/r/bento-features.jsonWorks in any React project. Files are written to components/sundae/. Read the source in the stage’s Code view. Pro assets need a personal token. See authenticated installs.
- No dependencies beyond React 18 or later.
- Copy bento-features.tsx into components/sundae/.
- Make sure Tailwind scans that folder (v4 detects it automatically; v3 needs it in `content`).
- Import the component and use it as shown below.
Usage
import { BentoFeatures } from '@/components/sundae/bento-features'
<BentoFeatures eyebrow="Features" title="Built for the way teams actually work." intro="Four things we obsessed over." />Props
| Prop | Type | Default |
|---|---|---|
title*Section heading. | ReactNode | — |
eyebrowSmall label above the title. | string | 'Features' |
introSupporting paragraph. | string | — |
Accessibility
- Demos are aria-hidden decoration. Each cell’s heading and text carry the meaning.
- With prefers-reduced-motion, every loop stops on its finished state: search filled, sync complete.
Customization
- Replace the four demo components and copy in Cell to match your features.
- Change md:col-span-4/2 to rebalance the grid.
FAQ
- Is Bento Features free?
- Bento Features is part of Sundae Pro. The live preview is open to everyone; the source installs with a Pro account.
- How do I install Bento Features?
- Run npx shadcn@latest add https://sundaeui.dev/r/bento-features.json. The files are written to components/sundae/. It has no dependencies beyond React 18 or later.
- Does Bento Features support keyboard and screen readers?
- Demos are aria-hidden decoration. Each cell’s heading and text carry the meaning. With prefers-reduced-motion, every loop stops on its finished state: search filled, sync complete.
- Does Bento Features respect reduced motion?
- Yes. With prefers-reduced-motion set, decorative motion is removed and state changes are instant.
More like this
All sections →- Pro
Ledger Pricing
Sections · Editorial Margin Quote
Sections · Editorial- Pro
Billboard Hero
Sections · Brutalist - Pro
Product Footer
Sections · Understated - Pro
Newsletter CTA
Sections · Refined - Pro
Changelog Timeline
Sections · Editorial