Bento Grid

Bento Grid is a React product-feature layout with cards of different column spans. The Magic UI source provides the grid and a composed feature card with an icon, background, description and call-to-action link.

Better with your agent

Give your agent taste.

The best way to use Rendyn is through MCP. Let your agent find the right component, compare previews and bring the source into your project.

All components are free. Sign up only to connect MCP.

Connect to MCP for free

Interactive exampleReact Tailwind CSS

Practical React example

Use a larger card for your primary capability and smaller cards for supporting features. Keep the DOM reading order meaningful when changing the visual spans.

Before you copy and paste

Add BentoGrid and BentoCard, their button and cn dependencies, and the listed @radix-ui/react-icons package from the Code tab. Tailwind classes control responsive columns and card spans.

Listed package dependencies: @radix-ui/react-icons.

Use the Code tab for the component files and installation instructions, then adapt the imports in this example to your project.

A responsive feature grid with a visible call to action

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

function FeatureIcon({ className }: { className?: string }) {
  return (
    <svg aria-hidden="true" className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor">
      <rect x="4" y="4" width="16" height="16" rx="3" />
      <path d="M4 12h16M12 4v16" />
    </svg>
  );
}

export function ProductFeatures() {
  return (
    <BentoGrid className="grid-cols-1 md:grid-cols-3">
      <BentoCard
        name="A clearer workspace"
        description="Bring the next task into focus."
        Icon={FeatureIcon}
        background={<div aria-hidden="true" className="h-28 bg-gradient-to-br from-slate-100 to-slate-200" />}
        href="#workspace"
        cta="Explore the workspace"
        className="col-span-1 md:col-span-2 [&_a]:focus-visible:outline-2 [&_a]:focus-visible:outline-offset-2 [&>div:nth-child(3)]:opacity-100 [&>div:nth-child(3)]:translate-y-0"
      />
      <BentoCard
        name="Review together"
        description="Keep decisions beside the work."
        Icon={FeatureIcon}
        background={<div aria-hidden="true" className="h-28 bg-slate-100" />}
        href="#review"
        cta="Explore reviews"
        className="col-span-1 [&_a]:focus-visible:outline-2 [&_a]:focus-visible:outline-offset-2 [&>div:nth-child(3)]:opacity-100 [&>div:nth-child(3)]:translate-y-0"
      />
    </BentoGrid>
  );
}

The grid defaults to three columns and each card defaults to spanning all three. The example overrides both at small widths. It also keeps the source’s third child—the desktop CTA—visible instead of requiring hover to reveal it.

Customization

BentoGrid className: The default uses 22rem auto rows, three columns and a gap. Override grid-cols and auto-rows in Tailwind to fit your content rather than relying on a breakpoint preset.
BentoCard content: Supply name, description, Icon, background, href, cta and className. Background is a React node, not an image URL prop or an automatically generated illustration.
Card spans / links: Use responsive col-span classes for the visual layout. Replace the sample fragment href values with real destinations in your application.

Integration notes

The imported desktop CTA is visually hidden until hover but remains focusable. Keep it visible as shown or adapt the source to reveal it on keyboard focus; test touch and keyboard use.
The third-child selector in the example matches this imported source. Recheck it after any structural source update. Add your application’s reduced-motion styles for the card’s hover transitions.
This is a feature-section building block, not a complete website template. Copy the required files and retain their upstream licence notices when adapting it.

Component source: Magic UI documentation . These examples describe the version imported into Rendyn. Upstream APIs may have changed; retain the source licence notices when adapting the code.