Bento Grid

Renders a grid layout with cards showcasing product features. Each card has a background, icon, title, description, and a call-to-action button. Use it to display product features in a clean and interactive format.

byMagic UI

Installation

terminal

pnpm dlx layro-cli add @magicuidesign/bento-grid

npx layro-cli add @magicuidesign/bento-grid

npx layro-cli add @magicuidesign/bento-grid

bunx layro-cli add @magicuidesign/bento-grid

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Dependencies

Demo

import { type ComponentPropsWithoutRef, type ReactNode } from "react"
import { ArrowRightIcon } from "@radix-ui/react-icons"

import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"

interface BentoGridProps extends ComponentPropsWithoutRef<"div"> {
  children: ReactNode
  className?: string
}

interface BentoCardProps extends ComponentPropsWithoutRef<"div"> {
  name: string
  className: string