Bento grids, full app shells, split-screen auth, masonry walls and hairline feature grids — page structures you can drop straight into a product.
Bento Grid
Copy-paste components with zero config, dark-mode ready.
Components
120+
+12 this week
Weekly installs
8,4k
Uptime
99.99%
Last 90 days
The modern feature showcase — mixed tile sizes, gradient heroes, live stat and a marquee strip.
| 1 | <div "color:#79c0ff">className="grid grid-cols-4 grid-rows-3 gap-3" "color:#79c0ff">style={{ height: 420 }}> |
| 2 | {/* hero tile — 2×2 */} |
| 3 | <div "color:#79c0ff">className="col-span-2 row-span-2 flex flex-col justify-between rounded-3xl bg-gradient-to-br from-violet-600 via-violet-700 to-indigo-800 p-6"> |
| 4 | <div "color:#79c0ff">className="flex h-11 w-11 items-center justify-center rounded-2xl bg-white/15 backdrop-blur"> |
| 5 | <BoltIcon "color:#79c0ff">className="h-5 w-5 text-white" /> |
| 6 | </div> |
| 7 | <div> |
| 8 | <h3 "color:#79c0ff">className="text-2xl font-extrabold text-white">Ship 10× faster</h3> |
| 9 | <p "color:#79c0ff">className="mt-1 text-sm text-violet-200/80">Copy-paste components with zero config.</p> |
| 10 | </div> |
| 11 | </div> |
| 12 | |
| 13 | {/* stat tile */} |
| 14 | <div "color:#79c0ff">className="rounded-3xl border border-white/10 bg-white/[0.04] p-5"> |
| 15 | <p "color:#79c0ff">className="text-xs text-white/40">Components</p> |
| 16 | <p "color:#79c0ff">className="mt-1 text-3xl font-extrabold text-white">120+</p> |
| 17 | </div> |
| 18 | |
| 19 | {/* chart tile */} |
| 20 | <div "color:#79c0ff">className="row-span-2 rounded-3xl border border-white/10 bg-white/[0.04] p-5"> |
| 21 | <p "color:#79c0ff">className="text-xs text-white/40">Weekly installs</p> |
| 22 | <div "color:#79c0ff">className="mt-4 flex h-32 items-end gap-1.5"> |
| 23 | {[40, 65, 45, 80, 58, 90, 72].map((h, i) => ( |
| 24 | <div "color:#79c0ff">key={i} "color:#79c0ff">className="flex-1 rounded-md bg-gradient-to-t from-cyan-500 to-violet-500" |
| 25 | "color:#79c0ff">style={{ height: h + "%" }} /> |
| 26 | ))} |
| 27 | </div> |
| 28 | </div> |
| 29 | |
| 30 | {/* glass tile */} |
| 31 | <div "color:#79c0ff">className="rounded-3xl bg-gradient-to-br from-emerald-500 to-teal-600 p-5"> |
| 32 | <p "color:#79c0ff">className="text-xs font-semibold text-emerald-100">Uptime</p> |
| 33 | <p "color:#79c0ff">className="mt-1 text-3xl font-extrabold text-white">99.99%</p> |
| 34 | </div> |
| 35 | |
| 36 | {/* wide marquee tile — spans full width */} |
| 37 | <div "color:#79c0ff">className="col-span-4 flex items-center overflow-hidden rounded-3xl border border-white/10 bg-white/[0.03] px-6"> |
| 38 | <div "color:#79c0ff">className="flex gap-10 whitespace-nowrap text-sm font-bold text-white/25" |
| 39 | "color:#79c0ff">style={{ animation: "marquee 18s linear infinite" }}> |
| 40 | {/* duplicate the list for a seamless loop */} |
| 41 | </div> |
| 42 | </div> |
| 43 | </div> |
App Shell
$12.4k
Revenue
2,840
Users
99.9%
Uptime
Sidebar + topbar + content scaffold with skeleton blocks — the starting point of every dashboard.
| 1 | <div "color:#79c0ff">className="flex h-[420px] overflow-hidden rounded-2xl border border-white/10 bg-[#08080f]"> |
| 2 | {/* sidebar */} |
| 3 | <aside "color:#79c0ff">className="hidden w-52 flex-col border-r border-white/8 bg-white/[0.02] p-3 sm:flex"> |
| 4 | <div "color:#79c0ff">className="flex items-center gap-2 px-2 py-2"> |
| 5 | <span "color:#79c0ff">className="flex h-7 w-7 items-center justify-center rounded-lg bg-gradient-to-br from-violet-600 to-indigo-600 text-xs font-black text-white">U</span> |
| 6 | <span "color:#79c0ff">className="text-sm font-extrabold text-white">Acme</span> |
| 7 | </div> |
| 8 | <nav "color:#79c0ff">className="mt-4 space-y-1"> |
| 9 | {["Overview", "Analytics", "Customers", "Billing"].map((item, i) => ( |
| 10 | <a "color:#79c0ff">key={item} "color:#79c0ff">href="#" |
| 11 | "color:#79c0ff">className={"block rounded-lg px-3 py-2 text-sm font-medium " + |
| 12 | (i === 0 ? "bg-violet-600/90 text-white" : "text-white/45 hover:bg-white/5 hover:text-white")}> |
| 13 | {item} |
| 14 | </a> |
| 15 | ))} |
| 16 | </nav> |
| 17 | <div "color:#79c0ff">className="mt-auto rounded-xl border border-white/8 p-3 text-xs text-white/40"> |
| 18 | <p "color:#79c0ff">className="font-bold text-white/70">Free plan</p> |
| 19 | <p "color:#79c0ff">className="mt-0.5">2 of 3 projects used</p> |
| 20 | </div> |
| 21 | </aside> |
| 22 | |
| 23 | {/* main column */} |
| 24 | <div "color:#79c0ff">className="flex min-w-0 flex-1 flex-col"> |
| 25 | {/* topbar */} |
| 26 | <header "color:#79c0ff">className="flex items-center justify-between border-b border-white/8 px-5 py-3"> |
| 27 | <input "color:#79c0ff">placeholder="Search…" "color:#79c0ff">className="w-56 rounded-lg border border-white/10 bg-white/[0.04] px-3 py-1.5 text-xs text-white placeholder-white/30 outline-none" /> |
| 28 | <div "color:#79c0ff">className="flex items-center gap-3"> |
| 29 | <BellIcon "color:#79c0ff">className="h-4 w-4 text-white/40" /> |
| 30 | <span "color:#79c0ff">className="h-7 w-7 rounded-full bg-gradient-to-br from-violet-500 to-indigo-600" /> |
| 31 | </div> |
| 32 | </header> |
| 33 | {/* content */} |
| 34 | <main "color:#79c0ff">className="grid flex-1 grid-cols-3 gap-4 overflow-hidden p-5"> |
| 35 | <div "color:#79c0ff">className="col-span-3 h-24 rounded-2xl border border-white/8 bg-white/[0.03]" /> |
| 36 | <div "color:#79c0ff">className="col-span-2 rounded-2xl border border-white/8 bg-white/[0.03]" /> |
| 37 | <div "color:#79c0ff">className="rounded-2xl border border-white/8 bg-white/[0.03]" /> |
| 38 | </main> |
| 39 | </div> |
| 40 | </div> |
Split-Screen Layout
“Best money we spent this quarter.”
— Sarah R., CTO at Lumina
Start your 14-day free trial
Brand panel with aurora glow on one side, form skeleton on the other — the classic auth split.
| 1 | <div "color:#79c0ff">className="grid h-[380px] grid-cols-2 overflow-hidden rounded-2xl border border-white/10"> |
| 2 | {/* brand side */} |
| 3 | <div "color:#79c0ff">className="relative flex flex-col justify-between overflow-hidden bg-gradient-to-br from-violet-700 via-indigo-800 to-[#0b0b16] p-7"> |
| 4 | <div "color:#79c0ff">className="absolute -left-10 -top-10 h-40 w-40 rounded-full bg-fuchsia-500/30 blur-3xl" /> |
| 5 | <span "color:#79c0ff">className="relative flex h-9 w-9 items-center justify-center rounded-xl bg-white/15 text-sm font-black text-white backdrop-blur">U</span> |
| 6 | <div "color:#79c0ff">className="relative"> |
| 7 | <p "color:#79c0ff">className="text-xl font-extrabold leading-snug text-white"> |
| 8 | “Best money we spent this quarter.” |
| 9 | </p> |
| 10 | <p "color:#79c0ff">className="mt-2 text-xs text-white/50">— Sarah R., CTO at Lumina</p> |
| 11 | </div> |
| 12 | </div> |
| 13 | |
| 14 | {/* form side */} |
| 15 | <div "color:#79c0ff">className="flex flex-col justify-center bg-[#0a0a13] p-7"> |
| 16 | <h3 "color:#79c0ff">className="text-lg font-extrabold text-white">Create account</h3> |
| 17 | <div "color:#79c0ff">className="mt-4 space-y-2.5"> |
| 18 | <div "color:#79c0ff">className="h-10 rounded-xl border border-white/10 bg-white/[0.04]" /> |
| 19 | <div "color:#79c0ff">className="h-10 rounded-xl border border-white/10 bg-white/[0.04]" /> |
| 20 | <div "color:#79c0ff">className="h-10 rounded-xl bg-gradient-to-r from-violet-600 to-indigo-600" /> |
| 21 | </div> |
| 22 | </div> |
| 23 | </div> |
Masonry Grid
Aurora kit
24 gradients
Glass pack
12 cards
Neon set
18 buttons
Bento shots
9 layouts
3D icons
48 assets
Charts
16 widgets
Pinterest-style columns with pure CSS — no JS measuring, just the columns property.
| 1 | {/* CSS columns do the masonry work */} |
| 2 | <div "color:#79c0ff">className="columns-2 gap-3 sm:columns-3 [&>*]:mb-3 [&>*]:break-inside-avoid"> |
| 3 | {tiles.map((t) => ( |
| 4 | <div "color:#79c0ff">key={t.id} |
| 5 | "color:#79c0ff">className="rounded-2xl border border-white/10 bg-white/[0.04] p-4" |
| 6 | "color:#79c0ff">style={{ minHeight: t.h }}> |
| 7 | <div "color:#79c0ff">className={"mb-3 h-16 rounded-xl bg-gradient-to-br " + t.gradient} |
| 8 | "color:#79c0ff">style={{ height: t.imgH }} /> |
| 9 | <p "color:#79c0ff">className="text-sm font-bold text-white">{t.title}</p> |
| 10 | <p "color:#79c0ff">className="mt-1 text-xs text-white/40">{t.sub}</p> |
| 11 | </div> |
| 12 | ))} |
| 13 | </div> |
Hairline Feature Grid
Rendered at the edge, 40ms anywhere on earth.
End-to-end TypeScript with zero any leaks.
Design tokens swap the whole look in one file.
Every breakpoint tested from 320px to 4K.
WCAG AA contrast and keyboard flows built in.
Ships in dark mode with a light variant included.
A divide-driven grid where borders form a perfect lattice — the Linear/Vercel signature.
| 1 | <div "color:#79c0ff">className="grid grid-cols-1 overflow-hidden rounded-2xl border border-white/10 sm:grid-cols-3 [&>*]:border-white/10 [&>*]:p-6 sm:[&>*:nth-child(n+4)]:border-t [&>*:nth-child(n+2)]:border-t sm:[&>*:nth-child(n+2)]:border-t-0 sm:[&>*:nth-child(3n+2)]:border-x"> |
| 2 | {features.map((f) => ( |
| 3 | <div "color:#79c0ff">key={f.title} "color:#79c0ff">className="group bg-white/[0.02] transition-colors hover:bg-white/[0.05]"> |
| 4 | <span "color:#79c0ff">className="text-lg">{f.emoji}</span> |
| 5 | <h3 "color:#79c0ff">className="mt-3 text-sm font-bold text-white">{f.title}</h3> |
| 6 | <p "color:#79c0ff">className="mt-1.5 text-xs leading-relaxed text-white/40">{f.body}</p> |
| 7 | </div> |
| 8 | ))} |
| 9 | </div> |
Docs Layout
Three-column documentation scaffold — nav rail, prose column and a table of contents.
| 1 | <div "color:#79c0ff">className="flex h-[300px] overflow-hidden rounded-2xl border border-white/10 bg-[#08080f] text-xs"> |
| 2 | {/* nav rail */} |
| 3 | <nav "color:#79c0ff">className="w-36 shrink-0 space-y-1 border-r border-white/8 p-3"> |
| 4 | <p "color:#79c0ff">className="px-2 pb-1 text-[9px] font-bold uppercase tracking-widest text-white/25">Guide</p> |
| 5 | {["Installation", "Theming", "CLI", "Deploy"].map((x, i) => ( |
| 6 | <a "color:#79c0ff">key={x} "color:#79c0ff">href="#" "color:#79c0ff">className={"block rounded-lg px-2 py-1.5 " + |
| 7 | (i === 1 ? "bg-violet-500/15 font-semibold text-violet-300" : "text-white/45 hover:text-white")}> |
| 8 | {x} |
| 9 | </a> |
| 10 | ))} |
| 11 | </nav> |
| 12 | |
| 13 | {/* prose */} |
| 14 | <main "color:#79c0ff">className="min-w-0 flex-1 space-y-2.5 p-5"> |
| 15 | <div "color:#79c0ff">className="h-5 w-2/5 rounded bg-white/12" /> |
| 16 | <div "color:#79c0ff">className="h-2.5 w-full rounded bg-white/6" /> |
| 17 | <div "color:#79c0ff">className="h-2.5 w-11/12 rounded bg-white/6" /> |
| 18 | <div "color:#79c0ff">className="h-16 rounded-xl border border-white/8 bg-black/40 p-3 font-mono text-emerald-400"> |
| 19 | npm install uidrops |
| 20 | </div> |
| 21 | <div "color:#79c0ff">className="h-2.5 w-4/5 rounded bg-white/6" /> |
| 22 | </main> |
| 23 | |
| 24 | {/* toc */} |
| 25 | <aside "color:#79c0ff">className="hidden w-32 shrink-0 border-l border-white/8 p-3 lg:block"> |
| 26 | <p "color:#79c0ff">className="text-[9px] font-bold uppercase tracking-widest text-white/25">On this page</p> |
| 27 | {["Setup", "Tokens", "Dark mode"].map((x, i) => ( |
| 28 | <p "color:#79c0ff">key={x} "color:#79c0ff">className={"mt-2 border-l-2 pl-2 " + |
| 29 | (i === 0 ? "border-violet-400 text-white/80" : "border-white/10 text-white/35")}> |
| 30 | {x} |
| 31 | </p> |
| 32 | ))} |
| 33 | </aside> |
| 34 | </div> |