@valuevaults/ui

ValueVaults React components, compiled styles, theme tokens, fonts, and a standalone browser bundle. This package keeps the existing component exports and includes the questionnaire primitives used in profiling.html.

React

pnpm add @valuevaults/ui react react-dom

import '@valuevaults/ui/styles.css';
import { UiButton, UiInput, ButtonVariant } from '@valuevaults/ui';

export function Example() {
	return <UiButton variant={ButtonVariant.Primary}>Continue</UiButton>;
}

Import styles.css once at the application entry point. It contains component styles, the existing light theme tokens, Vela Sans font faces, and component-scoped box sizing. Component imports do not modify the page's html, body, links, or native controls. Consumers do not need a global CSS reset for the components to size correctly.

For a new page that also needs a minimal page reset, opt in separately:

import '@valuevaults/ui/reset.css';
import '@valuevaults/ui/styles.css';

tokens.css and fonts.css are also exported separately. Sass tokens remain available through @valuevaults/ui/css/colors.scss, css/abstracts/variables.scss, and css/themes/light.scss. No consumer aliases or Sass compilation are needed for compiled CSS.

UiButton and UiText accept an optional LinkComponent for router integration. ResourceCard and ShowcaseCard retain their Next.js image integration; DateRangePicker retains its next-intl translation integration. Install their optional next / next-intl peers when using those components. The questionnaire browser bundle has no Next.js dependency.

UiUpload accepts uploadFiles and removeFile callbacks. The package does not contain application endpoints, credentials, or backend logic. The frontend's existing UiUpload adapter supplies its backend functions; a standalone preview may supply local callbacks.

Browser preview

The published package includes dist/ui.global.js and matching dist/ui.global.css. The script exposes window.VVUI with the questionnaire components plus h and createRoot. It bundles one React runtime for standalone pages; use the ordinary React entry point in an existing React app.

<link
	rel="stylesheet"
	href="https://cdn.jsdelivr.net/npm/@valuevaults/[email protected]/dist/ui.global.css"
/>
<script src="https://cdn.jsdelivr.net/npm/@valuevaults/[email protected]/dist/ui.global.js"></script>

Keep the JS and CSS versions identical. CSS font URLs resolve relative to the package and are included in the npm tarball.

In this repository:

pnpm install
pnpm preview:profiling

Open http://127.0.0.1:4173/profiling.html. The builder uses the local package build so changes can be checked before publishing. pnpm build:ui also refreshes the assets for opening the HTML directly from disk.

Build and publish

pnpm --filter @valuevaults/ui build
pnpm --filter @valuevaults/ui typecheck
cd packages/ui
pnpm pack
pnpm publish --access public --no-git-checks

prepack builds ESM, CommonJS, TypeScript declarations, CSS, fonts, and the browser bundle. React remains a peer dependency in the React entry points. The package allowlist includes only dist, public Sass tokens, and this README. No application source or authentication material is published.

Version 0.2.0 replaces the 0.1.1 source-only distribution, which referenced application aliases. The compiled entry point requires an explicit CSS import, and uploads now require backend callbacks.

Style packaging reference

Alfa's button stylesheet imports theme defaults and applies its own border, padding, appearance, and box-sizing rules. Its build configuration emits compiled library artifacts. This package follows the same principle of shipping component styles and theme values, while keeping page resets an explicit consumer choice.