Bento Builder

An interactive bento-grid layout editor where you drag tiles to reposition, resize them from a corner handle, rename them inline, add or remove tiles, and export the resulting grid layout as ready-to-use code.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Bento Builder to your project and fits it to your theme.

import { BentoBuilder } from "@/components/ui/bento-builder";

export default function BentoBuilderDemo() {
  return (
    <div className="w-full min-h-screen bg-background">
      <BentoBuilder />
    </div>
  );
}