Cards

Cards are versatile containers used to group related information, provide quick insights, and create interactive elements within the Recura dashboard.

Analytics Stats

Indicator Cards

Compact cards for key metrics with trend indicators and icons.

Total Revenue

$128,430

+12.5%

vs last month

Active Users

2,842

-3.2%

vs last month

<StatsCard 
  title="Total Sales" 
  value="$128,430" 
  trend="+12.5%" 
  trendType="up" 
  icon={DollarSign} 
  iconColor="text-purple-600" 
  iconBg="bg-purple-100" 
/>

Modern Overview Cards

Detailed Metrics

Large-format cards with emphasis on numbers and bold icons.

Monthly Recurring Revenue

$45,231

System Churn Rate

12%

// Used in Subscriptions Metrics Overview
<MetricCard
  title="Active MRR"
  value="$45,231"
  icon={BarChart3}
  iconColor="text-emerald-500"
  iconBg="bg-emerald-50"
/>

Interactive Cards

3D Flip Payment Cards

Interactive cards that can be flipped to show sensitive or secondary information.

**** **** **** 4582

Card Holder

ALEX JOHNSON

Expiry Date

12/26

123

CVV

This card is a property of Recura. Use is subject to terms and conditions. Unauthorized use is strictly prohibited.

Credit Card

1240 Active Customers

**** **** **** 9901

Card Holder

RECURA CORP

Expiry Date

05/30

123

CVV

This card is a property of Recura. Use is subject to terms and conditions. Unauthorized use is strictly prohibited.

Bank Transfer

842 Active Customers

<PaymentCard 
  type="credit-card" 
  cardNumber="****4582" 
  cardHolder="ALEX JOHNSON" 
  expiryDate="12/26" 
/>

Team Overview Cards

Team Management Metrics

Compact metrics used in team management views, featuring role-based color coding and member counts.

Total Members

Admins

Managers

Pending Invites

<TeamMetricCard 
  icon={ShieldCheck} 
  label="Admins" 
  value="2" 
  color="bg-blue-400" 
/>

Structural Design

Standard Container

A reusable structured card with flexible header, body, and footer sections.

Cloud Infrastructure

Monitor your server health and deployment status.

StatusOPERATIONAL

<Card>
  <CardHeader>
    <CardTitle>Settings</CardTitle>
  </CardHeader>
  <CardContent>Content here</CardContent>
</Card>