Dashboard Overview

Required components

Run following command in your terminal to install the required components for this blocks

npx hextaui@latest add button card input select dropdown-menu badge progress switch modal

Dashboard Overview

Monitor your key metrics and recent activities

Total Revenue

$45,231.89

20.1%

vs last month

Active Users

2,350

12.5%

vs last month

Orders

1,234

4.3%

vs last month

Page Views

89,432

8.7%

vs last month

Recent Activity

Latest updates and events from your system

3 items

New order received

High Value

Order #12345 from Enterprise Corp - $25,000

2 minutes ago•John Doe

Payment processed

Stripe payment of $1,234.56 completed successfully

5 minutes ago•Jane Smith

User registration

Premium

New premium user: alice@company.com

10 minutes ago•Alice Wilson

Quick Actions

Key Metrics

Sales Target

75%

5.2%

75 / 100

User Growth

60%

12.3%

60 / 100

Server Usage

85%

-2.1%

85 / 100

Customer Satisfaction

92%

3.5%

92 / 100

Auto-refresh metrics

File structure for the dashboard block:

DashboardBlock.tsx

DashboardExample.tsx

DashboardHeader.tsx

defaultData.ts

FooterActions.tsx

index.ts

ProgressMetricsSection.tsx

QuickActionsSection.tsx

RecentActivitySection.tsx

SettingsModal.tsx

StatsGrid.tsx

types.ts

Dashboard/DashboardHeader.tsx

Dashboard/defaultData.tsx

Dashboard/FooterActions.tsx

Dashboard/ProgressMetricsSection.tsx

Dashboard/QuickActionsSection.tsx

Dashboard/RecentActivitySection.tsx

Dashboard/SettingsModal.tsx

Dashboard/StatsGrid.tsx

Dashboard/types.ts

Dashboard/index.ts

Usage: