Color Filter Image Gallery

Galleries 55

About

Color filter image gallery for React and Tailwind CSS (shadcn/ui): browse photos by color. It is built to make finding things feel like play: photos rest in black and white, and picking a color makes every matching photo bloom into full color, so a visitor thinking of something blue sees it in a second. Choose a swatch and the matching photos open in a circular bloom while the rest fade back; hover a photo and it blooms from where the pointer entered; click a photo to see everything in its color. Set each photo's color yourself or let it be detected from the image. Autoplay steps through the palette until someone picks a color, with keyboard support and a reduced-motion fallback. Use it for shop-by-color product grids, interior and fashion catalogs, portfolios and mood boards.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Color Filter Image Gallery to your project and fits it to your theme.

Code

How Color Filter Image Gallery is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import { ColorFilterGallery } from "@/components/ui/color-filter-gallery";
import type { ColorFilterItem, ColorName } from "@/components/ui/color-filter-gallery";

const settings = {
  autoplay: true,
  interval: 2800,
  bloomDuration: 750,
  columns: 4,
};

const PHOTOS: Array<{ id: string; title: string; color: ColorName }> = [
  { id: "photo-1644088302289-29e0a0c6a36b", title: "Lantern street", color: "red" },
  { id: "photo-1559617519-66f3814bfdb3", title: "Blue alley", color: "blue" },
  { id: "photo-1595756035507-995aad5d5de3", title: "Sunflower field", color: "yellow" },
  { id: "photo-1530092140914-77b08774835e", title: "Flamingo", color: "pink" },
  { id: "photo-1495758874721-e9da827a0581", title: "Fern", color: "green" },
  { id: "photo-1623867452962-d2a44d65dd79", title: "Red parasol", color: "red" },
  { id: "photo-1595562161314-4ed3f3503826", title: "Lavender", color: "purple" },
  { id: "photo-1518614768202-663a3a0ecf59", title: "Vintage cab", color: "yellow" },
  { id: "photo-1558286598-73a6be5c16b0", title: "Blue door", color: "blue" },
  { id: "photo-1522383225653-ed111181a951", title: "Cherry blossom", color: "pink" },
  { id: "photo-1610047629542-464f7210209a", title: "Dune by the sea", color: "orange" },
  { id: "photo-1480996408299-fc0e830b5db1", title: "Rice terraces", color: "green" },
];

const ITEMS: ColorFilterItem[] = PHOTOS.map(({ id, title, color }) => ({
  src: `https://images.unsplash.com/${id}?w=640&h=512&fit=crop&q=80&auto=format`,
  alt: title,
  title,
  color,
}));

const CCGATHER_URL = "https://ccgather.com/?utm_source=21st&utm_medium=component&utm_campaign=color_filter_gallery";

export default function Demo(props: Partial<typeof settings> & { autoDetect?: boolean }) {
  const { autoDetect, ...overrides } = props;
  const s = { ...settings, ...overrides };
  const items = autoDetect ? ITEMS.map(({ color: _color, ...rest }) => rest) : ITEMS;
  return (
    <div className="flex min-h-screen w-full flex-col items-center justify-center gap-5 bg-background p-6 text-foreground">
      <ColorFilterGallery
        items={items}
        autoplay={s.autoplay}
        interval={s.interval}
        bloomDuration={s.bloomDuration}
        columns={s.columns}
        className="max-w-3xl"
      />
      <p className="text-xs text-muted-foreground">
        Pick a color and the photos that carry it bloom out of black and white. Click a photo to see more in its color.{" "}
        <a href={CCGATHER_URL} target="_blank" rel="noreferrer" className="underline underline-offset-4 transition-colors hover:text-foreground">
          By the CCgather team
        </a>
      </p>
    </div>
  );
}