{feature.name}

{feature.description}

{usage.useCount} / {criteria.minUses} uses

) }} /> ``` ## Styling ### Variant Styling Use built-in size and position variants: ```tsx ``` ### Custom Classes Extend default styling: ```tsx ``` ### CSS Variables Customize via CSS variables: ```css .adoption-nudge { --nudge-bg: hsl(0 0% 100%); --nudge-border: hsl(0 0% 90%); --nudge-text: hsl(0 0% 10%); --nudge-radius: 0.5rem; } ``` ### Using asChild Compose with your own elements: ```tsx import { Card } from '@/components/ui/card' {/* Default nudge content rendered inside Card */} ``` ## Behavior ### Automatic Scheduling The component respects nudge configuration: ```tsx ``` Total delay = `nudge.initialDelay` + `AdoptionNudge.delay` ### Priority Ordering Shows highest-priority feature first: ```tsx const features = [ { id: 'basic', name: 'Basic', trigger: '#basic', priority: 1 }, { id: 'important', name: 'Important', trigger: '#important', priority: 10 }, { id: 'critical', name: 'Critical', trigger: '#critical', priority: 100 }, ] // will show "Critical" first ``` ### Dismissal When dismissed: 1. Nudge disappears 2. Feature marked as permanently dismissed 3. Won't appear in future sessions 4. Analytics event fired (if configured) ### Click Behavior When "Try it" is clicked: 1. Feature usage is tracked 2. Nudge is dismissed 3. `onClick` handler runs (if in custom render) 4. Analytics events fired ## Accessibility The default nudge includes: - Semantic HTML (`div` with proper heading hierarchy) - Focus management (buttons are keyboard accessible) - Clear dismiss action - No motion if `prefers-reduced-motion` is set ### Screen Reader Support Add ARIA attributes in custom renders: ```tsx (

{feature.name}

{feature.description}

)} /> ``` ## TypeScript Fully typed render props: ```tsx import { AdoptionNudge, type NudgeRenderProps, type Feature } from '@tour-kit/adoption' { const { feature, onClick, onDismiss, onSnooze } = props // All typed correctly feature.name // string feature.description // string | undefined onClick() // () => void onSnooze(3600000) // (durationMs: number) => void return

...

}} /> ``` ## Performance The component efficiently manages state: - Only re-renders when nudge state changes - Automatically cleans up timers - Memoized callbacks prevent unnecessary re-renders For optimal performance, define render functions outside the component: ```tsx const renderNudge = ({ feature, onClick, onDismiss }: NudgeRenderProps) => (

{feature.name}

) function App() { return } ``` ## Common Patterns ### Multiple Nudge Instances Show different nudges in different locations: ```tsx function App() { return (

) } ``` ### Conditional Display Only show nudges in certain contexts: ```tsx function ConditionalNudge() { const { user } = useAuth() // Don't nudge trial users if (user.plan === 'trial') return null // Don't nudge during onboarding if (!user.onboardingComplete) return null return } ``` ### Persistent Nudges Keep nudge visible until explicitly dismissed: ```tsx (

Don't forget to try {feature.name}!

)} /> ``` ## Best Practices 1. **Position strategically** - Don't block critical UI: ```tsx // Good: Bottom corner, out of the way // Bad: Could block important content

``` 2. **Provide context** in feature descriptions: ```tsx const features = [ { id: 'shortcuts', name: 'Keyboard Shortcuts', description: 'Work faster with keyboard shortcuts', // Explains value trigger: '#shortcuts', }, ] ``` 3. **Test delays** with real usage patterns 4. **Make dismissal obvious** - always provide a clear close button 5. **Respect user decisions** - dismissed means dismissed ## Next Steps - [useNudge Hook](/docs/adoption/hooks/use-nudge) - Manual nudge control - [FeatureButton Component](/docs/adoption/components/feature-button) - Button with tracking - [Analytics Integration](/docs/adoption/analytics) - Track nudge interactions --- # Conditional Components > IfNotAdopted and IfAdopted components: conditionally render content based on whether a user has adopted a specific feature ## Overview `IfNotAdopted` and `IfAdopted` are conditional rendering components that show/hide content based on whether a feature has been adopted. ## Basic Usage ### IfNotAdopted Show content only if feature is not yet adopted: ```tsx import { IfNotAdopted } from '@tour-kit/adoption' function FeatureToggle() { return ( ) } ``` ### IfAdopted Show content only if feature is adopted: ```tsx import { IfAdopted } from '@tour-kit/adoption' function FeatureToggle() { return ( ) } ``` ## Props Both components share the same props: ## Examples ### Show/Hide Badges ```tsx

``` ### With Fallback Content ```tsx Mastered!} > Try this! ``` ### Conditional Help Text ```tsx

Advanced Search

Use filters and operators to find exactly what you need. Try it now to unlock powerful search capabilities!

You're a search pro! Check out keyboard shortcuts for even faster searches.

``` ### Conditional UI Elements ```tsx function Toolbar() { return (

) } ``` ### Promotional Messaging ```tsx

Export to PDF

Save your work as a beautifully formatted PDF

``` ### Progress Indicators ```tsx import { useFeature } from '@tour-kit/adoption' function FeatureCard({ featureId }: { featureId: string }) { const { feature, usage } = useFeature(featureId) if (!feature) return null return (

{feature.name}

{usage.useCount} / {feature.adoptionCriteria?.minUses || 3} uses

Feature adopted! Used {usage.useCount} times

) } ``` ### Contextual Nudges ```tsx

Click here to try this powerful feature!

``` ### Multi-Feature Conditions ```tsx function Dashboard() { return (

{/* Show onboarding if NO features adopted */} {/* Show congrats if key features adopted */}

) } ``` ### Animation on State Change ```tsx function AnimatedBadge({ featureId }: { featureId: string }) { return (

New ✓

) } ``` ## Comparison with useFeature These components are syntactic sugar for the `useFeature` hook: ```tsx // Using IfNotAdopted New // Equivalent with useFeature function FeatureBadge() { const { isAdopted } = useFeature('feature') if (isAdopted) return null return New } ``` **Use conditional components when:** - You only need to show/hide content - The logic is simple (adopted vs. not adopted) - You want cleaner JSX **Use `useFeature` when:** - You need additional data (useCount, status, etc.) - You need the `trackUsage` function - You have complex conditional logic ## Performance Both components are lightweight wrappers around `useFeature`: ```tsx // ✓ Efficient: Only re-renders when adoption status changes // ✓ Also efficient: Multiple instances share the same context

... ...

``` ## TypeScript Both components are fully typed: ```tsx import { IfNotAdopted, IfAdopted } from '@tour-kit/adoption'

This is typed correctly

Fallback is typed

} >

Children is typed

``` ## Accessibility These components render fragments and don't affect accessibility: ```tsx // The button remains accessible ``` Ensure content changes are announced to screen readers: ```tsx

Try this feature!

You've adopted this feature!

``` ## Common Patterns ### Feature Discovery Flow ```tsx function FeatureFlow({ featureId }: { featureId: string }) { return (

Discover this feature

You've mastered this!

) } ``` ### Gamification ```tsx

Power User Unlocked!

``` ### Contextual Help ```tsx This feature helps you do X. Click to try it! ``` ## Best Practices 1. **Use semantic HTML** inside conditional components: ```tsx // Good New // Bad (creates unnecessary wrapper)

New

``` 2. **Provide fallback for important UI**: ```tsx }> ``` 3. **Avoid deep nesting**: ```tsx // Good: Use useAdoptionStats for complex conditions const { byStatus } = useAdoptionStats() if (byStatus.adopted.length === 0) { return } // Bad: Too deeply nested ``` ## Next Steps - [useFeature Hook](/docs/adoption/hooks/use-feature) - More adoption state control - [NewFeatureBadge](/docs/adoption/components/new-feature-badge) - Pre-built badge component - [FeatureButton](/docs/adoption/components/feature-button) - Button with tracking --- # FeatureButton > FeatureButton component: button wrapper that automatically records usage events for the tracked feature on each click ## Overview `FeatureButton` is a button wrapper that automatically tracks feature usage when clicked. It optionally shows a "new" indicator for unadopted features. ## Basic Usage ```tsx import { FeatureButton } from '@tour-kit/adoption' function Toolbar() { return ( exportData()}> Export ) } ``` Every click automatically tracks usage - no manual `trackUsage()` calls needed. ## Props Extends all standard ` ``` ### Icon Button ```tsx import { Download } from 'lucide-react' ``` ### Loading State ```tsx function ExportButton() { const [loading, setLoading] = useState(false) const handleExport = async () => { setLoading(true) try { await exportData() } finally { setLoading(false) } } return ( {loading ? 'Exporting...' : 'Export'} ) } ``` ### With Tooltip ```tsx import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip' Ctrl+K Keyboard Shortcuts ``` ## New Indicator The indicator appears as a small red dot when the feature is not adopted: ```tsx // Shows red dot if not adopted Try New Feature // Hide indicator Try New Feature ``` The indicator automatically disappears once the feature is adopted. ## Click Handling The button tracks usage before calling your `onClick`: ```tsx { // Usage already tracked at this point console.log('Button clicked') }} > View Analytics ``` Tracking happens even if `onClick` is not provided: ```tsx Submit Form ``` ## Accessibility The component: - Renders a semantic ` ) } ``` ## Props Extends all standard `` props. ## Examples ### Default Badge ```tsx // Renders: New ``` ### Custom Text ```tsx ``` ### Different Variants ```tsx ``` ### Different Sizes ```tsx ``` ### In Navigation ```tsx function NavBar() { return ( ) } ``` ### In Dropdown Menu ```tsx import { DropdownMenu, DropdownMenuItem, } from '@/components/ui/dropdown-menu' Export to PDF Advanced Filters ``` ### In Feature Cards ```tsx function FeatureCard({ featureId, title, description }) { return (

{title}

{description}

) } ``` ### With Icons ```tsx import { Sparkles } from 'lucide-react' {/* NewFeatureBadge renders text only. Compose an icon beside it: */} ``` ### Animated Badge ```tsx ``` ### Positioned Badge ```tsx

``` ## Styling ### Custom Classes ```tsx ``` ### CSS Variables Customize badge appearance: ```css .new-feature-badge { --badge-bg: hsl(142 76% 36%); --badge-text: hsl(0 0% 100%); --badge-radius: 0.25rem; --badge-padding: 0.125rem 0.5rem; } ``` ### Variant Styling The badge uses class-variance-authority (cva) for variants: ```tsx // Default: Green background // Secondary: Gray background // Outline: Transparent with border // Destructive: Red background ``` ## Behavior The badge automatically: 1. Renders when feature is not adopted 2. Returns `null` when feature is adopted 3. Re-renders when adoption status changes ```tsx // Initially shows badge // After user adopts the feature // → Badge disappears automatically ``` ## Accessibility The badge renders a semantic ``: ```tsx ``` For screen readers, consider adding context: ```tsx ``` ## TypeScript Fully typed: ```tsx import { NewFeatureBadge, type NewFeatureBadgeProps } from '@tour-kit/adoption' const badgeProps: NewFeatureBadgeProps = { featureId: 'my-feature', text: 'New', variant: 'default', size: 'md', className: 'custom-class', } ``` ## Comparison with Conditional Components ```tsx // Using NewFeatureBadge (simpler for badges) // Using IfNotAdopted (more flexible) New ``` **Use NewFeatureBadge when:** - You want a simple badge with minimal code - You want consistent badge styling - You don't need custom badge content **Use IfNotAdopted when:** - You need fully custom content - You want to show complex UI - You need a fallback ## Performance The badge efficiently re-renders only when adoption status changes: ```tsx // ✓ Efficient: Only updates when "export" is adopted // ✓ Also efficient: Multiple badges don't cause extra re-renders

``` ## Common Patterns ### Category Badges ```tsx const CATEGORY_BADGES = { ai: { text: 'AI', variant: 'default' as const }, premium: { text: 'Pro', variant: 'secondary' as const }, beta: { text: 'Beta', variant: 'outline' as const }, } function FeatureItem({ featureId, category }) { const badge = CATEGORY_BADGES[category] return (

Feature Name {badge && ( )}

) } ``` ### Pulsing Badge ```tsx ``` ### Count-Based Badge ```tsx import { useFeature } from '@tour-kit/adoption' function SmartBadge({ featureId }: { featureId: string }) { const { usage, feature } = useFeature(featureId) const remaining = (feature?.adoptionCriteria?.minUses || 3) - usage.useCount return ( ) } ``` ## Best Practices 1. **Use consistent text** across your app: ```tsx // Good: Consistent // Bad: Inconsistent ``` 2. **Don't overuse badges** - they lose impact: ```tsx // Good: Strategic use // Bad: Too many badges ``` 3. **Consider badge placement**: ```tsx // Good: Badge after text // Also good: Badge as superscript ``` ## Next Steps - [IfNotAdopted Component](/docs/adoption/components/conditional) - More flexible conditional rendering - [FeatureButton](/docs/adoption/components/feature-button) - Button with built-in tracking - [useFeature Hook](/docs/adoption/hooks/use-feature) - Access adoption state programmatically --- # Dashboard Components > Pre-built admin dashboard components for visualizing feature adoption metrics, trends, and per-feature engagement rates ## Overview The @tour-kit/adoption package includes pre-built dashboard components for admin interfaces. These components integrate with `useAdoptionStats` to visualize feature adoption data. ## Available Components | Component | Description | |-----------|-------------| | `AdoptionDashboard` | Full-featured dashboard with all components | | `AdoptionStatsGrid` | Grid of stat cards showing key metrics | | `AdoptionStatCard` | Individual metric card | | `AdoptionTable` | Sortable table of features and their status | | `AdoptionCategoryChart` | Bar chart showing adoption by category | | `AdoptionStatusBadge` | Status indicator badge | | `AdoptionFilters` | Filter controls for the dashboard | ## Quick Start ### Full Dashboard ```tsx import { AdoptionDashboard } from '@tour-kit/adoption' export default function AdminPage() { return (

Feature Adoption Dashboard

) } ``` ### Custom Dashboard Compose individual components: ```tsx import { AdoptionStatsGrid, AdoptionCategoryChart, AdoptionTable, } from '@tour-kit/adoption' export default function CustomDashboard() { return (

) } ``` ## Component Overview ### AdoptionStatsGrid Shows overview metrics in a grid: ```tsx ``` Displays: - Total features - Adopted features - Adoption rate - Features by status (not started, exploring, adopted, churned) ### AdoptionStatCard Individual stat card: ```tsx ``` ### AdoptionTable Sortable table of all features: ```tsx ``` Columns: - Feature name - Category (optional) - Status with badge - Use count - Last used date - Priority (optional) ### AdoptionCategoryChart Bar chart showing adoption by category: ```tsx ``` ### AdoptionStatusBadge Status indicator badge: ```tsx ``` ### AdoptionFilters Filter controls: ```tsx const [filters, setFilters] = useState({ status: 'all', category: 'all', search: '', }) ``` ## Styling All components follow shadcn/ui conventions: ```tsx // Custom classes // Size variants // Color variants ``` ## Data Integration Components automatically use `useAdoptionStats()`: ```tsx // No props needed - uses context // Or provide custom data import { useAdoptionStats } from '@tour-kit/adoption' function CustomView() { const stats = useAdoptionStats() // Filter or transform data const premiumStats = { ...stats, features: stats.features.filter(f => f.premium), } return } ``` ## Examples ### Admin Dashboard Page ```tsx import { AdoptionDashboard, AdoptionFilters } from '@tour-kit/adoption' export default function AdminDashboard() { const [filters, setFilters] = useState({ status: 'all', category: 'all', search: '', }) return (

Feature Adoption

) } ``` ### Metrics Overview ```tsx import { AdoptionStatsGrid, AdoptionCategoryChart } from '@tour-kit/adoption' export function MetricsPage() { return (

Overview

By Category

) } ``` ### Export Dashboard Data ```tsx import { useAdoptionStats } from '@tour-kit/adoption' import { AdoptionDashboard } from '@tour-kit/adoption' export function ExportableDashboard() { const stats = useAdoptionStats() const exportCSV = () => { const csv = [ ['Feature', 'Category', 'Status', 'Uses', 'Last Used'], ...stats.features.map(f => [ f.name, f.category || '-', f.usage.status, f.usage.useCount, f.usage.lastUsed || 'Never', ]), ].map(row => row.join(',')).join('\n') // Download CSV const blob = new Blob([csv], { type: 'text/csv' }) const url = URL.createObjectURL(blob) const a = document.createElement('a') a.href = url a.download = 'adoption-metrics.csv' a.click() } return (

) } ``` ## Accessibility All dashboard components include: - Semantic HTML (`table`, `figure`, `dl`, etc.) - ARIA labels for screen readers - Keyboard navigation support - Focus indicators ```tsx ``` ## TypeScript Fully typed props: ```tsx import type { AdoptionDashboardProps, AdoptionStatCardProps, AdoptionTableProps, AdoptionFiltersState, } from '@tour-kit/adoption' const dashboardProps: AdoptionDashboardProps = { className: 'my-dashboard', showFilters: true, } const filterState: AdoptionFiltersState = { status: 'all', category: 'all', search: '', } ``` ## Best Practices 1. **Use the full dashboard** for admin pages: ```tsx ``` 2. **Compose individual components** for custom layouts: ```tsx

``` 3. **Add filtering** for large feature sets: ```tsx ``` 4. **Export data** for reporting: ```tsx const stats = useAdoptionStats() // Export stats.features as CSV/JSON ``` ## Next Steps

AdoptionDashboard

Full dashboard component

Stat Cards

Individual metric displays

AdoptionTable

Sortable feature table

Charts

Category visualizations

--- # AdoptionDashboard > AdoptionDashboard component: complete admin view combining stats grid, category chart, and feature table in one layout ## Overview `AdoptionDashboard` is a complete, drop-in dashboard component that displays all adoption metrics. It combines stats grid, charts, tables, and filters into a single component. ## Basic Usage ```tsx import { AdoptionDashboard } from '@tour-kit/adoption' export default function AdminPage() { return (

Feature Adoption

) } ``` ## Props ## Examples ### Minimal Dashboard ```tsx ``` ### Stats Only ```tsx ``` ### With Custom Wrapper ```tsx

``` ## Next Steps - [AdoptionStatsGrid](/docs/adoption/dashboard/stats) - Metrics grid - [AdoptionTable](/docs/adoption/dashboard/table) - Feature table - [AdoptionCategoryChart](/docs/adoption/dashboard/charts) - Charts --- # Charts > AdoptionCategoryChart and AdoptionStatusBadge: visualize adoption distribution by category and individual feature status ## AdoptionCategoryChart Bar chart showing adoption rate by feature category. ### Basic Usage ```tsx import { AdoptionCategoryChart } from '@tour-kit/adoption' ``` ### Props ### Examples #### Horizontal Chart ```tsx ``` #### Highlight Category ```tsx ``` #### Without Percentages ```tsx ``` ## AdoptionStatusBadge Status indicator badge for adoption states. ### Basic Usage ```tsx import { AdoptionStatusBadge } from '@tour-kit/adoption' ``` ### Props ### Examples #### All Statuses ```tsx

``` #### Different Sizes ```tsx ``` #### Without Icon ```tsx ``` ### Status Colors - **not_started**: Gray - **exploring**: Blue - **adopted**: Green - **churned**: Red ## Next Steps - [AdoptionTable](/docs/adoption/dashboard/table) - Feature table - [useAdoptionStats](/docs/adoption/hooks/use-adoption-stats) - Access chart data --- # Adoption Funnel > Step-by-step adoption funnel with drop-off percentages — Pendo/Userpilot parity, native CSS, no chart peer dependency. `` renders a vertical funnel chart with retention and drop-off between adjacent steps. It is **data-first**: hand it pre-computed `steps` and it works without any provider. Inside an ``, pair it with `useFunnelData({ featureIds })` for a one-line in-provider integration. ## Provider-less Usage (Recommended) Compute funnel data from your analytics layer and pass it in directly: ```tsx import { AdoptionFunnel } from '@tour-kit/adoption' import '@tour-kit/adoption/styles/funnel.css' const steps = [ { id: 'view', label: 'Viewed', entered: 1000, completed: 720 }, { id: 'click', label: 'Clicked CTA', entered: 720, completed: 380 }, { id: 'signup', label: 'Signed Up', entered: 380, completed: 240 }, ] console.log('drilldown:', step, index)} /> ``` This path needs no provider, so the funnel can live in any tree — admin dashboards, server-rendered reports, etc. ## In-provider Usage with `useFunnelData` ```tsx import { AdoptionFunnel, AdoptionProvider, useFunnelData, } from '@tour-kit/adoption' function OnboardingFunnel() { const steps = useFunnelData({ featureIds: ['view-pricing', 'start-trial', 'invite-team'], labels: { 'view-pricing': 'Viewed Pricing', 'start-trial': 'Started Trial', 'invite-team': 'Invited Team', }, }) return } ``` ## `` Props void', description: 'Click/keyboard activation handler. Steps become focusable (role="button", tabIndex=0) when provided; Enter and Space both fire the callback.', }, emptyState: { type: 'React.ReactNode', description: 'Replaces the default "No funnel data yet." message when `steps` is empty.', }, ariaLabel: { type: 'string', description: 'Overrides the auto-generated summary on the `role="img"` chart element.', }, className: { type: 'string', description: 'Extra class merged onto the root.', }, }} /> ## `FunnelStep` Shape ## `useFunnelData` Input/Output >', description: 'Override the visible label per feature ID. Falls back to `feature.name` then the raw id.', }, }} /> Returns `FunnelStep[]` ready to pass to ``. The source data is in-memory and synchronous, so the hook returns the steps directly — no `loading`/`error` envelope. ## Accessibility - The chart is exposed to assistive tech as a single `role="img"` element with an auto-generated `aria-label` summarizing the funnel (`Adoption funnel: 100 → 60 → 30, 30% end-to-end retention`). Override via the `ariaLabel` prop. - Each bar carries `aria-hidden="true"` — screen readers receive the same numbers through a visually-hidden `` mirror placed alongside the visual list. - Clickable steps are keyboard-activatable. **Enter** and **Space** both fire `onStepClick`; tab order matches visual order. - Honors `prefers-reduced-motion: reduce` — the hover-transition is disabled under the OS preference. See the [reduced-motion guide](/docs/guides/reduced-motion). ## Styling Import the base stylesheet once at your app root: ```ts import '@tour-kit/adoption/styles/funnel.css' ``` CSS custom properties for theming: ```css :root { --tour-funnel-gap: 0.5rem; --tour-funnel-step-gap: 0.5rem; --tour-funnel-bar-bg: hsl(220 90% 56%); --tour-funnel-bar-fg: #fff; --tour-funnel-retention-fg: hsl(0 0% 40%); --tour-funnel-step-hover: rgba(0, 0, 0, 0.04); --tour-funnel-focus-ring: hsl(220 90% 56%); } ``` ## Next Steps - [AdoptionDashboard](/docs/adoption/dashboard/adoption-dashboard) — full dashboard component - [useAdoptionStats](/docs/adoption/hooks/use-adoption-stats) — underlying per-feature stats hook - [useFunnelData](/docs/adoption/hooks/use-funnel-data) — in-provider hook used in the second example above - [Reduced-motion guide](/docs/guides/reduced-motion) — cross-package motion contract --- # 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 ```tsx import { AdoptionStatsGrid } from '@tour-kit/adoption' ``` Shows: - Total features - Adopted features - Adoption rate percentage - Features by status (not started, exploring, adopted, churned) ### Props ### Example ```tsx ``` ## AdoptionStatCard Individual metric card. ### Basic Usage ```tsx import { AdoptionStatCard } from '@tour-kit/adoption' ``` ### Props ### Examples #### With Trend ```tsx ``` #### With Icon ```tsx import { TrendingUp } from 'lucide-react' } variant="success" /> ``` #### Custom Metrics ```tsx import { useAdoptionStats } from '@tour-kit/adoption' function CustomStats() { const stats = useAdoptionStats() const churnRate = ( (stats.byStatus.churned.length / stats.totalCount) * 100 ).toFixed(1) return ( ) } ``` ## Next Steps - [AdoptionDashboard](/docs/adoption/dashboard/adoption-dashboard) - Full dashboard - [useAdoptionStats](/docs/adoption/hooks/use-adoption-stats) - Access raw data --- # AdoptionTable > AdoptionTable component: sortable, filterable table of tracked features showing adoption status, usage count, and trends ## Overview `AdoptionTable` displays all features in a sortable table with status badges, use counts, and timestamps. ## Basic Usage ```tsx import { AdoptionTable } from '@tour-kit/adoption' ``` ## Props void', description: 'Row click handler', }, className: { type: 'string', description: 'Additional CSS classes', }, }} /> ## Examples ### Sorted Table ```tsx ``` ### With Row Click ```tsx { console.log('Clicked:', feature.name) // Navigate to feature details, etc. }} /> ``` ### Show All Columns ```tsx ``` ### Filtered Features ```tsx import { useAdoptionStats } from '@tour-kit/adoption' function ChurnedFeaturesTable() { const { byStatus } = useAdoptionStats() return (

Churned Features

) } ``` ## Table Columns Default columns: - **Name**: Feature name - **Status**: Adoption status badge - **Uses**: Total use count - **Last Used**: Relative time (e.g., "2 days ago") Optional columns: - **Category**: Feature category (if `showCategory={true}`) - **Priority**: Numeric priority (if `showPriority={true}`) ## Accessibility The table includes: - Semantic `

` element - `

Provider Setup

useFeature Hook

Nudge Components

Admin Dashboard

{feature.name}

{feature.name}

{feature.name}

{feature.name}

{feature.name}

{feature.name}

{feature.name}

{feature.name}

{feature.name}

Advanced Search

Export to PDF

{feature.name}

Discover this feature

You've mastered this!

{title}

Feature Adoption Dashboard

Feature Adoption

Overview

By Category

AdoptionDashboard

Stat Cards

AdoptionTable

Charts

Feature Adoption

Churned Features

Feature Adoption

Adoption by Category

{category}

{title}

Most Used Features

Least Used Features

Recently Used Features

Premium Features

{tier} Priority

Adoption Overview

Adoption Rate

{feature.name}

{feature.name}

Features to Try ({pendingNudges.length})

{feature.name}

Upcoming Nudges

Try {feature.name}

Dashboard

Dashboard

Welcome to our product

Features

Exports

Your dashboard is ready

{step.title}

{step.title}