Block · CLI
Feature Bento
Bento grid of product pillars with soft-rect panels. Install as @atroui/feature-bento.
Preview
npx shadcn@latest add @atroui/feature-bentoProduct
One kit, every section.
Replace these with your real product pillars. Keep one job per card.
Sections that compose
Heroes, pricing, FAQs, and forms share tokens — so any page looks designed, not assembled.
Fast by default
Server-first blocks with motion that respects reduced motion.
Themed in minutes
Accent, surface, and radius axes — no theme soup.
Owned source
The CLI installs files into your repo. Edit copy, fork layout, keep git history.
Production hardening
Focus states, safe-area insets, and contrast checked before you ship.
Grows with you
Start with a hero and a form. Add dashboards, tools, and docs without rewriting.
Installation
Agent blurb — install command + no npm UI rule. For agents
npx shadcn@latest add @atroui/feature-bentoSource lands in your repo. Installation · Registry
Usage
Use as the product overview section. After install, edit CONTENT and FEATURES at the top of the file — keep one job per card.
tsx
import { FeatureBento } from "@/components/blocks/feature-bento"
export function Example() {
return <FeatureBento />
}Part of Dark marketing sections for Next.js.
Feature Bento