Components
Loading preview...
The ElitePlanCard is a sleek and interactive UI component designed to showcase premium offerings, subscription tiers, or featured products in a visually compelling way. It combines smooth Framer Motion hover animations with a bold, modern card layout to highlight essential details such as an eye-catching image, a concise subtitle, a descriptive overview, and a customizable list of key highlights. With its dark theme, gradient overlays, and a strong call-to-action button, the ElitePlanCard draws attention to top-tier plans or flagship products, making it ideal for pricing sections, promotional showcases, and landing pages that aim to convert visitors into customers.
npx shadcn@latest add https://21st.dev/r/ruixen.ui/elite-plan-card"use client";
import * as React from "react";
import { ElitePlanCard } from "@/components/ui/elite-plan-card";
export default function ProductShowcaseDemo() {
return (
<div className="flex min-h-screen items-center justify-center bg-background p-6">
<ElitePlanCard
imageUrl="https://pub-940ccf6255b54fa799a9b01050e6c227.r2.dev/ruixen_moon.png"
title="Lunar Series"
subtitle="Ruixen Collection"
description="Experience the fusion of art and design with the Lunar Series. Minimalist, bold, and timeless."
onAction={() => alert("Learn more clicked!")}
/>
</div>
);
}