Focus Grid Content

Galleries

About

A responsive image grid where clicking an item expands it and reveals its description while dimming the rest.

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

Code

How Focus Grid Content is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import Content05, { type Content05Props } from "@/components/ui/content-05";

export const values = {
  title: "Our process",
  description: "From idea to launch—click each phase to see how we work.",
  dimUnfocused: false,
  descriptionOnFocus: true,
  items: [
    {
      image:
        "https://cdn.21st.dev/assets/mirror/c5/c5b25f1bcdcb1cd78e38fa45773876052356e1066ca19c62dc308e715ba6e525.jpg",
      title: "Discovery",
      description:
        "We start by understanding your goals, your users, and the constraints you face.",
      defaultFocus: true,
    },
    {
      image:
        "https://cdn.21st.dev/assets/mirror/66/66ddb7b55e717cbf16599a304081adeb5d28f047463ef4834eaeae889a9abac0.jpg",
      title: "Design",
      description:
        "Clean interfaces and clear flows that people love to use every day.",
    },
    {
      image:
        "https://cdn.21st.dev/assets/mirror/ee/ee99ba8a8d613120b8e4bcc37492965884bbcea01849508ec73c2d84f5f9da4a.jpg",
      title: "Build",
      description:
        "Solid, accessible code that scales with your product and your team.",
    },
    {
      image:
        "https://cdn.21st.dev/assets/mirror/43/439b8336941b93434200147fd06ec23f5f096ba878de28dbeb5d5d96f1caed59.jpg",
      title: "Test",
      description:
        "We validate everything with real users before launch, so nothing is left to chance.",
    },
    {
      image:
        "https://cdn.21st.dev/assets/mirror/a3/a312baee36bae88b9f7700efd09f8899789c59b6ab98c59b5dd0347ce9606ae0.jpg",
      title: "Launch",
      description:
        "Go live with confidence, with support and iteration when you need it.",
    },
  ],
} satisfies Content05Props;

export default function Content05Example() {
  return (
    <Content05
      title={values.title}
      description={values.description}
      dimUnfocused={values.dimUnfocused}
      descriptionOnFocus={values.descriptionOnFocus}
      items={values.items}
    />
  );
}