Bento Grid
Modern bento-style grid layout with customizable spans and patterns.
Import
import {
PixelBentoGrid,
PixelBentoItem,
PixelBentoHeader,
PixelBentoTitle,
PixelBentoDescription,
PixelBentoContent,
PixelBentoIcon,
PixelBentoFooter,
PixelBentoPattern
} from "@/components/ui/pixel/pixel-bento"Usage
Featured
Main content area
Large featured section with 2-column span
Item 1
Item 2
Item 3
Item 4
Component Source
Copy and paste the following code into your project at /src/components/ui/pixel/pixel-bento.tsx
"use client";
import { cva, type VariantProps } from "class-variance-authority";
import * as React from "react";
import { cn } from "@/lib/utils";
const pixelBentoGridVariants = cva(
"grid gap-4 w-full pixel-borders transition-none duration-0",
{
variants: {
variant: {
default: "bg-[#fffacd] dark:bg-[#1a1a1a]",
primary: "bg-[#ff8c00] dark:bg-[#ff8c00]",
secondary: "bg-[#ffd700] dark:bg-[#ffd700]",
dark: "bg-black dark:bg-[#000000]",
},
columns: {
1: "grid-cols-1",
2: "grid-cols-1 md:grid-cols-2",
3: "grid-cols-1 md:grid-cols-2 lg:grid-cols-3",
4: "grid-cols-1 md:grid-cols-2 lg:grid-cols-4",
auto: "grid-cols-1 md:grid-cols-2 lg:grid-cols-3",
},
gap: {
none: "gap-0",
sm: "gap-2",
md: "gap-4",
lg: "gap-6",
xl: "gap-8",
},
},
defaultVariants: {
variant: "default",
columns: "auto",
gap: "none",
},
},
);
const pixelBentoItemVariants = cva(
"pixel-borders border-4 border-black dark:border-[#ff8c00] p-6 transition-none duration-0 relative overflow-hidden",
{
variants: {
variant: {
default:
"bg-white dark:bg-[#2a2a2a] shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] dark:shadow-[4px_4px_0px_0px_rgba(255,140,0,0.3)]",
primary:
"bg-[#ff8c00] text-white border-black dark:bg-[#ff8c00] dark:border-[#ffd700] shadow-[6px_6px_0px_0px_rgba(0,0,0,1)] dark:shadow-[6px_6px_0px_0px_rgba(255,215,0,0.3)]",
secondary:
"bg-[#ffd700] text-black border-black dark:bg-[#ffd700] dark:border-[#ff8c00] shadow-[6px_6px_0px_0px_rgba(0,0,0,1)]",
// ... (more code below)Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "default" | "primary" | "secondary" | "dark" | "gradient" | "ghost" | "default" | Visual style variant of the bento grid or item |
| columns | 1 | 2 | 3 | 4 | "auto" | "auto" | Number of columns in the grid (responsive) |
| gap | "none" | "sm" | "md" | "lg" | "xl" | "md" | Spacing between grid items |
| span | 1 | 2 | 3 | 4 | 'full' | 1 | Number of columns the item should span |
| rowSpan | 1 | 2 | 3 | 'full' | 1 | Number of rows the item should span |
| hover | "none" | "lift" | "glow" | "none" | Hover effect animation |
| pattern | "dots" | "grid" | "checkerboard" | "scanlines" | "dots" | Background pattern for decorative overlay |
Examples
Basic Grid
Simple 3-column bento grid
Featured
Main content area
Large featured section with 2-column span
Item 1
Item 2
Item 3
Item 4
Featured Layout
Large featured item with smaller cards
Featured
Main content area
Large featured section with 2-column span
Item 1
Item 2
Item 3
Item 4
Pattern Backgrounds
Items with decorative patterns
Featured
Main content area
Large featured section with 2-column span
Item 1
Item 2
Item 3
Item 4
Dashboard Layout
Complex dashboard-style grid
Featured
Main content area
Large featured section with 2-column span
Item 1
Item 2
Item 3
Item 4
Ghost Items
Dashed border placeholder items
Featured
Main content area
Large featured section with 2-column span
Item 1
Item 2
Item 3
Item 4
Hover Effects
Interactive hover animations
Featured
Main content area
Large featured section with 2-column span
Item 1
Item 2
Item 3
Item 4
Accessibility
This component is built with accessibility in mind, including proper ARIA attributes, keyboard navigation, and focus management.