Chroma Grid: Free React + Tailwind Component

A grayscale card grid that regains color locally under a spotlight as the cursor passes over it.

A grid of cards that are grayscale by default; as the cursor moves it lights up the surroundings like a flashlight, letting the cards it passes bloom into full color and fading back to gray once it leaves.

Bring this into your project

Run this command in your project folder. The CLI adds the source and dependencies; then follow the usage example below.

npx webberui@latest add chroma-grid.en

New project or installation trouble? Start here →

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Grid columnscolumns

Spotlight radius (px)radius

260

Card height (px)cardHeight

160

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

Active edited usageDefault props

<ChromaGrid/>

    </div>
  );
}

The complete example includes the preview layout and data. Install the component first, then paste this file into your project.

Installation

npx webberui@latest add https://webberui.com/r/chroma-grid.en.json

Or, once registries are configured in components.json, install it as @webberui/chroma-grid.

Usage

import { ChromaGrid, type ChromaGridItem } from "@/components/ui/chroma-grid";

const items: ChromaGridItem[] = [
  {
    title: "Aurora",
    subtitle: "Product Designer",
    gradient: "linear-gradient(150deg, #22d3ee, #0e7490)",
    glowColor: "#22d3ee",
  },
  // ...
];

<ChromaGrid items={items} columns={3} radius={240} />

Props

ChromaGrid

Prop	Type	Default	Description
`items`	`ChromaGridItem[]`	—	Card data
`columns`	`number`	`3`	Number of grid columns
`radius`	`number`	`260`	Radius of the coloring spotlight (px)
`cardHeight`	`number`	`260`	Height of a single card (px)
`className`	`string`	—	Appended to the outermost container's className

ChromaGridItem

Field	Type	Default	Description
`title`	`string`	—	Main card title
`subtitle`	`string`	—	Secondary descriptive text
`handle`	`string`	—	Small tag in the bottom-right corner
`gradient`	`string`	`linear-gradient(...)`	Gradient backdrop for the card; any valid CSS `background` value
`glowColor`	`string`	`#6366f1`	Color of the border and the glow

Accessibility

When the user has "reduce motion" enabled at the system level, a full-color static grid renders with no cursor tracking and no grayscale
The coloring layer and the spotlight are both aria-hidden and decorative only, and the card text underneath stays readable

Chroma Grid