UltraQualityShowcaseGrid

Features 53

About

A never-before-seen, high-impact React feature showcase grid built with Tailwind CSS and Framer Motion. It delivers a mosaic layout with one large hero card and multiple supporting cards, each with interactive 3D-tilt hover effects, animated badges, and responsive parallax backgrounds.

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

Code

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

Usage.tsx

"use client";
import React from "react";
import {
  UltraQualityShowcaseGrid,
  ShowcaseCard,
} from "@/components/ui/ultra-quality-showcase-grid";

const sampleCards: ShowcaseCard[] = [
  {
    id: "big",
    imageUrl:
      "https://cdn.21st.dev/assets/localized/3f126172ef8c78e2f875da08374cdb85dc8c0e095eed4332652f3e015a4172c8.jpg",
    badge: { text: "NEW", colorClass: "bg-emerald-500/20 text-emerald-600" },
    subtitle: "Unlimited pipeline",
    title: "Launch experiments, not guesses",
    description:
      "Submit unlimited test ideas and creative requests. We prioritize by impact, ship fast, and report clearly so learnings stack every week.",
    ctaPrimary: { label: "See case studies", href: "#" },
    ctaSecondary: { label: "Start a request", href: "#" },
  },
  {
    id: "requests",
    imageUrl:
      "https://cdn.21st.dev/assets/localized/8ca09c281ecd0f6cc2083e178e48a886b4d088d43373a8d686e2decc41fbe35b.jpg",
    title: "Requests & revisions",
    description:
      "Iterate quickly with async requests and structured feedback. Every round ends with clear rationale and next steps.",
  },
  {
    id: "pricing",
    imageUrl:
      "https://cdn.21st.dev/assets/localized/ac47d8e274478d4036fad4df48fcc1ea6c495fac0924b057860fa410dbcafbf2.jpg",
    title: "Worry-free pricing",
    description:
      "Simple plans, no surprises. Pause anytime. Scale up when you’re ready.",
  },
  {
    id: "turnaround",
    imageUrl:
      "https://cdn.21st.dev/assets/localized/30b1fab35baddcc6cb68173cf714041f576bf0e882bb31a5464fb54d825528d2.jpg",
    badge: { text: "NEW", colorClass: "bg-emerald-500/20 text-emerald-600" },
    title: "Quick turnaround",
    description: "Most tasks ship in 48–72 hours without sacrificing quality.",
  },
  {
    id: "live",
    imageUrl:
      "https://cdn.21st.dev/assets/localized/c49d148062e40d0bbb0b7ea88fb9e5fca4362a755732a25a763746b8dcd3ecdc.jpg",
    title: "Go live in days",
    description:
      "From first brief to live campaigns in a week, with tracking and QA handled.",
  },
];

export default function Default() {
  return <UltraQualityShowcaseGrid cards={sampleCards} />;
}