Card

A versatile container for grouping related information with premium variants and interactive states.

Preview & Interactive Laboratory

Visual Variants

Default Card
Standard shadow & ring.
Basic grouping container.
Glass Variant
Backdrop blur & border.
Premium glassmorphism effect.
Outline Card
Clean bordered style.
Perfect for secondary info.
Ghost Card
No background or shadow.
Subtle interactive areas.

Background & Theme Customization

Indigo Gradient
Custom background utility class.
Perfect for high-impact promotional blocks or call-to-actions.
Teal Gradient
Clean success variation block.
Ideal for success states, transaction reports, or conversion analytics.
Rose Gradient
Bold attention variation.
Excellent for flash sales, active alerts, or urgent telemetry items.

Premium Features

Pro Feature
Advanced Analytics
Real-time data synchronization with AI insights.
Enterprise Security
Military-grade encryption and access control.
  • 24/7 Threat Monitoring
  • Multi-factor Authentication
  • Automated Compliance Audits

Sizes

Small Card
Compact for dashboards.
Default Card
Balanced spacing for standard UI.
Large Card
Generous padding for hero sections.

Usage & Implementation

<Card variant="glass" className="hover:scale-[1.02] transition-transform">
  <CardHeader>
    <CardTitle>Premium Card</CardTitle>
    <CardDescription>Advanced glassmorphism effect.</CardDescription>
  </CardHeader>
  <CardContent>Content goes here.</CardContent>
</Card>
React / Tailwind

Granular Customization

1

Container

The main card wrapper with variant and size support.

className={`variant='glass' size='lg'`}
2

Header

Top section containing title, description, and actions.

className={`CardHeader`}
3

Glassmorphism

Use variant='glass' for high-end blurred background effects.

className={`variant='glass'`}

API Reference (Props)

PropTypeDefaultDescription
variant'default' | 'glass' | 'outline' | 'ghost''default'The visual style of the card.
size'default' | 'sm' | 'lg''default'Padding and spacing scale.