@datarecce/ui

React components for building data validation and review interfaces.

---

What is this?

@datarecce/ui is the React component library extracted from Recce, a data validation tool for dbt projects. Use it to build custom data comparison, profiling, and validation interfaces in your React applications.

Looking to Contribute?

We welcome contributions! Whether it's bug fixes, new features, or documentation improvements.

Check out our Contributing Guide to get started with development setup, coding standards, and the PR process.

Quick Start

Installation

npm install @datarecce/ui
# or
pnpm add @datarecce/ui

Peer Dependencies

Install the required peer dependencies:

npm install react react-dom @mui/material @emotion/react @tanstack/react-query @xyflow/react axios

Basic Setup

Wrap your application with the required providers:

import { MuiProvider, ToasterProvider } from "@datarecce/ui";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <MuiProvider>
        <ToasterProvider>
          {/* Your app components */}
        </ToasterProvider>
      </MuiProvider>
    </QueryClientProvider>
  );
}

Using Components

import { LineageView, QueryForm, SchemaView } from "@datarecce/ui";

function MyDataView() {
  return (
    <div>
      <LineageView />
      <QueryForm />
      <SchemaView />
    </div>
  );
}

Import Styles

import "@datarecce/ui/styles";

Available Components

Lineage & Visualization

• LineageView - Interactive lineage graph
• LineagePage - Full lineage interface with controls
• GraphNode, GraphEdge - Graph primitives

Query & SQL

• QueryForm - SQL query input
• SqlEditor - CodeMirror-based editor
• QueryResultView - Results display

Data Profiling

• ProfileDiffForm - Profile comparison
• HistogramChart - Distribution visualization
• TopKSummaryList - Top-K values

Schema

• SchemaView - Structure display
• SchemaDiffView - Schema comparison

Validation

• CheckList - Validation checks
• CheckDetail - Check details
• RunList, RunView - Execution runs

Entry Points

// All exports
import { LineageView, QueryForm } from "@datarecce/ui";

// Specific categories
import { LineageView } from "@datarecce/ui/components";
import { axiosClient } from "@datarecce/ui/api";
import { useLineageViewContext } from "@datarecce/ui/hooks";
import type { DataFrame, Check } from "@datarecce/ui/types";

Requirements

Dependency	Version
Node.js	>= 20
React	18.x or 19.x
@mui/material	7.x
@emotion/react	11.x
@tanstack/react-query	5.x
@xyflow/react	12.x
axios	1.x

Links

• Recce Documentation
• Main Recce Project
• npm Package
• Issue Tracker

Support

• Discord
• dbt Slack #tools-recce
• Email: [email protected]

License

Apache-2.0