@isonl/dashboard-ui

A portable React dashboard system for consistent shells, spacing, listings, controls, metric cards, account drawers and operational workspaces.

Install

npm install @isonl/dashboard-ui react react-dom framer-motion lucide-react radix-ui

Import the stylesheet once:

import "@isonl/dashboard-ui/styles.css";

Shell

import { DashboardShell } from "@isonl/dashboard-ui";
import { LayoutDashboardIcon, ReceiptTextIcon } from "lucide-react";

<DashboardShell
  brand={{ name: "Acme", logoUrl: "/logo.png" }}
  activePath="/orders"
  navigation={[
    { label: "Overview", href: "/", icon: <LayoutDashboardIcon /> },
    { label: "Orders", href: "/orders", icon: <ReceiptTextIcon /> },
  ]}
  user={{ name: "Asha Mushi", secondary: "+255 762 590 693", initials: "AM" }}
  accountActions={[{ label: "Account settings", href: "/settings" }]}
>
  {children}
</DashboardShell>

For React Router or Next.js, supply renderLink so navigation remains client-side.

Listing

<DashboardPage>
  <PageHeader title="Orders" description="Payment and fulfillment are tracked independently." />
  <MetricGrid>
    <MetricCard label="Paid" value={128} tone="success" />
    <MetricCard label="Pending" value={14} tone="warning" />
  </MetricGrid>
  <DataListing
    rows={orders}
    rowKey={(order) => order.id}
    columns={columns}
    toolbar={<Toolbar><SearchInput placeholder="Search orders" /></Toolbar>}
  />
</DashboardPage>

Agent Usage

Read AGENTS.md before generating a dashboard. Automated tooling can import dashboardAgentManifest from @isonl/dashboard-ui/agent-manifest for structured recipes and prohibited patterns.