SaaS Dashboard Bento Grid

A 4-column dark-themed bento grid with rounded 16px cards and a soft indigo accent glow — the asymmetric, card-based layout that's become the default look for modern SaaS product and dashboard pages.

bentoColumns: 4  ·  bentoGap: 16  ·  bentoRadius: 16  ·  bentoAccent: #6366f1  ·  bentoGlow: 0.3  ·  bentoTheme: dark

Frequently asked questions

Why 4 columns for a dashboard bento grid?

Four columns gives enough flexibility for cards to span 1, 2 or the full width while still reading as an organized grid — fewer columns limits card-size variety, more columns can make individual cards feel cramped.

Why dark theme specifically for this preset?

Dark backgrounds make a soft accent glow far more visible and are the dominant convention for SaaS dashboard and product UI — switch the theme control to light if that fits your product better.

How do I make some cards bigger than others?

Bento layouts rely on individual cards spanning multiple grid columns/rows (e.g. one card spanning 2 columns) — apply that span to specific cards once you've copied the base grid CSS.