Components
Loading preview...
The Floating FeatureHighlightCard is a modern, animated UI component crafted with Framer Motion, TypeScript, and Tailwind CSS to deliver an engaging visual experience. Its standout element—a smoothly floating image—adds a sense of motion and liveliness, perfect for showcasing products, gifts, or key features. Designed with ultra-rounded corners, a soft glow background, and subtle fade-and-rise transitions, this card feels both premium and playful. It’s fully responsive, theming-friendly with Shadcn UI, and optimized for reusability across landing pages, marketing sections, or dashboard highlights. The floating motion speed and amplitude are easily customizable, making it adaptable for any design aesthetic.
npx shadcn@latest add https://21st.dev/r/ruixen.ui/feature-highlight-pro-card'use client'
import { Gift, Sparkles } from 'lucide-react'
import { FeatureHighlightProCard } from '@/components/ui/feature-highlight-pro-card'
export default function FeatureCardDemo() {
return (
<main className="min-h-screen flex flex-col items-center justify-center p-8 space-y-12">
<FeatureHighlightProCard
imageSrc="https://pub-940ccf6255b54fa799a9b01050e6c227.r2.dev/gift-4.png"
title="Gifts that Make Moments Shine"
description="Surprise your loved ones with perfectly curated gift boxes, crafted to bring smiles and unforgettable memories. Personalize every detail and let your gesture speak louder than words."
buttonText="Explore Gifts"
onButtonClick={() => alert('Redirecting to gifts...')}
/>
</main>
)
}