Available nowReact

Bento Grid

A responsive feature layout with composable cards and accessible calls to action.

shadcnRegistry install command

npx shadcn add http://localhost:3000/r/menace-bento-grid.json

Preview

Live component behavior

Interactive

Preview size

desktop

Design with the component running

Preview the real component and its responsive states before bringing the source into your project.

Open the canvas

A focused component catalog

Find polished building blocks grouped by the work they help you ship.

Browse collections

Source that lands cleanly

Install readable source with one registry command and no hidden runtime.

Copy the command

Confidence before publish

See the component in context, then review its API, behavior, and release checks.

Review the component

Use it in context.

Copy the component into your project, then adapt the source to the interface around it.

TSXUsage example

import { BentoCard, BentoGrid } from "@/components/menace-bento-grid";

<BentoGrid>
  <BentoCard
    name="Fast workflows"
    description="Move from idea to shipped work without losing context."
    href="/features"
    cta="Learn more"
    Icon={SparklesIcon}
    background={<FeatureArtwork />}
  />
</BentoGrid>

API and behavior

childrenrequired: BentoCard instances or other grid content.
backgroundrequired: Decorative React content positioned behind the card copy.
Iconrequired: Icon component rendered above the feature name.
href / ctarequired: Accessible destination and label for the card action.

Collapses from three columns to two and then one as space gets tighter.
The call to action stays visible on touch layouts and reveals on hover or keyboard focus at desktop widths.
Decorative backgrounds are hidden from assistive technology, and motion transitions respect reduced-motion preferences.