chroma-grid

Cards 15

About

Here is chroma-grid hover card component

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds chroma-grid to your project and fits it to your theme.

Code

How chroma-grid is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import React from 'react';
import InteractiveChromaGrid, { ChromaGridItemType } from '@/components/ui/chroma-grid';

const demoItems: ChromaGridItemType[] = [
  {
    image: 'https://cdn.21st.dev/assets/mirror/c5/c530b6be73e46a897fb39caaee8e3e2145eb0e995d10373ecfdc33297a0acf15.jpg',
    title: 'Sarah Johnson',
    subtitle: 'Frontend Developer',
    handle: '@sarahj',
    borderColor: '#3B82F6',
    gradient: 'linear-gradient(145deg, #3B82F6, #081933)',
    url: 'https://github.com',
  },
  {
    image: 'https://cdn.21st.dev/assets/mirror/11/11551b572461102fbb43d783bd56229df0ce98fcd272c71c7650fb0639d01f0c.jpg',
    title: 'Mike Chen',
    subtitle: 'Backend Engineer',
    handle: '@mikechen',
    borderColor: '#10B981',
    gradient: 'linear-gradient(180deg, #10B981, #032d20)',
    url: 'https://github.com',
  },
  {
    image: 'https://cdn.21st.dev/assets/mirror/0c/0c6d7cbc439b57d59e4c6d3971d88e5aa81b249263e322e5237dfe4beb1420b7.jpg',
    title: 'Morgan Blake',
    subtitle: 'UI/UX Designer',
    handle: '@morganb',
    borderColor: '#F59E0B',
    gradient: 'linear-gradient(165deg, #F59E0B, #332101)',
    url: 'https://github.com',
  },
  {
    image: 'https://cdn.21st.dev/assets/mirror/2b/2b259cec3e01d5e6822828037bd785d234673e2fe2084562a0257fc61d65ec4a.jpg',
    title: 'Casey Park',
    subtitle: 'Data Scientist',
    handle: '@caseypark',
    borderColor: '#EF4444',
    gradient: 'linear-gradient(195deg, #EF4444, #390d0d)',
    url: 'https://github.com',
  },
  {
    image: 'https://cdn.21st.dev/assets/mirror/68/68e8a115e405a92153a0e9e077b464ab1a1fc644d914690ca007f597df955dca.jpg',
    title: 'Sam Kim',
    subtitle: 'Mobile Developer',
    handle: '@thesamkim',
    borderColor: '#8B5CF6',
    gradient: 'linear-gradient(225deg, #8B5CF6, #1d1238)',
    url: 'https://github.com',
  },
  {
    image: 'https://cdn.21st.dev/assets/mirror/43/4341c48155c5f5db8e89382d4ba975ec0475647da2b0fc68de786a32eb611ab6.jpg',
    title: 'Tyler Rodriguez',
    subtitle: 'Cloud Architect',
    handle: '@tylerrod',
    borderColor: '#06B6D4',
    gradient: 'linear-gradient(135deg, #06B6D4, #012a30)',
    url: 'https://github.com',
  },
];

function InteractiveChromaGridDemo() {
  return (
    <main className="flex min-h-screen w-full items-center justify-center bg-black p-4 md:p-8">
      <div className="h-[80vh] w-full max-w-7xl">
        <InteractiveChromaGrid 
          items={demoItems} 
          radius={400}
          damping={0.4}
          fadeOut={0.7}
        />
      </div>
    </main>
  );
}

export default InteractiveChromaGridDemo;