@tour-kit/adoptionDashboard
Stat Cards
AdoptionStatCard and AdoptionStatsGrid: display aggregate adoption metrics with trend indicators and percentage changes
Overview
Display adoption metrics as stat cards. Use AdoptionStatsGrid for a full overview or AdoptionStatCard for individual metrics.
AdoptionStatsGrid
Displays all key metrics in a responsive grid.
Basic Usage
import { AdoptionStatsGrid } from '@tour-kit/adoption'
<AdoptionStatsGrid />Shows:
- Total features
- Adopted features
- Adoption rate percentage
- Features by status (not started, exploring, adopted, churned)
Props
Prop
Type
Example
<AdoptionStatsGrid className="grid-cols-2 lg:grid-cols-4 gap-4" />AdoptionStatCard
Individual metric card.
Basic Usage
import { AdoptionStatCard } from '@tour-kit/adoption'
<AdoptionStatCard
title="Adoption Rate"
value="78%"
description="Features adopted"
/>Props
Prop
Type
Examples
With Trend
<AdoptionStatCard
title="Adoption Rate"
value="82%"
trend={+5}
trendLabel="vs last month"
/>With Icon
import { TrendingUp } from 'lucide-react'
<AdoptionStatCard
title="Adopted Features"
value="24"
icon={<TrendingUp />}
variant="success"
/>Custom Metrics
import { useAdoptionStats } from '@tour-kit/adoption'
function CustomStats() {
const stats = useAdoptionStats()
const churnRate = (
(stats.byStatus.churned.length / stats.totalCount) * 100
).toFixed(1)
return (
<AdoptionStatCard
title="Churn Rate"
value={`${churnRate}%`}
description="Features with declining usage"
variant="warning"
/>
)
}Next Steps
- AdoptionDashboard - Full dashboard
- useAdoptionStats - Access raw data