Installation

Build from source

Prefer a visual starting point? Studio connects a real public API and exports a runnable React starter with the preview package included. Unzip it with Node 22.12 or newer, run npm install, then npm run dev. For an existing application, build and pack below and follow the API recipes.

git clone https://github.com/zinnoberHaus/quartile
cd quartile
pnpm install --frozen-lockfile
pnpm --filter @quartile/react build
cd packages/react && pnpm pack   # writes quartile-react-0.1.0.tgz

Then install the tarball in your app. The declared React and React DOM peer range is >=18.2; packed consumers are tested on React 18.2 and 19.3.

This documentation site installs Quartile the same way, from a vendored tarball. The default import does not load a database, start a worker or call a model. Optional query/DuckDB entries are described in Arrow and worker queries; the optional AI entry is covered in AI-assisted analysis.

Add the styles and the provider

Import @quartile/react/styles.css once. It holds every token and component style; there is no Tailwind or CSS-in-JS dependency. Wrap your app, or one dashboard, in QuartileProvider: it scopes theme, density, locale and optional timeZone, and hosts the layer that menus, dialogs and tooltips render into.

// providers.tsx — a client boundary in Next.js
'use client';
import type { ReactNode } from 'react';
import { QuartileProvider } from '@quartile/react';

export function Providers({ children }: { children: ReactNode }) {
  return <QuartileProvider theme="system">{children}</QuartileProvider>;
}

Set the same explicit locale and time zone on server and client for reproducible reports. Field and descriptor overrides are documented in Formatting and notation.

Import the stylesheet in main.tsx for Vite or app/layout.tsx for Next.js. Render Providers around your report. Framework integration includes complete entry and layout examples.

Your first chart

Pass rows and name the fields. The date field is detected and revenue is formatted as currency from its name; see Data model.

import { LineChart } from '@quartile/react';

const daily = [
  { date: '2026-10-04', revenue: 41250 },
  { date: '2026-10-05', revenue: 39810 },
  { date: '2026-10-06', revenue: 44620 },
];

export function Revenue() {
  return <LineChart data={daily} x="date" y="revenue" aria-label="Revenue per day" />;
}

Next.js and other frameworks

The package entry starts with 'use client', so components can be imported from Server Component files as long as their props are serializable. Functions do not cross that boundary: render from a client component when you pass formatters or handlers, or when you call dataset(). With Vite or another bundler, import and render as usual.