Bento

A fully responsive, Tailwind JIT-safe Bento Grid layout system with responsive props support.

bento-01

Hero Card

Stats 1

Stats 2

Wide Card

Small

import { BentoGrid, BentoGridItem } from "@/components/ui/bento"

export function BentoExample() {
  return (
    <div className="flex h-full w-full items-center justify-center">
      <BentoGrid cols={{ base: 2, md: 3, lg: 4 }}>
        <BentoGridItem colSpan={2} rowSpan={2}>
          Hero Card
        </BentoGridItem>
        <BentoGridItem>Stats 1</BentoGridItem>
        <BentoGridItem>Stats 2</BentoGridItem>

        <BentoGridItem colSpan={2}>Wide Card</BentoGridItem>

        <BentoGridItem>Small</BentoGridItem>
        <BentoGridItem>Small</BentoGridItem>
        <BentoGridItem>Small</BentoGridItem>
        <BentoGridItem>Small</BentoGridItem>
      </BentoGrid>
    </div>
  )
}

bento-02

Full Width Banner

Feature 1

Feature 3

Feature 1

Full Width Banner

import { BentoGrid, BentoGridItem } from "@/components/ui/bento"

export function BentoExample() {
  return (
    <BentoGrid rowHeight={{ base: "70px", md: "120px", lg: "120px" }}>
      <BentoGridItem colSpan={{ base: 1, md: 3, lg: 5 }}>
        Full Width Banner
      </BentoGridItem>
      <BentoGridItem colSpan={{ base: 1, lg: 2 }}>Feature 1</BentoGridItem>
      <BentoGridItem>Feature 3</BentoGridItem>

      <BentoGridItem colSpan={{ base: 1, lg: 2 }}>Feature 1</BentoGridItem>

      <BentoGridItem colSpan={{ base: 1, md: 3, lg: 5 }}>
        Full Width Banner
      </BentoGridItem>
    </BentoGrid>
  )
}

bento-03

Full Height Banner

Feature 1

Full Height Banner

Feature 1

import { BentoGrid, BentoGridItem } from "@/components/ui/bento"

export function BentoExample() {
  return (
    <BentoGrid rowHeight={{ base: "60px", md: "120px", lg: "120px" }}>
      <BentoGridItem rowSpan={{ base: 1, md: 3, lg: 3 }}>
        Full Height Banner
      </BentoGridItem>
      <BentoGridItem rowSpan={{ base: 1, lg: 2 }}>Feature 1</BentoGridItem>
      <BentoGridItem rowSpan={{ base: 1, lg: 2 }}>Feature 1</BentoGridItem>

      <BentoGridItem rowSpan={{ base: 1, lg: 2 }}>Feature 1</BentoGridItem>

      <BentoGridItem rowSpan={{ base: 1, md: 2, lg: 3 }}>
        Full Height Banner
      </BentoGridItem>
      <BentoGridItem colSpan={{ base: 1, lg: 3 }}>Feature 1</BentoGridItem>
    </BentoGrid>
  )
}

bento-04

Card 1

Card 2

Card 3

Card 4

Card 5

Card 6

Card 7

Card 8

import { BentoGrid, BentoGridItem } from "@/components/ui/bento"

export function BentoExample() {
  return (
    <BentoGrid
      className="border"
      gap={0}
      cols={4}
      rowHeight={{ base: "40px", md: "90px", lg: "180px" }}
    >
      {Array.from({ length: 8 }).map((_, i) => (
        <BentoGridItem colSpan={{ base: 4, md: 2, lg: 1 }} key={i}>
          Card {i + 1}
        </BentoGridItem>
      ))}
    </BentoGrid>
  )
}

bento-05

Hero Card

Stats 1

Stats 2

Wide Card

Small

import { BentoGrid, BentoGridItem } from "@/components/ui/bento"

export function BentoExample() {
  return (
    <BentoGrid
      cols={{ base: 2, md: 3, lg: 4 }}
      rowHeight={{ base: "60px", md: "80px", lg: "120px" }}
    >
      <BentoGridItem colSpan={2} rowSpan={2}>
        Hero Card
      </BentoGridItem>
      <BentoGridItem>Stats 1</BentoGridItem>
      <BentoGridItem>Stats 2</BentoGridItem>

      <BentoGridItem rowSpan={2} colSpan={2}>
        Wide Card
      </BentoGridItem>

      <BentoGridItem>Small</BentoGridItem>
      <BentoGridItem>Small</BentoGridItem>
    </BentoGrid>
  )
}

Installation


pnpm dlx shadcn@latest add https://designali.com/r/bento.json

Usage

import { BentoGrid, BentoGridItem } from "@/components/ui/bento"

<BentoGrid>
  <BentoGridItem>Item 1</BentoGridItem>
  <BentoGridItem>Item 2</BentoGridItem>
  <BentoGridItem>Item 3</BentoGridItem>
</BentoGrid>

Props

Prop	Type	Default
`children`	`ReactNode`	—
`className`	`string`	—
`cols`	`ResponsiveValue<1-8>`	`{ base: 1, md: 3, lg: 5 }`
`gap`	`ResponsiveValue<0-10>`	`{ base: 1, md: 2, lg: 4 }`
`rowHeight`	`ResponsiveValue<string>`	`{ base: "60px", md: "80px", lg: "100px" }`

Changelog Counter Number