Bento Grid

Pro

Asymmetric bento-style feature grid with spotlight hover effect on each card.

Pro component — requires an active license. Get access →

Fast

Zero runtime deps

Typed

Full TypeScript

Open source

You own the code. MIT licensed.

Installation

Add your token to .env

Get a token from your dashboard, then add it to .env:

bash

PARTICLEUI_TOKEN=your-token-here

Add the registry to components.json

Wire up the authenticated registry so the CLI can resolve Pro components:

bash

"registries": {
  "@particleui": {
    "url": "https://particleui.dev/r/react/{name}.json",
    "headers": { "Authorization": "Bearer ${PARTICLEUI_TOKEN}" }
  }
}

Run the CLI

bash

npx particleui-cli add bento-grid

Usage

TSX

import { BentoGrid } from "@/components/blocks/bento-grid"

export default function Page() {
  return <BentoGrid />
}

Props

Prop	Type	Default	Required
items	BentoItem[]	—	yes
className	string	—	no

Details

Source filecomponents/blocks/bento-grid.tsx

Typeblock

Categoriesblocks, layouts

npm dependenciesclsx, tailwind-merge

Registry deps—

Claude skillBundled — installs to ~/.claude/skills/