{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dashboard-02",
  "title": "Dashboard 02",
  "description": "Sales analytics dashboard with revenue KPI cards, interactive bar charts, and a recent orders table. Use it as a starting point for admin panels, analytics views, or any SaaS backend interface.",
  "dependencies": [
    "lucide-react",
    "recharts"
  ],
  "registryDependencies": [
    "button",
    "input",
    "card",
    "chart",
    "dropdown-menu",
    "avatar",
    "sidebar"
  ],
  "files": [
    {
      "path": "src/registry/blocks/dashboard-02/dashboard.tsx",
      "content": "\"use client\";\n\nimport {\n  LayoutDashboard,\n  FolderKanban,\n  CheckSquare,\n  Map,\n  Users,\n  Bell,\n  Database,\n  Cable,\n  FileText,\n  ShieldCheck,\n  UserCog,\n  Lock,\n  CreditCard,\n  Download,\n  Upload,\n  BarChart3,\n  FileBarChart,\n  MessageSquare,\n} from \"lucide-react\";\nimport {\n  Sidebar,\n  KpiCard,\n  VisitorTrendChart,\n  EngagementHeatmap,\n  PaymentHistoryTable,\n  type Team,\n  type User,\n  type NavSection,\n} from \"./components\";\nimport { DEFAULT_KPI_METRICS } from \"./data\";\n\nimport { SidebarProvider } from \"@/components/ui/sidebar\";\nimport { LogoIcon } from \"../social-icons/icons\";\n\n// =============================================================================\n// DATA\n// =============================================================================\n\nconst teams: Team[] = [\n  {\n    name: \"ShadcnShip\",\n    plan: \"Pro\",\n    logo: <LogoIcon className=\"size-5 invert dark:invert-0\" />,\n  },\n];\n\nconst user: User = {\n  name: \"Shadcn\",\n  email: \"shadcn@ship.com\",\n  avatar: \"https://www.shadcnship.com/images/avatars/avatar-1.webp\",\n};\n\nconst navigation: NavSection[] = [\n  {\n    title: \"Workspace\",\n    items: [\n      {\n        icon: <LayoutDashboard className=\"size-4\" />,\n        label: \"Overview\",\n        active: true,\n      },\n      { icon: <FolderKanban className=\"size-4\" />, label: \"Projects\" },\n      { icon: <CheckSquare className=\"size-4\" />, label: \"Tasks\" },\n      { icon: <Map className=\"size-4\" />, label: \"Roadmap\" },\n      { icon: <Users className=\"size-4\" />, label: \"Audience\" },\n      { icon: <Bell className=\"size-4\" />, label: \"Notifications\" },\n      { icon: <Database className=\"size-4\" />, label: \"Database\" },\n      { icon: <Cable className=\"size-4\" />, label: \"Connections\" },\n      { icon: <FileText className=\"size-4\" />, label: \"Documentation\" },\n    ],\n  },\n  {\n    title: \"Ventures\",\n    items: [\n      { icon: <ShieldCheck className=\"size-4\" />, label: \"Authentication\" },\n      { icon: <UserCog className=\"size-4\" />, label: \"User Management\" },\n      { icon: <Lock className=\"size-4\" />, label: \"Security\" },\n      { icon: <CreditCard className=\"size-4\" />, label: \"Payments\" },\n      { icon: <Download className=\"size-4\" />, label: \"Import Data\" },\n      { icon: <Upload className=\"size-4\" />, label: \"Export Data\" },\n    ],\n  },\n  {\n    title: \"Insights\",\n    items: [\n      { icon: <BarChart3 className=\"size-4\" />, label: \"Analytics\" },\n      { icon: <FileBarChart className=\"size-4\" />, label: \"Reports\" },\n      { icon: <MessageSquare className=\"size-4\" />, label: \"User Feedback\" },\n    ],\n  },\n];\n\n// =============================================================================\n// MAIN COMPONENT\n// =============================================================================\n\nexport default function Dashboard() {\n  return (\n    <div className=\"flex h-screen bg-background w-full\">\n      <SidebarProvider>\n        {/* Sidebar */}\n        <Sidebar teams={teams} user={user} navigation={navigation} />\n\n        {/* Main Content */}\n        <main className=\"flex-1 overflow-y-auto bg-background\">\n          {/* Header */}\n          <header className=\"px-6 py-4\">\n            <h1 className=\"text-xl font-semibold\">Good morning, Shadcn</h1>\n            <div className=\"flex gap-4 mt-3\">\n              {[\"General\", \"Members\", \"Notifications\"].map((tab, i) => (\n                <button\n                  key={tab}\n                  className={`text-sm pb-2 border-b-2 transition-colors ${\n                    i === 0\n                      ? \"border-foreground text-foreground font-medium\"\n                      : \"border-transparent text-muted-foreground hover:text-foreground\"\n                  }`}\n                >\n                  {tab}\n                </button>\n              ))}\n            </div>\n          </header>\n\n          {/* Content */}\n          <div className=\"px-6 pb-6 space-y-4\">\n            {/* KPI Row */}\n            <div className=\"grid gap-4 md:grid-cols-2 lg:grid-cols-4\">\n              {DEFAULT_KPI_METRICS.map((metric) => (\n                <KpiCard key={metric.title} {...metric} />\n              ))}\n            </div>\n\n            {/* Charts Row */}\n            <div className=\"grid gap-4 lg:grid-cols-3\">\n              <div className=\"lg:col-span-2\">\n                <VisitorTrendChart />\n              </div>\n              <EngagementHeatmap />\n            </div>\n\n            {/* Payment History */}\n            <PaymentHistoryTable />\n          </div>\n        </main>\n      </SidebarProvider>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/dashboard-02/dashboard.tsx"
    },
    {
      "path": "src/registry/blocks/dashboard-02/components/index.ts",
      "content": "export { UserMenuTrigger, type User } from \"./nav-user\";\nexport { TeamSwitcher, type Team } from \"./team-switcher\";\nexport { Sidebar, type NavItem, type NavSection } from \"./sidebar\";\nexport { KpiCard } from \"./stat-cards\";\nexport { PaymentHistoryTable } from \"./projects-table\";\nexport { VisitorTrendChart } from \"./weekly-chart\";\nexport { EngagementHeatmap } from \"./activity-grid\";\n\n// Data types — import these to type your own data\nexport type {\n  VisitorDataPoint,\n  PaymentRecord,\n  KpiMetric,\n} from \"../data\";\n",
      "type": "registry:component",
      "target": "components/dashboard-02/components/index.ts"
    },
    {
      "path": "src/registry/blocks/dashboard-02/components/sidebar.tsx",
      "content": "\"use client\";\n\nimport type { ReactNode } from \"react\";\nimport { UserMenuTrigger, type User } from \"./nav-user\";\nimport { TeamSwitcher, type Team } from \"./team-switcher\";\nimport {\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/components/ui/sidebar\";\n\nexport interface NavItem {\n  icon: ReactNode;\n  label: string;\n  active?: boolean;\n}\n\nexport interface NavSection {\n  title?: string;\n  items: NavItem[];\n}\n\ninterface SidebarProps {\n  teams: Team[];\n  user: User;\n  navigation: NavSection[];\n}\n\nexport function Sidebar({ teams, user, navigation }: SidebarProps) {\n  return (\n    <aside className=\"flex w-64 flex-col border-r bg-card\">\n      <div className=\"px-2 py-2\">\n        <TeamSwitcher teams={teams} />\n      </div>\n\n      <SidebarContent className=\"[&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]\">\n        {navigation.map((section) => (\n          <SidebarGroup key={section.title}>\n            <SidebarGroupLabel>{section.title}</SidebarGroupLabel>\n            <SidebarGroupContent>\n              <SidebarMenu>\n                {section.items.map((item) => (\n                  <SidebarMenuItem key={item.label}>\n                    <SidebarMenuButton\n                      tooltip={item.label}\n                      isActive={item.active}\n                      className=\"text-muted-foreground\"\n                    >\n                      {item.icon}\n                      <span>{item.label}</span>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        ))}\n      </SidebarContent>\n\n      <SidebarFooter>\n        <UserMenuTrigger user={user} />\n      </SidebarFooter>\n    </aside>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/dashboard-02/components/sidebar.tsx"
    },
    {
      "path": "src/registry/blocks/dashboard-02/components/nav-user.tsx",
      "content": "\"use client\";\n\nimport {\n  ChevronsUpDown,\n  BadgeCheck,\n  Bell,\n  CreditCard,\n  LogOut,\n  Sparkles,\n} from \"lucide-react\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\";\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\";\n\nexport interface User {\n  name: string;\n  email: string;\n  avatar: string;\n}\n\ninterface NavUserProps {\n  user: User;\n}\n\nfunction getInitials(name: string): string {\n  return name\n    .split(\" \")\n    .map((n) => n[0])\n    .join(\"\")\n    .toUpperCase()\n    .slice(0, 2);\n}\n\nfunction UserAvatar({ user, className }: { user: User; className?: string }) {\n  return (\n    <Avatar className={className}>\n      <AvatarImage src={user.avatar} alt={user.name} />\n      <AvatarFallback className=\"rounded-lg\">\n        {getInitials(user.name)}\n      </AvatarFallback>\n    </Avatar>\n  );\n}\n\nfunction UserIdentity({ user }: { user: User }) {\n  return (\n    <>\n      <UserAvatar user={user} className=\"size-8 rounded-lg\" />\n      <div className=\"flex-1 min-w-0\">\n        <p className=\"truncate text-sm font-medium\">{user.name}</p>\n        <p className=\"truncate text-xs text-muted-foreground\">{user.email}</p>\n      </div>\n    </>\n  );\n}\n\nexport function UserMenuTrigger({ user }: NavUserProps) {\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <button className=\"flex w-full items-center gap-3 rounded-lg p-3 text-left hover:bg-accent/50 transition-colors\">\n          <UserIdentity user={user} />\n          <ChevronsUpDown className=\"size-4 text-muted-foreground\" />\n        </button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent\n        className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n        side=\"right\"\n        align=\"end\"\n        sideOffset={4}\n      >\n        <DropdownMenuLabel className=\"p-0 font-normal\">\n          <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n            <UserIdentity user={user} />\n          </div>\n        </DropdownMenuLabel>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuItem>\n            <Sparkles className=\"mr-2 size-4\" />\n            Upgrade to Pro\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuItem>\n            <BadgeCheck className=\"mr-2 size-4\" />\n            Account\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <CreditCard className=\"mr-2 size-4\" />\n            Billing\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <Bell className=\"mr-2 size-4\" />\n            Notifications\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuItem>\n          <LogOut className=\"mr-2 size-4\" />\n          Log out\n        </DropdownMenuItem>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/dashboard-02/components/nav-user.tsx"
    },
    {
      "path": "src/registry/blocks/dashboard-02/components/team-switcher.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { ChevronsUpDown, Plus } from \"lucide-react\";\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\";\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/components/ui/sidebar\";\n\nexport interface Team {\n  name: string;\n  logo: React.ReactNode;\n  plan: string;\n}\n\nexport function TeamSwitcher({ teams }: { teams: Team[] }) {\n  const { isMobile } = useSidebar();\n  const [activeTeam, setActiveTeam] = React.useState(teams[0]);\n\n  if (!activeTeam) {\n    return null;\n  }\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <div className=\"bg-primary text-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                {activeTeam.logo}\n              </div>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-medium\">{activeTeam.name}</span>\n                <span className=\"truncate text-xs\">{activeTeam.plan}</span>\n              </div>\n              <ChevronsUpDown className=\"ml-auto\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg\"\n            align=\"start\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"text-muted-foreground text-xs\">\n              Teams\n            </DropdownMenuLabel>\n            {teams.map((team, index) => (\n              <DropdownMenuItem\n                key={team.name}\n                onClick={() => setActiveTeam(team)}\n                className=\"gap-2 p-2\"\n              >\n                <div className=\"flex size-6 items-center justify-center rounded-md border\">\n                  <div className=\"size-3.5 shrink-0\">{team.logo}</div>\n                </div>\n                {team.name}\n                <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>\n              </DropdownMenuItem>\n            ))}\n            <DropdownMenuSeparator />\n            <DropdownMenuItem className=\"gap-2 p-2\">\n              <div className=\"flex size-6 items-center justify-center rounded-md border bg-transparent\">\n                <Plus className=\"size-4\" />\n              </div>\n              <div className=\"text-muted-foreground font-medium\">Add team</div>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/dashboard-02/components/team-switcher.tsx"
    },
    {
      "path": "src/registry/blocks/dashboard-02/components/stat-cards.tsx",
      "content": "\"use client\";\n\nimport { Badge } from \"@/components/ui/badge\";\nimport { Card } from \"@/components/ui/card\";\nimport { TrendingUp, TrendingDown } from \"lucide-react\";\n\ninterface StatCardProps {\n  title: string;\n  value: string;\n  change: string;\n  positive: boolean;\n  label: string;\n  description: string;\n}\n\nexport function KpiCard({\n  title,\n  value,\n  change,\n  positive,\n  label,\n  description,\n}: StatCardProps) {\n  return (\n    <Card className=\"p-4 shadow-none bg-card gap-1\">\n      <div className=\"flex items-center justify-between mb-1\">\n        <span className=\"text-sm text-muted-foreground\">{title}</span>\n        <Badge\n          variant=\"outline\"\n          className=\"text-xs flex items-center gap-0.5\"\n        >\n          {change}\n          {positive ? (\n            <TrendingUp className=\"size-3\" />\n          ) : (\n            <TrendingDown className=\"size-3\" />\n          )}\n        </Badge>\n      </div>\n      <p className=\"text-3xl font-bold mb-1\">{value}</p>\n      <p className=\"text-sm text-foreground\">\n        {label} <span className=\"text-primary\">{positive ? \"↗\" : \"↘\"}</span>\n      </p>\n      <p className=\"text-xs text-muted-foreground mt-0.5\">{description}</p>\n    </Card>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/dashboard-02/components/stat-cards.tsx"
    },
    {
      "path": "src/registry/blocks/dashboard-02/components/analytics-chart.tsx",
      "content": "\"use client\";\n\nimport { Card } from \"@/components/ui/card\";\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/components/ui/chart\";\nimport { Bar, BarChart, CartesianGrid, XAxis, YAxis } from \"recharts\";\n\nconst chartData = [\n  { month: \"Aug\", billed: 28, unpaid: 8 },\n  { month: \"Sep\", billed: 32, unpaid: 12 },\n  { month: \"Oct\", billed: 38, unpaid: 10 },\n  { month: \"Nov\", billed: 42, unpaid: 14 },\n  { month: \"Dec\", billed: 48, unpaid: 10 },\n  { month: \"Jan\", billed: 52, unpaid: 8 },\n];\n\nconst chartConfig = {\n  billed: {\n    label: \"Billed amount\",\n    color: \"hsl(var(--foreground))\",\n  },\n  unpaid: {\n    label: \"Unpaid amount\",\n    color: \"hsl(var(--muted-foreground))\",\n  },\n} satisfies ChartConfig;\n\nexport function RevenueSummaryChart() {\n  return (\n    <Card className=\"p-4 shadow-none\">\n      <div className=\"flex items-center justify-between mb-1\">\n        <div>\n          <h3 className=\"font-semibold text-sm\">Revenue Summary</h3>\n          <p className=\"text-xs text-muted-foreground\">Monthly comparison</p>\n        </div>\n        <div className=\"flex items-center gap-4 text-xs\">\n          <div className=\"flex items-center gap-1.5\">\n            <span className=\"size-2 rounded-full bg-foreground\" />\n            <span className=\"text-muted-foreground\">Billed amount</span>\n          </div>\n          <div className=\"flex items-center gap-1.5\">\n            <span className=\"size-2 rounded-full bg-muted-foreground/50\" />\n            <span className=\"text-muted-foreground\">Unpaid amount</span>\n          </div>\n        </div>\n      </div>\n\n      <ChartContainer config={chartConfig} className=\"h-fit w-full mt-4\">\n        <BarChart data={chartData} barGap={2}>\n          <CartesianGrid vertical={false} />\n          <XAxis\n            dataKey=\"month\"\n            tickLine={false}\n            axisLine={false}\n            tickMargin={8}\n            tick={{ fontSize: 11 }}\n          />\n          <YAxis\n            tickLine={false}\n            axisLine={false}\n            tickMargin={8}\n            tick={{ fontSize: 11 }}\n            tickFormatter={(value) => `$${value}k`}\n          />\n          <ChartTooltip\n            content={\n              <ChartTooltipContent\n                formatter={(value, name) => (\n                  <span className=\"font-medium\">\n                    ${value}k {name === \"billed\" ? \"billed\" : \"unpaid\"}\n                  </span>\n                )}\n              />\n            }\n          />\n          <Bar\n            dataKey=\"billed\"\n            fill=\"var(--primary)\"\n            radius={[4, 4, 0, 0]}\n            barSize={24}\n          />\n          <Bar\n            dataKey=\"unpaid\"\n            fill=\"var(--muted)\"\n            radius={[4, 4, 0, 0]}\n            barSize={24}\n          />\n        </BarChart>\n      </ChartContainer>\n    </Card>\n  );\n}\n\n// Keep old exports for compatibility\nexport { RevenueSummaryChart as RevenueChart };\nexport { RevenueSummaryChart as DeliveryTimeChart };\nexport { RevenueSummaryChart as AnalyticsChart };\n",
      "type": "registry:component",
      "target": "components/dashboard-02/components/analytics-chart.tsx"
    },
    {
      "path": "src/registry/blocks/dashboard-02/components/projects-table.tsx",
      "content": "\"use client\";\n\nimport { Card } from \"@/components/ui/card\";\nimport { Badge } from \"@/components/ui/badge\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/components/ui/table\";\nimport { DEFAULT_PAYMENT_RECORDS, type PaymentRecord } from \"../data\";\n\ninterface PaymentHistoryTableProps {\n  records?: PaymentRecord[];\n}\n\nexport function PaymentHistoryTable({\n  records = DEFAULT_PAYMENT_RECORDS,\n}: PaymentHistoryTableProps) {\n  return (\n    <Card className=\"p-4 shadow-none gap-4\">\n      <div>\n        <h3 className=\"font-semibold text-sm\">Payment history</h3>\n      </div>\n      <Table>\n        <TableHeader>\n          <TableRow className=\"hover:bg-transparent border-border/50\">\n            <TableHead className=\"text-sm font-semibold\">User</TableHead>\n            <TableHead className=\"text-sm font-semibold\">Plan</TableHead>\n            <TableHead className=\"text-sm font-semibold\">Price</TableHead>\n            <TableHead className=\"text-sm font-semibold\">Date</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          {records.map((record, index) => (\n            <TableRow key={index} className=\"hover:bg-muted/50 border-border/50\">\n              <TableCell className=\"font-medium text-sm text-muted-foreground\">\n                {record.user}\n              </TableCell>\n              <TableCell>\n                <Badge variant=\"outline\" className=\"text-xs\">\n                  <span>▲</span>\n                  {record.plan}\n                </Badge>\n              </TableCell>\n              <TableCell className=\"text-sm text-muted-foreground\">\n                {record.price}\n              </TableCell>\n              <TableCell className=\"text-sm text-muted-foreground\">\n                {record.date}\n              </TableCell>\n            </TableRow>\n          ))}\n        </TableBody>\n      </Table>\n    </Card>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/dashboard-02/components/projects-table.tsx"
    }
  ],
  "meta": {
    "image": "/r/previews/dashboard-02.webp",
    "imageDark": "/r/previews/dashboard-02-dark.webp",
    "isPro": true,
    "badges": [],
    "prose": {
      "about": "Dashboard 02 is a sales analytics dashboard layout with revenue KPI cards at the top, an interactive bar chart in the center, and a recent orders table at the bottom. Built with shadcn/ui Card, Table, and Chart components (wrapping Recharts), it supports both light and dark mode and handles responsive layout with a CSS grid. The KPI values, chart data, and table rows are all configurable via props — connect them to any data source or Supabase query.",
      "whenToUse": [
        "SaaS admin panels that need a revenue or analytics overview as the main dashboard view",
        "Internal tools where key business metrics and recent activity need to be visible on one screen",
        "Prototypes and demos where a professional-looking dashboard is needed quickly without custom design",
        "Starter templates for B2B SaaS products where an analytics view is a core feature requirement"
      ],
      "notes": "The chart uses Recharts via the shadcn/ui Chart component wrapper, which provides consistent theming with the rest of your UI. Connect the chart data to a Supabase aggregation query or an API endpoint that returns time-series revenue data.",
      "faqs": [
        {
          "question": "Does the chart come with real data?",
          "answer": "No, KPI values, chart data, and table rows are all passed as props — connect them to a Supabase aggregation query or any API endpoint."
        },
        {
          "question": "What charting library does it use?",
          "answer": "Recharts, wrapped by the shadcn/ui Chart component for consistent theming with the rest of your UI."
        },
        {
          "question": "Is this a Pro block wired to Supabase automatically?",
          "answer": "It's a Pro block for its polish and layout, but the data wiring is left to you — it's a static template, not a connected block."
        }
      ]
    }
  },
  "categories": [
    "dashboard"
  ],
  "type": "registry:block"
}