Dashboard Components

LaunchKit provides a comprehensive set of dashboard components for building feature-rich user interfaces.

Dashboard Components (`/components/dashboard`)

ChartAreaInteractive.tsx

Interactive area chart for analytics data.

Features:

Responsive design
Multiple data series
Zoom and pan functionality
Tooltip data display
Export capabilities

Usage:

import ChartAreaInteractive from '@/components/dashboard/ChartAreaInteractive';

<ChartAreaInteractive
  data={revenueData}
  xKey="date"
  yKey="revenue"
  title="Monthly Revenue"
  color="#3b82f6"
/>

DashboardProducts.tsx & DashboardProductsServer.tsx

Product management interface for users.

Features:

Product listing
Purchase status
Download links
GitHub access management

DashboardWelcome.tsx

Welcome section for new users.

Features:

Onboarding steps
Progress tracking
Quick actions
Personalized messaging

DataTable.tsx

Reusable data table with sorting and filtering.

Features:

Column sorting
Row selection
Pagination
Search functionality
Export options

Usage:

import DataTable from '@/components/dashboard/DataTable';

<DataTable
  data={users}
  columns={userColumns}
  searchPlaceholder="Search users..."
  onRowClick={(user) => navigateToUser(user.id)}
/>

GithubUsernameModal.tsx

Modal for collecting GitHub username for repository access.

Features:

Username validation
GitHub API integration
Error handling
Success confirmation

IntroDashboard.tsx

Dashboard introduction and onboarding guide.

Features:

Step-by-step walkthrough
Interactive tooltips
Progress persistence
Skip functionality

NextBreadcrumb.tsx

Navigation breadcrumbs for complex pages.

Features:

Automatic route-based generation
Custom breadcrumb overrides
Click navigation
Responsive design

ProductDetailClient.tsx

Detailed product view with purchase options.

Features:

Product information display
Feature comparison
Purchase integration
User access status

PurchasedProducts Components

Set of components for managing purchased products:

PurchasedProducts.tsx: Main container PurchasedProductsClient.tsx: Client-side functionality PurchasedProductsServer.tsx: Server-side data fetching

Features:

Purchase history
Download access
GitHub repository invitations
Support ticket creation

SectionCards.tsx

Dashboard overview cards with metrics.

Features:

Key metric display
Trend indicators
Click-through actions
Responsive grid layout

SupportForm.tsx

Customer support ticket creation form.

Features:

File attachment support
Category selection
Priority levels
Auto-save drafts

Dashboard Components