@tour-kit/adoptionDashboard
Charts
AdoptionCategoryChart and AdoptionStatusBadge: visualize adoption distribution by category and individual feature status
AdoptionCategoryChart
Bar chart showing adoption rate by feature category.
Basic Usage
import { AdoptionCategoryChart } from '@tour-kit/adoption'
<AdoptionCategoryChart />Props
Prop
Type
Examples
Horizontal Chart
<AdoptionCategoryChart orientation="horizontal" />Highlight Category
<AdoptionCategoryChart highlightCategory="productivity" />Without Percentages
<AdoptionCategoryChart showPercentages={false} />AdoptionStatusBadge
Status indicator badge for adoption states.
Basic Usage
import { AdoptionStatusBadge } from '@tour-kit/adoption'
<AdoptionStatusBadge status="adopted" />
<AdoptionStatusBadge status="exploring" />
<AdoptionStatusBadge status="churned" />
<AdoptionStatusBadge status="not_started" />Props
Prop
Type
Examples
All Statuses
<div className="flex gap-2">
<AdoptionStatusBadge status="not_started" />
<AdoptionStatusBadge status="exploring" />
<AdoptionStatusBadge status="adopted" />
<AdoptionStatusBadge status="churned" />
</div>Different Sizes
<AdoptionStatusBadge status="adopted" size="sm" />
<AdoptionStatusBadge status="adopted" size="md" />
<AdoptionStatusBadge status="adopted" size="lg" />Without Icon
<AdoptionStatusBadge status="adopted" showIcon={false} />Status Colors
- not_started: Gray
- exploring: Blue
- adopted: Green
- churned: Red
Next Steps
- AdoptionTable - Feature table
- useAdoptionStats - Access chart data