# @cdc/dashboard

> React component for combining multiple visualizations into a single dashboard

Latest version **4.26.7** (published 2026-07-28) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install @cdc/dashboard
pnpm add @cdc/dashboard
yarn add @cdc/dashboard
bun add @cdc/dashboard
```

## Health

**Score 60/100 (C)** — status: active.

Positive: esm support; no vulnerabilities; recently updated; high maintenance score.

Warnings: low downloads; no types; large bundle.

## Facts

| | |
|---|---|
| Version | 4.26.7 |
| Published | 2026-07-28 |
| First published | 2021-08-17 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 12 |
| Unpacked size | 42.5 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 55 |
| Author | Matthew Pallansch |
| Maintainers | cooms13, adoe, mpallansch |

## Links

- npm: https://www.npmjs.com/package/@cdc/dashboard
- Repository: https://github.com/CDCgov/cdc-open-viz
- Homepage: https://github.com/CDCgov/cdc-open-viz#readme
- Issues: https://github.com/CDCgov/cdc-open-viz/issues
- npm.io page: https://npm.io/package/@cdc/dashboard

## Dependencies (12)

- [@cdc/map](https://npm.io/package/@cdc/map.md) ^4.26.7
- [@cdc/core](https://npm.io/package/@cdc/core.md) ^4.26.7
- [js-base64](https://npm.io/package/js-base64.md) ^2.5.2
- [react-dnd](https://npm.io/package/react-dnd.md) ^16.0.1
- [@cdc/chart](https://npm.io/package/@cdc/chart.md) ^4.26.7
- [use-debounce](https://npm.io/package/use-debounce.md) ^10.1.0
- [@cdc/data-bite](https://npm.io/package/@cdc/data-bite.md) ^4.26.7
- [@cdc/waffle-chart](https://npm.io/package/@cdc/waffle-chart.md) ^4.26.7
- [@cdc/filtered-text](https://npm.io/package/@cdc/filtered-text.md) ^4.26.7
- [@cdc/markup-include](https://npm.io/package/@cdc/markup-include.md) ^4.26.7
- [react-dnd-html5-backend](https://npm.io/package/react-dnd-html5-backend.md) ^16.0.1
- [react-accessible-accordion](https://npm.io/package/react-accessible-accordion.md) ^5.0.1

## Recent versions

- 4.26.7 (latest) — 2026-07-28
- 4.26.6 — 2026-06-30
- 4.26.5 — 2026-06-04
- 4.26.4 — 2026-04-28
- 4.26.3 — 2026-04-06
- 4.26.2 — 2026-03-02
- 4.26.1 — 2026-01-28
- 4.25.11 — 2025-12-02
- 4.25.10 — 2025-10-28
- 4.25.8 — 2025-08-27
- 4.25.7-2 — 2025-07-30
- 4.25.7 — 2025-07-29
- 4.25.6-2 — 2025-07-10
- 4.25.6-1 — 2025-07-09
- 4.25.6 — 2025-07-01
- … 36 more at https://npm.io/package/@cdc/dashboard/versions

## README

# @cdc/dashboard

[![npm](https://img.shields.io/npm/v/@cdc/dashboard)](https://www.npmjs.com/package/@cdc/dashboard)

`<CdcDashboard />` combines multiple visualizations into a single dashboard shell.
The primary configuration reference is [CONFIG.md](./CONFIG.md).

## Installation

```bash
npm install @cdc/dashboard
```

## Quick Start

Use the package by passing a `config` object directly:

<!-- README_EXAMPLE_CONFIG_START -->
```jsx
import CdcDashboard from '@cdc/dashboard'

const config = {
  type: 'dashboard',
  version: '4.26.4',
  dashboard: {
    theme: 'theme-blue',
    title: 'Dashboard Example',
    titleStyle: 'small',
    sharedFilters: []
  },
  data: [],
  rows: [
    {
      columns: [
        {
          width: 12,
          widget: 'markup-1'
        }
      ]
    }
  ],
  visualizations: {
    'markup-1': {
      type: 'markup-include',
      theme: 'theme-blue',
      contentEditor: {
        inlineHTML: '<p>Minimal dashboard example</p>',
        showHeader: true,
        srcUrl: '',
        title: 'Dashboard Example',
        useInlineHTML: true
      }
    }
  }
}

function App() {
  return <CdcDashboard config={config} />
}

export default App
```
<!-- README_EXAMPLE_CONFIG_END -->

## Configuration

The primary reference for authoring configs is [CONFIG.md](./CONFIG.md).

If you are reading this in a context where relative Markdown links do not open correctly, use the [GitHub copy of the dashboard config reference](https://github.com/CDCgov/cdc-open-viz/blob/main/packages/dashboard/CONFIG.md).

## Properties

| Property | Type | Description |
| --- | --- | --- |
| `config` | `object` | Dashboard configuration object. Pass this or `configUrl` to initialize the dashboard. |
| `configUrl` | `string` | URL to a JSON config file that will be fetched at runtime. |

---
_Source: https://npm.io/package/@cdc/dashboard · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._