Browse components
Chroma Grid
A grid of profile cards drained to grayscale, with a soft spotlight of full color that trails the cursor.
Installation
npx shadcn@latest add @glint-ui/chroma-gridFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/chroma-grid.json
Usage
import { ChromaGrid } from "@/components/ui/chroma-grid";
<ChromaGrid
items={[
{ image: "/ana.jpg", title: "Ana Reyes", subtitle: "Frontend Engineer", handle: "@ana", color: "#3b82f6" },
]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items | ReactNode | — | Array of { image, title, subtitle?, handle?, color?, url? }. |
| radius | number | 280 | Spotlight radius in px. |
| smoothing | number | 0.12 | Follow smoothing (higher = snappier). |
| columns | number | 3 | Grid columns. |
| className | string | — | Extra classes for the root element. |