Bento Grid
A customizable shadcn-style grid system for creating modern, responsive masonry layouts.
The Bento Grid component offers a flexible approach to creating visually appealing content arrangements in the style of popular shadcn components. Built with Tailwind CSS and React, it provides a robust foundation for modern web layouts.
Perfect for showcasing features, products, or content, this component implements a card-based layout system that maintains both aesthetics and functionality. The grid system adapts seamlessly to different screen sizes while preserving the elegant visual hierarchy of your content.
Installation
npx shadcn@latest add "https://launchuicomponents.com/r/bento-grid"
This command will install necessary dependencies and add them topackage.json
To access components and examples, purchase Launch UI Pro.
Usage
Build a website that is hard to forget.
Build a top-notch landing page even if you don't have the time for it. Create an irresistible offer that speaks professionalism and hi-end design.
Made for search engines
Unlike the bloated no-code solutions, Launch UI is built to be perfectly optimized for search engines.
The code is yours
With Launch UI, the code is yours forever. Never bother about subscriptions and lock-ins.
page.tsx
tailwind.config.ts
import { cn } from"@/lib/utils"; import clsx from "clsx"; import { PropsWithChildren } from"react"; type NoteProps = PropsWithChildren & { title?: string; type?: "note" | "danger" | "warning" | "success"; className?: string; }; export default function Note({ children, title = "Note", type = "note", className, }: NoteProps ) { const noteClassNames = clsx({ "dark:bg-stone-950/25 bg-stone-50": type == "note", "dark:bg-red-950 bg-red-100 border-red-200 dark:border-red-900": type === "danger", "dark:bg-orange-950 bg-orange-100 border-orange-200 dark:border-orange-900": type === "warning", "dark:bg-green-950 bg-green-100 border-green-200 dark:border-green-900": type === "success", });
import { Config } from"tailwindcss"; const config = { darkMode: ["class"], content: [ "./pages/**/*.{js,ts,jsx,tsx,mdx}", "./components/**/*.{js,ts,jsx,tsx,mdx}", "./app/**/*.{js,ts,jsx,tsx,mdx}", ], theme: { extend: { colors: { background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", card: { DEFAULT: "hsl(var(--card) / 0.2)", foreground: "hsl(var(--card-foreground))", },
Top-level performance
Build a website that is hard to forget.
Build a top-notch landing page even if you don't have the time for it. Create an irresistible offer that speaks professionalism and hi-end design.
The code is yours
With Launch UI, the code is yours forever. You can use it as a starting point for your own projects and customize it to your needs.
Never bother about subscriptions and lock-ins.
127.0.0.1:8000
Data-agnostic
All the data is separate from components so you can edit it in seconds or make it dynamic.
Easily connect to a CMS of your choice.
Integrate website and product
Integrate your landing page directly in the product and forget about multiple codebases and unnecessary APIs.
No extra dependencies, no extra maintenance.
Top-level performance
Build a website that is hard to forget.
Build a top-notch landing page even if you don't have the time for it. Create an irresistible offer that speaks professionalism and hi-end design.
Made for search engines
Unlike the bloated no-code solutions, Launch UI is built to be perfectly optimized for search engines.
The code is yours
With Launch UI, the code is yours forever. You can use it as a starting point for your own projects and customize it to your needs.
Never bother about subscriptions and lock-ins.
page.tsx
tailwind.config.ts
import { cn } from"@/lib/utils"; import clsx from "clsx"; import { PropsWithChildren } from"react"; type NoteProps = PropsWithChildren & { title?: string; type?: "note" | "danger" | "warning" | "success"; className?: string; }; export default function Note({ children, title = "Note", type = "note", className, }: NoteProps ) { const noteClassNames = clsx({ "dark:bg-stone-950/25 bg-stone-50": type == "note", "dark:bg-red-950 bg-red-100 border-red-200 dark:border-red-900": type === "danger", "dark:bg-orange-950 bg-orange-100 border-orange-200 dark:border-orange-900": type === "warning", "dark:bg-green-950 bg-green-100 border-green-200 dark:border-green-900": type === "success", });
import { Config } from"tailwindcss"; const config = { darkMode: ["class"], content: [ "./pages/**/*.{js,ts,jsx,tsx,mdx}", "./components/**/*.{js,ts,jsx,tsx,mdx}", "./app/**/*.{js,ts,jsx,tsx,mdx}", ], theme: { extend: { colors: { background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", card: { DEFAULT: "hsl(var(--card) / 0.2)", foreground: "hsl(var(--card-foreground))", },
Top-level performance
Fits right into your stack
Integrate your landing page directly in the product while using your favorite tools.
Build a website that is hard to forget.
Build a top-notch landing page even if you don't have the time for it. Create an irresistible offer that speaks professionalism and hi-end design.
Top-level performance
With no heavy assets or dependencies, your website will feel snappy and load instantly.
No bloat, no extra maintenance.
Data-agnostic
All the data is separate from components so you can edit it in seconds or make it dynamic.
Easily connect to a CMS of your choice.
Made for search engines
Unlike the bloated no-code solutions, Launch UI is built to be perfectly optimized for search engines.
The code is yours
With Launch UI, the code is yours forever. You can use it as a starting point for your own projects and customize it to your needs.
Never bother about subscriptions and lock-ins.
Need help?
File a feature request, report a bug, or ask me anything.