Vanta Embed

The official React component for embedding Vanta Reports. Seamlessly integrate dynamic, interactive dashboards and analytics into your application with zero configuration.

Features

• Zero Configuration: Works out of the box with the Vanta Reports platform.
• Dynamic Charting: Fully customizable charts powered by Chart.js.
• Auto-Responsive: Charts created with mobile-first design.
• Type-Safe: Written in TypeScript with full type definitions.
• Customizable: Inject custom CSS and override chart options dynamically.

Installation

npm install vanta-embed
# or
pnpm add vanta-embed
# or
yarn add vanta-embed

Quick Start

Import the VantaEmbed component and provide your report ID and access token.

import { VantaEmbed } from 'vanta-embed';

function App() {
  return (
    <div style={{ padding: '20px' }}>
      <h1>My Analytics Dashboard</h1>
      
      <VantaEmbed 
        reportId="rid_12345678" 
        token="tok_abcdef123456" 
      />
    </div>
  );
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | reportId | string | Required | The unique identifier of the report you want to display. | | token | string | Required | Your authentication token (OAuth or API Key). | | apiUrl | string | 'https://vantacod.com/api' | Base URL of the Vanta Reports API. | | height | string | '600px' | Height of the widget container. | | css | string | undefined | Custom CSS string to inject into the component's Shadow DOM. | | className | string | undefined | CSS class for the wrapper div. | | style | object | undefined | Inline styles for the wrapper div. |

Advanced Usage

Custom Styling

Since the widget uses Shadow DOM to encapsulate styles, global CSS won't affect it. Use the css prop to inject styles directly:

<VantaEmbed 
  reportId="..."
  token="..."
  css={`
    .vanta-embed-container { background: #f8fafc; border: none; }
    .vanta-title { color: #0f172a; font-family: 'Inter', sans-serif; }
    .vanta-kpi-value { color: #2563eb; }
  `}
/>

Dynamic Backend Configuration

The widget is fully driven by the JSON response from your backend. You can control the chart type, data, and even raw Chart.js configuration options.

Example JSON Response:

{
  "id": "rid_123",
  "title": "Quarterly Sales",
  "charts": [
    {
      "type": "line",
      "title": "Revenue Trend",
      "data": [
        { "date": "Jan", "value": 4000 },
        { "date": "Feb", "value": 3000 },
        { "date": "Mar", "value": 5500 }
      ],
      "options": {
        "elements": {
          "line": { "tension": 0.4 } // Smooth curves
        },
        "plugins": {
          "legend": { "display": true, "position": "bottom" }
        }
      }
    }
  ]
}

License

MIT © Vanta Reports