🎨
UI Knihovna
Kolekce nádherných, znovupoužitelných React komponent a CSS fragmentů vytvořená pomocí Tailwind CSS a Framer Motion.
Karty
Univerzální kontejnery pro zobrazení obsahu, článků a interaktivních prvků.
Hover Actions
Project Update
The latest release includes new components, performance improvements, and better accessibility features.
CardHover.tsxLanguage: tsx
import { motion } from 'framer-motion';
export function HoverActionsCard() {
return (
<motion.div
whileHover={{ y: -5 }}
className="relative p-6 md:p-8 rounded-2xl border border-border bg-card hover:shadow-xl hover:shadow-accent/5 transition-all duration-300 group overflow-hidden"
>
<div className="w-12 h-12 rounded-full bg-accent/10 flex items-center justify-center mb-6 text-accent">
<svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
<path strokeLinecap="round" strokeLinejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z" />
</svg>
</div>
<h4 className="text-xl font-semibold mb-3">Project Update</h4>
<p className="text-muted leading-relaxed mb-6">
The latest release includes new components, performance improvements, and better accessibility features.
</p>
{/* Hidden Actions (Reveal on Hover) */}
<div className="absolute inset-x-0 bottom-0 p-6 bg-gradient-to-t from-surface via-surface to-transparent translate-y-full opacity-0 group-hover:translate-y-0 group-hover:opacity-100 transition-all duration-300 flex items-center gap-3">
<button className="flex-1 px-4 py-2 bg-accent text-white font-medium rounded-xl hover:bg-accent-hover transition-colors">
View Detail
</button>
<button className="p-2 border border-border rounded-xl hover:bg-black/5 dark:hover:bg-white/5 transition-colors text-muted">
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z" /></svg>
</button>
</div>
</motion.div>
);
}Pricing Table Card
Most Popular
Pro Plan
Perfect for growing businesses and agencies.
$49/mo
- Unlimited Projects
- Custom Domains
- Priority Support
CardPricing.tsxLanguage: tsx
export function PricingCard() {
return (
<div className="relative p-8 rounded-2xl border border-accent bg-card shadow-2xl shadow-accent/5 overflow-hidden flex flex-col items-center text-center">
<div className="absolute top-0 inset-x-0 h-1 bg-gradient-to-r from-accent to-purple-500" />
<span className="inline-flex items-center px-3 py-1 rounded-full bg-accent/10 text-accent text-xs font-bold uppercase tracking-wider mb-4">
Most Popular
</span>
<h4 className="text-2xl font-bold mb-2">Pro Plan</h4>
<p className="text-muted mb-6">Perfect for growing businesses and agencies.</p>
<div className="flex items-baseline gap-1 mb-8">
<span className="text-4xl font-extrabold tracking-tight">$49</span>
<span className="text-muted font-medium">/month</span>
</div>
<ul className="space-y-4 mb-8 text-left w-full">
{['Unlimited Projects', 'Custom Domains', 'Priority Support', 'Advanced Analytics'].map((feature, i) => (
<li key={i} className="flex items-center gap-3">
<svg className="w-5 h-5 text-accent shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
</svg>
<span className="text-foreground font-medium">{feature}</span>
</li>
))}
</ul>
<button className="w-full py-3 rounded-xl bg-accent text-white font-bold hover:bg-accent-hover transition-colors shadow-lg shadow-accent/20">
Get Started
</button>
</div>
);
}Product Display
NEW
Premium Wireless Headphones
Active Noise Cancelling
$299.00
CardProduct.tsxLanguage: tsx
export function ProductCard() {
return (
<div className="group rounded-2xl border border-border bg-card overflow-hidden hover:shadow-xl transition-all duration-300">
<div className="aspect-[4/3] bg-black/5 dark:bg-white/5 relative overflow-hidden">
{/* Placeholder for Product Image */}
<div className="absolute inset-0 flex items-center justify-center text-muted group-hover:scale-105 transition-transform duration-500">
<svg className="w-16 h-16 opacity-20" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
</svg>
</div>
<div className="absolute top-4 right-4 px-2.5 py-1 bg-card/80 backdrop-blur-md rounded-lg text-xs font-bold font-mono border border-border">
NEW
</div>
</div>
<div className="p-6">
<h4 className="text-lg font-bold truncate">Premium Wireless Headphones</h4>
<p className="text-sm text-muted mt-1 mb-4 truncate">Active Noise Cancelling</p>
<div className="flex items-center justify-between">
<span className="text-xl font-extrabold">$299.00</span>
<button className="px-4 py-2 bg-black dark:bg-white text-white dark:text-black font-semibold rounded-xl hover:opacity-80 transition-opacity flex items-center gap-2 text-sm">
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" /></svg>
Add to Cart
</button>
</div>
</div>
</div>
);
}Image Overlay Card
Travel
Discover the hidden gems of the Mediterranean
JD
John Doe • 5 min readCardOverlay.tsxLanguage: tsx
export function ImageOverlayCard() {
return (
<div className="relative isolate group rounded-2xl overflow-hidden aspect-square sm:aspect-video cursor-pointer">
{/* Background Image Placeholder */}
<div className="absolute inset-0 bg-gradient-to-br from-accent to-purple-500 group-hover:scale-105 transition-transform duration-700 -z-20" />
{/* Gradient Overlay */}
<div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/30 to-transparent -z-10" />
<div className="h-full flex flex-col justify-end p-6 md:p-8">
<span className="text-white/80 font-mono text-sm uppercase tracking-widest mb-2 font-semibold">Travel</span>
<h3 className="text-2xl md:text-3xl font-bold text-white mb-2 leading-tight">
Discover the hidden gems of the Mediterranean
</h3>
<div className="flex items-center gap-3 mt-4 opacity-0 -translate-y-4 group-hover:translate-y-0 group-hover:opacity-100 transition-all duration-300">
<div className="w-8 h-8 rounded-full bg-white/20 backdrop-blur-sm flex items-center justify-center text-white">
JD
</div>
<span className="text-sm font-medium text-white/90">John Doe • 5 min read</span>
</div>
</div>
</div>
);
}