@bonnard/react

React components for embedding Bonnard charts and dashboards in any React app.

Install

npm install @bonnard/react @bonnard/sdk

Quick Start

1. Add the provider

import { BonnardProvider } from '@bonnard/react';
import '@bonnard/react/styles.css';

function App() {
  return (
    <BonnardProvider config={{ apiKey: 'bon_pk_...' }}>
      <MyAnalyticsPage />
    </BonnardProvider>
  );
}

2. Render a chart

import { BarChart } from '@bonnard/react';

function RevenueByCategory() {
  return (
    <BarChart
      title="Revenue by Category"
      measures={['orders.revenue']}
      dimensions={['orders.product_category']}
    />
  );
}

3. Use the query hook

import { useBonnardQuery } from '@bonnard/react';

function OrderStats() {
  const { data, loading, error } = useBonnardQuery({
    query: {
      measures: ['orders.revenue', 'orders.count'],
      dimensions: ['orders.status'],
    },
  });

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error}</p>;

  return (
    <ul>
      {data?.map((row, i) => (
        <li key={i}>{row['orders.status']}: ${row['orders.revenue']}</li>
      ))}
    </ul>
  );
}

Charts

All chart components accept data inline or query props:

Component	Description
<BarChart>	Vertical or horizontal bar chart
<LineChart>	Line chart with optional time axis
<AreaChart>	Stacked or overlapping area chart
<PieChart>	Pie / donut chart
<BigValue>	Single KPI number with optional comparison
<DataTable>	Sortable, paginated data table
<BonnardChart>	Universal renderer — pass a spec object

Dashboards

For rendering markdown dashboards in React apps, use the dashboard sub-entry:

import { DashboardViewer } from '@bonnard/react/dashboard';

// Render from markdown content
<DashboardViewer content={markdownString} />

Dashboards are markdown files with YAML query blocks and chart component tags (<BigValue>, <LineChart>, <BarChart>, etc.). See bon docs dashboards for the full format reference.

The dashboard entry adds parser dependencies (gray-matter, remark, rehype). Only import it if you need it — the main entry stays lightweight.

Theming

Dark mode

<BonnardProvider config={{ apiKey: '...' }} darkMode={true}>

Options: true, false, or 'auto' (default — uses prefers-color-scheme).

Custom colors

Override CSS custom properties to match your brand:

:root {
  --bon-bg: #fafafa;
  --bon-text: #1a1a1a;
  --bon-border: #e0e0e0;
  --bon-radius: 12px;
}

Color palettes

<BonnardProvider config={{ apiKey: '...' }} palette="observable">

Built-in palettes: default, tableau, observable, metabase. Or pass a custom array of hex colors.

API

<BonnardProvider>

Prop	Type	Default	Description
config	BonnardConfig	—	SDK config (apiKey or fetchToken)
darkMode	boolean | 'auto'	'auto'	Dark mode control
palette	PaletteName | string[]	'tableau'	Chart color palette
chartHeight	number	320	Default chart height in px

useBonnardQuery(options)

Option	Type	Description
query	QueryOptions	Cube query (measures, dimensions, filters, etc.)
skip	boolean	Skip execution (for conditional queries)

Returns { data, loading, error, refetch }.

Links

• Bonnard Docs
• SDK Package
• Discord

License

MIT