# @stackone/malachite

[![npm version](https://img.shields.io/npm/v/@stackone/malachite)](https://www.npmjs.com/package/@stackone/malachite)
[![Repo health](badges/repo-health.svg)](CONTRIBUTING.md#repo-health)
[![React doctor](badges/react-doctor.svg)](CONTRIBUTING.md#repo-health)

StackOne's themeable React component library. Components render inside a consumer's
Shadow DOM with scoped Tailwind CSS, and all colors come from theme tokens.

## Install

```bash
npm install @stackone/malachite
```

React 18 or 19, plus `react-dom` and `react-hook-form`, are peer dependencies.

## Usage

```tsx
import {applyDarkTheme, Button} from '@stackone/malachite';

applyDarkTheme();

export const Example = () => <Button variant="filled">Save</Button>;
```

## Components

`COMPONENTS.md`, shipped in the package, catalogs every exported component with its
purpose and key props. Reach for one of those before hand-rolling UI.

## Developing on this repo

Node 22 (`.nvmrc`) and pnpm 10+, which self-delegates to the version pinned in
`packageManager`. `corepack enable` sets one up if you have none.

```bash
pnpm install --frozen-lockfile
pnpm test
```

Not npm — a stray `npm install` leaves a clean `git status` and an unvalidated
`node_modules`. See [`CONTRIBUTING.md`](CONTRIBUTING.md) and [`CLAUDE.md`](CLAUDE.md).

## Theming

Colors come from `--malachite-*` CSS custom properties rather than being passed in as
props, so components stay on-palette. Switch mode with `applyLightTheme` /
`applyDarkTheme` / `toggleTheme`, and override individual tokens with `applyTheme` or
`applyCustomTheme` — that is the supported way to restyle, rather than passing colors
into components.

## Contributing

See [`CONTRIBUTING.md`](CONTRIBUTING.md) for the repo-health score behind the badges
above, and for how to refresh them.

## License

MIT — see [`LICENSE`](LICENSE).