Gallery 6

Cards 557

About

A full-width, off-screen gallery with the carousel component.

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

Code

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

Usage.tsx

import { Gallery6 } from "@/components/blocks/gallery6"

const demoData = {
  heading: "Featured Projects",
  demoUrl: "https://www.shadcnblocks.com",
  items: [
    {
      id: "item-1",
      title: "Build Modern UIs",
      summary:
        "Create stunning user interfaces with our comprehensive design system.",
      url: "#",
      image: "https://cdn.21st.dev/assets/mirror/e2/e276687cf540bc1b76306090f5cb5c8da7e75540aa3699c82434199e4c022aac.svg",
    },
    {
      id: "item-2",
      title: "Design System Components",
      summary:
        "Explore our library of customizable components built with shadcn/ui and Tailwind CSS.",
      url: "#",
      image: "https://cdn.21st.dev/assets/mirror/e2/e276687cf540bc1b76306090f5cb5c8da7e75540aa3699c82434199e4c022aac.svg",
    },
    {
      id: "item-3",
      title: "Responsive Layouts",
      summary:
        "Build websites that look great on any device with our responsive design patterns.",
      url: "#",
      image: "https://cdn.21st.dev/assets/mirror/e2/e276687cf540bc1b76306090f5cb5c8da7e75540aa3699c82434199e4c022aac.svg",
    },
    {
      id: "item-4",
      title: "Developer Experience",
      summary:
        "Streamline your workflow with our developer-friendly tools and documentation.",
      url: "#",
      image: "https://cdn.21st.dev/assets/mirror/e2/e276687cf540bc1b76306090f5cb5c8da7e75540aa3699c82434199e4c022aac.svg",
    },
    {
      id: "item-5",
      title: "Performance First",
      summary:
        "Create fast, optimized websites using our performance-focused components.",
      url: "#",
      image: "https://cdn.21st.dev/assets/mirror/e2/e276687cf540bc1b76306090f5cb5c8da7e75540aa3699c82434199e4c022aac.svg",
    },
  ],
};

function Gallery6Demo() {
  return <Gallery6 {...demoData} />;
}

export { Gallery6Demo };