import * as React from "react"; import { TabNavDashboardOne } from "@/registry/tab-nav-dashboard-one/tab-nav-dashboard-one"; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/components/ui/card"; import { import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; BarChart3Icon, UsersIcon, DollarSignIcon, ActivityIcon, } from "lucide-react"; type ComponentProps = React.ComponentPropsWithoutRef; type TabItem = ComponentProps["tabs"][number]; const DEMO_TABS: TabItem[] = [ { id: "arr", label: "ARR", status: "live", kpi: { label: "Total", value: "$2.4M", delta: { value: "+12%", trend: "up", }, }, content: (

Monthly Growth

+$245K

+8.2% from last month

New Customers

+24

15 expansions, 9 new logos

Churn Rate

2.1%

-0.3% from last quarter

), }, { id: "active-users", label: "Active Users", status: "live", kpi: { label: "Total", value: "12.4K", delta: { value: "+8.5%", trend: "up", }, }, content: (

Daily Active Users Users who logged in today

3,245

Peak: 4,120 at 2:00 PM EST

Weekly Active Users Users active in the last 7 days

8,932

72% of total user base

), }, { id: "conversion", label: "Conversion", status: "live", kpi: { label: "Rate", value: "4.2%", delta: { value: "-0.3%", trend: "down", }, }, content: ( Conversion Funnel Visitor to paid customer journey

Website Visitors 45,230

Trial Signups 5,432

Paid Customers 1,901

), }, { id: "billing", label: "Billing", status: "live", kpi: { label: "MRR", value: "$198K", delta: { value: "+15%", trend: "up", }, }, content: (

Total Revenue

$198,432

Monthly recurring revenue

Invoices Paid

342

98.5% on-time payment rate

Outstanding

$12.4K

5 invoices pending payment

), }, { id: "support", label: "Support", status: "paused", kpi: { label: "Tickets", value: "23", delta: { value: "-5", trend: "up", }, }, content: ( Support Metrics Current support queue status

Open Tickets 23

Avg Response Time 2.4h

Customer Satisfaction 4.8/5

), }, ]; export function TabNavDashboardOneDemo() { const [selectedTab, setSelectedTab] = React.useState(DEMO_TABS[0].id); const [timeRange, setTimeRange] = React.useState("7d"); return (

Dashboard KPI Tabs

Navigate between KPI cohorts with inline metrics and delta indicators. Time range filtering adapts the data view without page reload.

); } export default TabNavDashboardOneDemo;

Simple