Skip to main content
Rust4PM

React components

Viewers and inputs for process mining (DFG, Petri net, dotted chart, OCEL, alignments) as a React library.

Install

pnpm add @r4pm/components react react-dom

React and React DOM are peer dependencies. These are the same components Propel is built from.

Use

Import @r4pm/components/styles.css once. It bundles Tailwind and the Radix theme.

tsx
import "@r4pm/components/styles.css";
import { Theme, PetriNetViewer } from "@r4pm/components";

<Theme>
  <PetriNetViewer data={net} />
</Theme>;

If your app already runs Tailwind, import @r4pm/components/rules.css after your own Tailwind entry instead, and point Tailwind at the package source:

css
/* your index.css */
@import "tailwindcss";
@source "../node_modules/@r4pm/components/src";

Entry points

Heavier viewers sit behind subpaths, so importing the main entry never pulls in Plotly or the Petri net editor.

@r4pm/componentsViewers (DFG, Petri net, OCEL summaries, alignments), inputs, ViewerConfigProvider
@r4pm/components/uiRadix Themes primitives (Theme, Button, Card, ...)
@r4pm/components/petriThe React Flow + ELK Petri net editor
@r4pm/components/chartsPlotly charts: DottedChart, CaseDurationChart, EventsPerTimeChart, ...

Component gallery

The Storybook has every component with sample data and props tables generated from the TypeScript types.

Open the Storybook