An open-source React library to build dashboards and data apps with a few lines of code.

A dashboard built with Propel's Embeddable UI

​
Install

1

Install the package

Install the package from your command line.

npm install @propeldata/ui-kit
2

Add the Theme component

Add ThemeProvider to your application, wrapping the root component inside of body.

import { ThemeProvider } from "@propeldata/ui-kit";

export default function () {
  return (
    <html>
      <body>
        <ThemeProvider>
          <MyApp />
        </ThemeProvider>
      </body>
    </html>
  );
}

​
Components

​
Visualizations

Time series

Visualize time-series data.

Counter

Visualize a single value.

Data grid

Visualize records in table format.

Leaderboard

Display ranked aggregate data.

Pie chart

Show part-to-whole relationships.

​
Inputs

Time range picker

Select date ranges for analysis.

Simple filter

Filter data using a dropdown.

Time grain picker

Choose a time granularity for aggregation.

Group by

Break down data by dimensions.

​
Providers

Access token provider

Manage authentication across components.

Theme provider

Customize the look and feel of components.

Filter provider

Applies filters to child components.

​
Query Hooks

Query hooks fetch data from the Query APIs from your frontend application. They are designed to work with any 3rd-party charting library such as Echarts, Chart.js, or D3.js.

useSql

Query data using SQL.

useCounter

Fetch a single aggregated value from the Counter API.

useDataGrid

Fetch tabular data from the Data Grid API.

useLeaderboard

Fetch ranked data from the Leaderboard API.

useTimeSeries

Fetch time-series data from the Time Series API.

useTopValues

Fetch top values from the Top Values API.

An open-source React library to build dashboards and data apps with a few lines of code.

A dashboard built with Propel's Embeddable UI

​
Install

1

Install the package

Install the package from your command line.

npm install @propeldata/ui-kit
2

Add the Theme component

Add ThemeProvider to your application, wrapping the root component inside of body.

import { ThemeProvider } from "@propeldata/ui-kit";

export default function () {
  return (
    <html>
      <body>
        <ThemeProvider>
          <MyApp />
        </ThemeProvider>
      </body>
    </html>
  );
}

​
Components

​
Visualizations

Time series

Visualize time-series data.

Counter

Visualize a single value.

Data grid

Visualize records in table format.

Leaderboard

Display ranked aggregate data.

Pie chart

Show part-to-whole relationships.

​
Inputs

Time range picker

Select date ranges for analysis.

Simple filter

Filter data using a dropdown.

Time grain picker

Choose a time granularity for aggregation.

Group by

Break down data by dimensions.

​
Providers

Access token provider

Manage authentication across components.

Theme provider

Customize the look and feel of components.

Filter provider

Applies filters to child components.

​
Query Hooks

Query hooks fetch data from the Query APIs from your frontend application. They are designed to work with any 3rd-party charting library such as Echarts, Chart.js, or D3.js.

useSql

Query data using SQL.

useCounter

Fetch a single aggregated value from the Counter API.

useDataGrid

Fetch tabular data from the Data Grid API.

useLeaderboard

Fetch ranked data from the Leaderboard API.

useTimeSeries

Fetch time-series data from the Time Series API.

useTopValues

Fetch top values from the Top Values API.