Installation

Stable releaseCopy Anchor Link

For the published 0.1.x line, install from npm:

npm install @hannasage/projection-ui@0.1

The current stable release is 0.1.5. Use its preserved documentation for root imports and feature dependency requirements. The 0.2 examples below require a 0.2 alpha package.

Opt into the alphaCopy Anchor Link

npm currently has only 0.1.x releases and no next tag. The alpha commands below are post-publication steps and do not work today. After an alpha is published under next, opt in with:

npm install --save-exact @hannasage/projection-ui@next

--save-exact keeps later alpha and stable updates manual. It saves the resolved version instead of a version range.

This documentation is one evolving 0.2.0 edition, marked Alpha. An alpha is a preview that can change before stable release. 0.2.0-next.2 is an unpublished candidate. After that exact version appears on npm, pin it with:

npm install --save-exact @hannasage/projection-ui@0.2.0-next.2

In an existing React 19 application, install one 0.2 Projection UI package. The library manages its chart, drag, and toast dependencies. npm downloads them automatically. React 19 and React DOM 19 remain shared application peers. A peer dependency is a package that your application supplies.

Review the candidate locallyCopy Anchor Link

For local review, install the tarball produced by npm pack. Replace the example path below with the path to that tarball. A tarball is the archive that npm installs.

npm install /path/to/packed-candidate.tgz

Quick startCopy Anchor Link

Import scoped styles once in your application entry. The provider keeps the example theme within its wrapper.

import '@hannasage/projection-ui/styles'
import { Button, DEFAULT_THEME, ThemeProvider } from '@hannasage/projection-ui/core'

export function Example() {
  return (
    <ThemeProvider theme={DEFAULT_THEME}>
      <Button type="button" variant="primary">Start example</Button>
    </ThemeProvider>
  )
}

Feature importsCopy Anchor Link

Import /charts, /sortable, or /toast when you need those features. You do not install their dependencies separately. These entries isolate JavaScript imports; they do not remove dependency downloads. The root import retains the combined feature entry for existing consumers.

For Next.js App Router, place interactive imports in a file with 'use client'. Load the stylesheet through the application entry that Next.js accepts. The compatibility guide records the consumer checks.