Dashboard Example

Complete dashboard example demonstrating Fragment UI blocks and components. This example shows how to build a production-ready dashboard with KPI cards, navigation, and widgets.

Live Example

Code Example

import { DashboardLayout, KPIDashboard, NavigationHeader } from "@fragment_ui/blocks";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@fragment_ui/ui";

export default function Dashboard() {
  return (
    <DashboardLayout
      header={
        <NavigationHeader
          logoText="Dashboard"
          links={[
            { label: "Overview", href: "/" },
            { label: "Analytics", href: "/analytics" },
            { label: "Settings", href: "/settings" },
          ]}
        />
      }
    >
      <div className="space-y-6 p-6">
        <KPIDashboard
          metrics={[
            { id: "users", title: "Total Users", value: "12,345", trend: "up", trendValue: "+12%" },
            { id: "revenue", title: "Revenue", value: "$45,678", trend: "up", trendValue: "+8%" },
            { id: "orders", title: "Orders", value: "1,234", trend: "up", trendValue: "+5%" },
            { id: "conversion", title: "Conversion", value: "3.2%", trend: "up", trendValue: "+0.5%" },
          ]}
        />
        
        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
          <Card>
            <CardHeader>
              <CardTitle>Recent Activity</CardTitle>
              <CardDescription>Latest user activities</CardDescription>
            </CardHeader>
            <CardContent>
              {/* Your content here */}
            </CardContent>
          </Card>
        </div>
      </div>
    </DashboardLayout>
  );
}