@nqlib/nqcharts

React chart primitives built on Recharts, styled with the same Tailwind / token conventions as @nqlib/nqui (cn, layout primitives, frosted chrome patterns).

Version 0.1.0 is the first published line: cartesian charts (area, bar, line, combo), donut, spark variants, bar list / category bar / progress circle, chart display config helpers, and optional mock data for docs or prototyping.

Is it “standalone”?

| Layer | Notes | |--------|--------| | npm package | Yes. Install @nqlib/nqcharts in any React app; JS ships as ESM + CJS under dist/. | | Peers | react, react-dom, and @nqlib/nqui are required peers (not bundled). Components import UI primitives and utilities from nqui. | | Bundled in the chart bundle | recharts, @remixicon/react, lucide-react, tailwind-merge, tailwind-variants (runtime dependencies). | | Styles | Charts rely on CSS variables and Tailwind utilities from your app (via nqui). Import @nqlib/nqui/styles plus Tailwind, then optional @nqlib/nqcharts/styles.css for chart-only extras (e.g. line last-dot glow). |

So: standalone installable library, but not zero-dependency—it is meant to sit beside @nqlib/nqui and your Tailwind v4 setup.

Install

npm install @nqlib/nqcharts @nqlib/nqui react react-dom

Or let the package resolve peers:

npx @nqlib/nqcharts install-peers

Use matching majors for React 18 as declared in peerDependencies.

CLI & agent skills

After installing the npm package you get nqcharts / npx @nqlib/nqcharts commands:

| Command | Purpose | |--------|---------| | npx @nqlib/nqcharts install-peers | Adds @nqlib/nqcharts, @nqlib/nqui, react, react-dom with peer ranges from this package | | npx @nqlib/nqcharts init | Writes ./nqcharts/chart-display.config.json (full chart chrome SSOT: grid, axes, legend, value labels, bar corners, …) and ./nqcharts/chart-colors.ts (editable Tremor-style palette + helpers). Use init --force to overwrite. | | npx @nqlib/nqcharts init-skills | Copies docs/nqcharts-skills → .cursor/nqcharts-skills/ and appends AGENTS.md once (marker <!-- @nqlib/nqcharts skills -->) | | npx @nqlib/nqcharts help | Prints usage |

Aliases on PATH: nqcharts-install-peers, nqcharts-init-skills (same scripts).

Skills hub: .cursor/nqcharts-skills/SKILL.md — load nqcharts-install or nqcharts-components by task.

Pass init-skills --no-force to skip overwriting an existing .cursor/nqcharts-skills tree (default is overwrite + backup).

CSS

In your app stylesheet (after Tailwind and nqui):

@import "tailwindcss";
@import "@nqlib/nqui/styles";
@import "@nqlib/nqcharts/styles.css";

Ensure Tailwind can see utility classes used inside the library (e.g. @source your node_modules/@nqlib/nqcharts/dist/*.{js,mjs} or follow your nqui app template).

Usage

import { BarChart } from "@nqlib/nqcharts"

export function RevenueChart({ data }: { data: { month: string; revenue: number }[] }) {
  return (
    <BarChart
      data={data}
      index="month"
      category="revenue"
      className="h-80"
    />
  )
}

See TypeScript exports from @nqlib/nqcharts for ChartDisplayConfig, toCartesianChartProps, ChartDisplayConfigPanel, mock datasets, etc.

Scripts (maintainers)

| Script | Purpose | |--------|---------| | npm run build | Library bundle + declaration emit + copy styles.css | | npm run dev | Vite app shell for local showcase | | prepublishOnly | Runs npm run build before publish | | npm run publish:npm / publish:github / publish:both | Publish to npmjs.com and/or GitHub Packages — see docs/publishing.md | | ./scripts/publish.sh npm | Same targets as publish:* (GitHub then npm for both) |

Publish 0.1.0 to npm

Full workflow (auth, version bumps, dual registry): docs/publishing.md.

From this repo’s root (with npm login and permission on scope @nqlib):

npm publish --access public

prepublishOnly builds dist/ (JS, .d.ts, nqcharts.css). Published artifacts are dist/, README.md, scripts/, docs/publishing.md, and other docs/ paths listed in package.json "files".

License

MIT (aligned with the nqui monorepo).