Card

Free + Pro

Container component with both Free and Pro versions. Free offers basic layout, Pro adds 3D effects and animations.

Unlock Advanced Card Features

Get access to powerful pro features that enhance your card component with advanced capabilities, premium styling options, and optimized performance.

Both Free and Pro versions available - Choose based on your needs
Free: Basic card layout with header, content, and footer sections
Pro: 3D hover effects with perspective animations

Pro Features

Unlock advanced capabilities with the Pro version

Premium Variants

Access glass, gradient, neon, and metallic card styles with stunning visual effects

Interactive Effects

3D perspective, spotlight tracking, magnetic hover, and smooth lift animations

Visual Enhancements

Backdrop blur, animated gradients, glow effects, and shadow transitions

Performance Optimized

GPU-accelerated animations with reduced repaints for smooth 60fps interactions

Installation

Install via CLI

# Default installation (asks for version if Pro license detected)
moonui add card

# Explicit version selection
moonui add card --variant=free  # Install free version
moonui add card --variant=pro   # Install pro version (requires license)

# Installation paths:
# - Free version: components/ui/card.tsx
# - Pro version: components/pro/card-pro.tsx

Usage

Basic Usage

Pro Required

Create project

Deploy your new project in one-click.

Choose a framework to get started with your project.

Pro Usage

PRO

Pro Required

Premium Features

Experience enhanced card interactions

Advanced card with glassmorphism effect and smooth hover animations.

Examples

Simple Card

Basic card with minimal content.

Notifications

You have 3 unread messages.

Card with Content

Card with header, content, and footer sections.

Performance

Your app performance metrics

98.5%

Uptime this month

User Profile Card

Card displaying user information with avatar.

John Doe

Software Engineer

Building amazing products with modern web technologies.

Stats Card

Card showing statistics with icons.

Total Revenue

$45,231.89

+20.1%from last month

PRO

Pro Examples

Premium Analytics Dashboard Card

PRO

Advanced glassmorphism card with real-time stats, animated charts, and interactive hover effects.

Pro Required

Premium Analytics

Real-time performance metrics & insights

Total Revenue

$124,592

+22.4%

Active Users

8,429

+15.3%

Weekly Performance

7 Days

MonWedFriSun

Goal Progress87%

$13,408 remaining to monthly goal

3D Interactive Pricing Card

PRO

Advanced 3D tilt effect with parallax layers, animated gradients, and interactive elements.

Pro Required

Pro Enterprise

Everything you need to build at scale

$99/month

$149

Save 33%

500+ Premium Components

AI-Powered Code Generation

Priority Support & Updates

Commercial License

Custom Theming Engine

SSL Secured

10k+ Teams

System Monitoring Card with Live Updates

PRO

Real-time system monitoring with animated progress bars, status indicators, and gradient animations.

Pro Required

System Health Monitor

Real-time infrastructure status

Operational

API Server

99.9%uptime

Database

1.2mslatency

CPU Usage

45%

Memory

68%

Storage

82%

Response Time

124ms

Requests/min

2.4k

Error Rate

0.01%

Advanced Spotlight Card

PRO

Interactive spotlight effect that follows your cursor with dynamic lighting and depth.

Pro Required

Interactive Spotlight

Experience the magic of dynamic lighting

Move your cursor over this card to see the spotlight effect follow your movement, creating an immersive interaction.

Dynamic

Interactive

Elegant