Sections

Bento Grid

Bento-style feature grid with variable column spans, gradients, and optional CTA links

Quick Preview

Everything you need

A complete toolkit for building modern web products.

Performance⚡

Blazing fast

Built on Next.js App Router with React Server Components — ships zero JS by default.

🌙

Dark mode

First-class dark mode with CSS variables.

🔷

Fully typed

TypeScript strict mode throughout every component.

A11y♿

Accessible by default

WCAG 2.2 AA compliant components — ARIA labels, keyboard navigation, and focus management built in.

🌐

Open source

MIT licensed — use it anywhere, customize everything.

Stable🚀

Production ready

Tested, typed, and deployed by real teams.

Installation

// Copy the component from
src/components/sections/BentoGrid.tsx

Usage

import { BentoGrid } from '@/components/sections/BentoGrid'

const items = [
  {
    title:       'Blazing fast',
    description: 'Built on Next.js App Router...',
    icon:        '⚡',
    colSpan:     'two-thirds',      // 'full' | 'two-thirds' | 'half' | 'third'
    rowSpan:     1,                 // 1 | 2
    gradient:    'from-teal-50 to-emerald-50',
    tag:         'Performance',
  },
]

<BentoGrid title="Everything you need" items={items} />

Equal-sized grid

Uniform column layout

Everything you need

Use colSpan:'third' and 'full' for a uniform layout.

⚡

Fast

Renders in milliseconds.

🔒

Secure

End-to-end encryption.

🌐

Open source

MIT license, fork away.

🌍

Works everywhere

Deploy to any cloud or edge.

Prompt Preview

Copy a prompt that recreates this UI

Paste this into your AI coding assistant to generate code that closely matches the reference, including color, size, shape, typography, spacing, and polish.

Copy-ready AI prompt

Starts from the current visual reference and project constraints.

Build a sections component named Bento Grid in React/Next.js.
Goal: recreate the same overall UI and behavior as the Bento Grid reference from a component gallery.
What it needs to communicate: Bento-style feature grid with variable column spans, gradients, and optional CTA links.

Project constraints:
- Use Next.js 16.2.6 with the App Router, React 19, TypeScript strict mode, and Tailwind CSS v4.
- Do not create a tailwind.config.js file. Use Tailwind v4 utilities and CSS variables where design tokens are needed.
- If you are implementing this inside the same project, use the Prompt font via next/font/google. If not, use the closest equivalent typeface.
- Return production-ready code with imports, responsive behavior, keyboard accessibility, and polished empty, hover, focus, active, and disabled states where relevant.
- Match the reference closely: color palette, spacing scale, border radius, shadows, icon scale, typography hierarchy, and motion timing.

Component-specific expectations:
- Treat the result as a full-width section with strong layout rhythm and responsive spacing.
- Preserve headline hierarchy, supporting copy, and clear CTA emphasis.
- Avoid unnecessary dependencies unless the behavior truly requires them.
- No explicit color literals were found in the examples. Match the live reference and the project accent color when appropriate.

Props to support:
- title: string — default "Everything you need" — Section heading
- subtitle: string — Section sub-heading
- items: BentoItem[] — Grid items with title, description, icon, span, gradient
- className: string — Additional CSS classes

Reference usage patterns:
- No examples were documented. Infer a sensible default presentation and one richer usage example.

Feature expectations:
- Variable column spans: full / two-thirds / half / third
- Row span support
- Per-item gradient background
- Optional CTA arrow and href
- Optional tag badge
- Server Component

Output requirements:
- Return complete code, not pseudocode.
- Include all necessary imports and helper types.
- Keep the implementation accessible, responsive, and visually finished.
- Match the reference for color, size, shape, typography, spacing, and interaction states as closely as possible.
- If multiple files are needed, organize them cleanly and explain the file structure briefly.

Tweak only product-specific copy or data after the first generation pass.

Props

Prop	Type	Default	Description
`title`	`string`	`"Everything you need"`	Section heading
`subtitle`	`string`	-	Section sub-heading
`items`	`BentoItem[]`	-	Grid items with title, description, icon, span, gradient
`className`	`string`	-	Additional CSS classes

Features

✓Variable column spans: full / two-thirds / half / third
✓Row span support
✓Per-item gradient background
✓Optional CTA arrow and href
✓Optional tag badge
✓Server Component