Getting started

Corpo ships as two packages: @nukleas/corpo is the source of visual truth — tokens and plain CSS components — and @nukleas/react-corpo is the full React API on top of it. Use the CSS alone in any stack, or the React package for semantic props.

Install

# CSS + tokens only
npm install @nukleas/corpo

# Full React API (includes the CSS)
npm install @nukleas/react-corpo

Plain CSS

Import the bundle once, then use cp- classes. Everything below is live:

Paid Operational

import '@nukleas/corpo';

<button class="cp-btn cp-btn--primary">Save changes</button>
<button class="cp-btn">Cancel</button>
<span class="cp-badge cp-badge--green"><span class="cp-badge__dot"></span>Paid</span>
<span class="cp-status-pill"><span class="cp-status-dot cp-status-dot--ok"></span>Operational</span>

React

import { AppShell, SideNav, Topbar, Button, Table } from '@nukleas/react-corpo';
import '@nukleas/react-corpo/styles.css';

<Table
  columns={[
    { key: 'id', label: 'Invoice', mono: true },
    { key: 'amount', label: 'Amount', numeric: true },
    { key: 'status', label: 'Status' },
  ]}
  rows={[
    { id: 'INV-2041', amount: '$4,200.00', status: { content: 'Paid', status: 'ok' } },
  ]}
/>

Every component is documented with props and variants in Storybook — including three full-app example screens built entirely from the system.

Package exports

Import	What you get
`@nukleas/corpo`	The full CSS bundle (also `/css`)
`@nukleas/corpo/vars`	CSS custom properties only — bring your own components
`@nukleas/corpo/tailwind`	Tokens exposed to Tailwind v4 via `@theme`
`@nukleas/corpo/tokens`	TypeScript token objects
`@nukleas/corpo/react`	Thin class-mapping React wrappers
`@nukleas/corpo/depgraph`	`CpDepGraph` — zero-dependency SVG dependency-graph engine
`@nukleas/corpo/charts`	`CpLineChart`, `CpBarChart`, `CpDonutChart`, `CpSparkline`
`@nukleas/react-corpo`	80+ React components with semantic props
`@nukleas/react-corpo/styles.css`	The corpo CSS bundle, copied for one-line setup

Vanilla scene engines

The dependency graph and charts are framework-free engines: JS owns geometry and interaction, token-only CSS owns every color. Mount them on any element:

import { CpLineChart } from '@nukleas/corpo/charts';

const chart = CpLineChart(document.querySelector('#revenue'), {
  labels: ['Jan', 'Feb', 'Mar'],
  series: [{ label: 'Revenue', data: [128000, 132500, 141200] }],
  yFormat: (v) => `$${v.toLocaleString('en-US')}`,
});
chart.update({ series: nextSeries });   // controlled — re-render with new data
chart.destroy();