@materia-technologies-inc/chameleon-components-react-lite

React components for the Chameleon design system — a Cr* component for every cw-* custom element, with typed props, typed events and forwarded refs.

This is the lite package: it contains no web components and declares them a peer, so the library is installed once and shared. For a React-only app with nothing else loading Chameleon, chameleon-components-react embeds them and is a single install.

• React 19
• Peers on @materia-technologies-inc/chameleon-components-web
• Forwards the whole web-components surface, so one import reaches both halves

Install

npm install @materia-technologies-inc/chameleon-components-react-lite \
            @materia-technologies-inc/chameleon-components-web

A license grant is required

Chameleon is a commercial product. Your build exchanges an organization token for a signed grant and stamps it into the bundle; the components read it at runtime.

npm install --save-dev @materia-technologies-inc/chameleon-grant
export CHAMELEON_LICENSE_TOKEN="…"

The token alone stamps nothing: your bundler has to run the grant tooling — its Vite or Rollup plugin, or its command-line stamp — as the chameleon-grant README describes.

Without a grant every component renders watermarked and disabled: faded under an UNLICENSED mark, taking no input and no part in its form, with an error in the console. The token must reach a non-interactive shell — ~/.zshenv, or your CI's secret store — not ~/.zshrc.

Use

import "@materia-technologies-inc/chameleon-components-web";
import "@materia-technologies-inc/chameleon-components-web/chameleon.css";
import { CrButton, ButtonVariant } from "@materia-technologies-inc/chameleon-components-react-lite";

export const Save = () => <CrButton variant={ButtonVariant.Filled}>Save</CrButton>;

TypeScript

This package carries lit's declarations, so you install nothing else to type-check against it. Your lib must include ESNext.Decorators, which is where Symbol.metadata lives:

{ "compilerOptions": { "lib": ["ES2022", "ESNext.Decorators", "DOM", "DOM.Iterable"] } }

Links

• chameleonui.io — documentation, component gallery and live playground

License

Commercial. See License.md in this package.