Bento Grid

Feature grid with hover-revealed calls to action and per-card backgrounds.

MMeridian DS·byMDMeridian DSPro

8,940

Bookmarks

15,300

Installs

176,500

Views

22 lines

import { Bell, Calendar, FileText, Globe, Search } from "lucide-react"
import { BentoCard, BentoGrid } from "@/components/ui/bento-grid"

const features = [
  { name: "Save your files", description: "We automatically save your files as you type.", icon: <FileText className="size-4" />, className: "col-span-3 lg:col-span-2" },
  { name: "Full text search", description: "Search through all your files in one place.", icon: <Search className="size-4" />, className: "col-span-3 lg:col-span-1" },
  { name: "Multilingual", description: "Supports 100+ languages and counting.", icon: <Globe className="size-4" />, className: "col-span-3 lg:col-span-1" },