Peel Card
Card front retracts on hover revealing vibrant content underneath.
Component Showcase
Peel Card
Card front retracts on hover revealing vibrant content underneath.
GSAPTransform
Choose Installation Method
Select how you want to add this component to your project
Run command in your project root
$ npx @melonui-dev/cli add peel-card
How to import and use
app/page.tsx
import { RindPeelCard } from "@/components/peel-card";
export default function Page() {
return (
<main className="flex min-h-screen items-center justify-center bg-[#050505] p-8">
<RindPeelCard />
</main>
);
}AI Automation Agent Prompt
Feed this prompt to Claude, ChatGPT, or Gemini to quickly write custom integrations, layouts, or configure props for this component on your system.
I want to integrate the MelonUI "Peel Card" component into my React/Next.js project.
Component description: "Card front retracts on hover revealing vibrant content underneath."
CLI Installation command: `npx @melonui-dev/cli add peel-card`
Tags/Technologies used: GSAP, Transform
Please write a premium, responsive React page component in Next.js that:
1. Imports `RindPeelCard` from `@/components/peel-card`.
2. Places it inside a visually stunning layout matching a dark-mode, glassmorphism design system.
3. Outlines its props and options with clean code structure and comments.