Component Library

Component Showcase

Pre-built React components for affiliate dashboards. Copy, paste, customize.

@workspace/elements

Static demo data

These components are shown with mock data. Visit the live demo to see real data in action.

Full Dashboard

Complete AffiliateDashboard component

<AffiliateDashboard />

Affiliate Dashboard

Track your referrals and earnings

15.00%commission

Demo Partner Program

Code: DEMO2024

Active

Affiliate URL

https://yourapp.com/?ref=DEMO2024

Total Clicks

1,247

Signups

89

Conversion Rate

7.1%

Paid Referrals

67

Earnings Summary

Total Earned

$2,847.50

Pending

$52.50

Available

$112.50

Recent Referrals

john.doe@example.com

12/1/2024

$45.00
Paid

jane.smith@example.com

12/5/2024

$67.50
Paid

alex.wilson@example.com

12/20/2024

$52.50
Converted

sarah.johnson@example.com

12/28/2024

Pending

mike.brown@example.com

12/30/2024

Pending

Individual Components

<AffiliateStatsCard />4 variants
12.5%

Total Clicks

1,247

8.2%

Signups

89

Total Earned

$2,847.50

Conversion Rate

7.1%

<CommissionBadge />2 types, 3 sizes
15.00%commission
20.00%commission
25.00%commission
$50.00per referral
$100.00per referral
<AffiliateLinkCard />active & expired states

Demo Partner Program

Code: DEMO2024

Active

Affiliate URL

https://yourapp.com/?ref=DEMO2024

Expired Campaign

Code: EXPIRED01

Expired

Affiliate URL

https://yourapp.com/?ref=EXPIRED01

Expired: 1/1/2024

<EarningsSummary />3 metrics

Earnings Summary

Total Earned

$2,847.50

Pending

$52.50

Available

$112.50

<ReferralList />with status badges

Recent Referrals

john.doe@example.com

12/1/2024

$45.00
Paid

jane.smith@example.com

12/5/2024

$67.50
Paid

alex.wilson@example.com

12/20/2024

$52.50
Converted

sarah.johnson@example.com

12/28/2024

Pending

mike.brown@example.com

12/30/2024

Pending
<ReferralList /> emptyempty state

No referrals yet. Share your link to get started!

Quick Start

Import and use in your Next.js app

page.tsx
import { AffiliateDashboard } from "@workspace/elements"

export default function MyAffiliatePage() {
  return (
    <AffiliateDashboard
      affiliateLink={affiliateData}
      referrals={referrals}
      baseUrl="https://yourapp.com"
      pendingEarnings={100}
      availableForPayout={500}
    />
  )
}