@upbound/monarch-blocks

Upbound's design system — composed components: Chart, DataTable, FilterBar, CelFilterBar, ChatInterface, Timeline, and more. Built on @upbound/monarch-core's primitives, with real dependencies of their own (charting, table state, CEL filter expression compiling) that monarch-core deliberately stays free of.

Kept as a separate package from monarch-core on purpose: installing it always pulls in @upbound/monarch-core as a real dependency, but installing monarch-core alone never pulls in this package's heavier dependency tree.

Install

npm install @upbound/monarch-blocks

Peer dependencies: react and react-dom (^18.3.0 || ^19.0.0), tailwindcss (^4.0.0). @upbound/monarch-core installs automatically as a transitive dependency.

Set up the theme

This package ships no CSS of its own — it reuses @upbound/monarch-core's tokens and utility classes. Set up monarch-core's theme as documented in its README; monarch-blocks needs the same @import and @source lines, with one addition — extend the @source glob to cover this package's compiled files too:

@import 'tailwindcss';
@import '@upbound/monarch-core/theme.css';
@source '../../node_modules/@upbound/monarch-core/dist/*.js';
@source '../../node_modules/@upbound/monarch-blocks/dist/*.js';

(Path assumes a Next.js --src-dir layout — see @upbound/monarch-core's README for why dist/*.js, not a recursive glob, and why the path climbs two directories.)

Use a component

import { DataTable } from '@upbound/monarch-blocks';

Or import a single component's own subpath, same as monarch-core:

import { DataTable } from '@upbound/monarch-blocks/data-table';

Server Components

Same caveat as monarch-core: the root barrel bundles every component into one file and is a client boundary unconditionally. Import a component's own subpath if you need it in a context where that matters.

Graph needs its own CSS

Graph/GraphView render on ReactFlow, which ships its own base stylesheet for Controls/MiniMap/Background/handle positioning. This is the one component in the package that ships CSS — import it once, alongside monarch-core's theme:

@import 'tailwindcss';
@import '@upbound/monarch-core/theme.css';
@import '@upbound/monarch-blocks/graph.css';

@source '../../node_modules/@upbound/monarch-core/dist/*.js';
@source '../../node_modules/@upbound/monarch-blocks/dist/*.js';

No other component in this package needs a CSS import.

Not part of the shadcn registry

Unlike @upbound/monarch-core, these components are not available through npx shadcn add @monarch/... — the registry intentionally sources from monarch-core only, so a consumer using the shadcn CLI path never pulls in this package's heavier dependencies. npm install is the only distribution channel for monarch-blocks.