Introduction

Status: 0.1 preview

Chart libraries stop at the chart and UI kits stop at the form, so teams theme the two separately and pass filter state between them by hand. Quartile ships both layers as one system:

• One theme. Charts, tables, inputs and overlays read the same --q-* CSS custom properties. Light, dark and a compact density are token remaps. No Tailwind or CSS-in-JS runtime is required.
• One data model. Pass rows and name the fields. Types, labels and formats are inferred, or declared once with dataset(), and every axis, tooltip, table and KPI uses them.
• One selection. Wrap views in <Selection>. Brushes, clicks and filter chips publish predicates; every other view re-filters, and a view is never filtered by its own selection.
• Accessible charts by default. Charts have a keyboard model, an auto-written summary and a table fallback.
• Machine-readable. A JSON Schema describes the charts, KPI, DataTable and FilterBar, so generated dashboard specs can be validated before they render.

See it work

Drag across the daily bars to brush a date range, or click a region. The KPI, the chart and the list follow; the view you are using keeps showing everything, so you can change your selection.

import { BarList, KPI, Histogram, Selection } from '@quartile/react';

type Order = { date: string; region: string; amount: number };

export function RevenueExplorer({ orders }: { orders: Order[] }) {
  return (
    <Selection>
      <Histogram data={orders} x="date" value="amount" interval="day" brush aria-label="Revenue per day" />
      <KPI label="Revenue" data={orders} value="amount" format="currency-compact" trendBy="date" />
      <BarList data={orders} category="region" value="amount" select />
    </Selection>
  );
}

What is included

How it compares

Quartile focuses on composing a data application: charts, tables and controls share a theme, field metadata and a selection store. Evaluate it against the integration work your report needs, as well as chart coverage, accessibility and performance. Mature charting and grid libraries remain useful choices when their capabilities match your application. Quartile is currently an early preview.

Quartile is meant to sit alongside a UI kit such as shadcn/ui rather than replace it: keep it for forms and navigation and use Quartile for the analytic surface. The full comparison, with sources and caveats, is in the landscape research note.

What is not built yet

• npm release. Install from a clone for now; see Installation.
• Coverage. Canvas/WebGL currently cover ScatterPlot only. The optional Arrow/DuckDB query layer is experimental; generated specs still use synchronous datasets.
• Scale. The worker explorer exposes bounded query and render measurements. No universal supported row count is promised.
• Screen-reader testing. The keyboard model, summaries and tables exist, but they have not been tested with NVDA, JAWS or VoiceOver yet.