Dashboard Shell

Dashboards 1

About

A complete application dashboard layout with a collapsible sidebar that becomes a drawer on narrow containers, a search header, KPI cards with sparklines, a revenue chart with a table view toggle, a channel breakdown, and a sortable, filterable orders table.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Dashboard Shell to your project and fits it to your theme.

Code

How Dashboard Shell is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import AppDashboardShell, {
  sampleDashboardSeries,
  type DashboardOrder,
} from "@/components/ui/app-dashboard-shell";

const orders: DashboardOrder[] = [
  {
    id: "HL-48213",
    customer: "Maren Okafor",
    email: "[email protected]",
    status: "paid",
    channel: "Direct",
    date: "2026-10-08",
    amount: 24_800, // minor units
  },
  {
    id: "HL-48212",
    customer: "Tomás Reyes",
    email: "[email protected]",
    status: "pending",
    channel: "Partner",
    date: "2026-10-08",
    amount: 112_000,
  },
  {
    id: "HL-48211",
    customer: "Ines Halvorsen",
    email: "[email protected]",
    status: "paid",
    channel: "Organic",
    date: "2026-10-07",
    amount: 8_900,
  },
];

export default function Dashboard() {
  return (
    <div className="h-screen w-full">
      <AppDashboardShell
        workspace={{ name: "Halcyon", plan: "Scale plan" }}
        user={{ name: "Rhea Castillo", email: "[email protected]" }}
        orders={orders}
        getSeries={sampleDashboardSeries}
        onNavigate={(id) => console.log("navigate", id)}
        onRangeChange={(range) => console.log("range", range)}
      />
    </div>
  );
}