@parallelworks/ui

Shared UI foundation for Parallel Works packages and applications: the unified theme contract, the icon barrel, and (in later versions) core primitives such as tables, tooltips, loaders, and modals.

Theme contract

Every color a component may use is one of the closed set of --theme-* CSS variables, and every token is computable from a tiny seed — accent + background + contrast — per surface (interface, and optionally sidebar). Presets are named seeds; a custom theme is the same seed exposed directly. Components consume only tokens and never branch on a light/dark flag.

import { deriveTheme, applyTheme, THEME_PRESETS } from '@parallelworks/ui/theme'

const vars = deriveTheme({ accent: '#06354f', background: '#f3f4f6' })
applyTheme(document.documentElement, vars)

Import the stylesheet contract once in your app:

/* In a Tailwind v4 build: */
@import '@parallelworks/ui/theme.css';
@source '../node_modules/@parallelworks/ui/src/**/*.{ts,tsx}';

Consumers without a Tailwind build can import the compiled standalone stylesheet instead:

import '@parallelworks/ui/styles.css'

The prebuilt stylesheet nests all of its rules in the pw-ui cascade layer, so loading it alongside other Parallel Works package stylesheets (for example @parallelworks/ai-chat/styles.css, which uses the pw-ai-chat layer) is order-independent.

Icons

import { AddIcon, LoaderIcon, TrashIcon } from '@parallelworks/ui/icons'

The barrel re-exports a curated, stable set of icon names over react-icons so applications never depend on a specific icon pack directly.