Carbide UI and mm-react-components

Carbide is the MachineMetrics industrial UI theme used with @machinemetrics/mm-react-components—a React component library built on accessible primitives and Tailwind-style tokens. Use it for dashboards, widgets, and apps that should match MachineMetrics product styling.

The sections below start with the shortest paths (new app vs. existing app), then manual setup and CLI reference.

Component gallery and code snippets

Browse the interactive MM React Components design gallery at design.machinemetrics.com to explore components with the Carbide theme, view live examples, and copy code snippets into your app.

Running CLI commands with `npx`

Use npx -p @machinemetrics/mm-react-components <command> when @machinemetrics/mm-react-components is not yet installed in the project (or if plain npx @machinemetrics/mm-react-components … fails with errors like could not determine executable to run). The -p flag pins the package so npx resolves the correct binaries.

Examples:

npx -p @machinemetrics/mm-react-components mm-init
npx -p @machinemetrics/mm-react-components mm-install-skill
npx -p @machinemetrics/mm-react-components chakra-to-shadcn

After npm install @machinemetrics/mm-react-components, the same commands usually work without -p from the project root; either form should track the installed version.

The rest of this page uses the shorter npx @machinemetrics/mm-react-components … form—you can substitute the npx -p … form whenever you need it.

Fast path: New app (Carbide template → skill → build)

Use this when you are starting from the MachineMetrics CLI and a Carbide project template.

Create the app with the Carbide template (see mmdev CLI for install and login if you have not used it yet):
```
mmdev create my-first-app --template carbide
```
Open the app folder your template uses (often the nested app directory inside the project) and install and run the dev server:
```
cd my-first-app/app
npm install
npm start
```
If your team runs the app with Docker instead, follow the mmdev quick start (docker compose up --build in that same app directory).
Install the mm-carbide skill for your AI tool (from the app repo root or any path—the installer will prompt for tool and project vs. user scope when needed):
```
npx @machinemetrics/mm-react-components mm-install-skill
```
If that fails to resolve the executable, use:
```
npx -p @machinemetrics/mm-react-components mm-install-skill
```
Tell your agent to use the mm-carbide skill (or “Carbide / mm-react-components skill”) when implementing the UI or feature you want—so it follows Carbide patterns, data-slot theming, and widget rules.

That is the full “happy path”: template → run app → skill → delegate to the agent.

Fast path: Existing app (`mm-init` → optional Chakra migration)

Use this when you already have a React codebase and want Carbide wired in without hand-rolling every step.

From the project root of your app (where package.json lives), run:
```
npx -p @machinemetrics/mm-react-components mm-init
```
(mm-init before the package is a dependency—-p avoids flaky npx resolution. After install, shorter npx forms are fine.)

mm-init can install @machinemetrics/mm-react-components, add the styles import, and—when you confirm—run mm-install-skill so the mm-carbide skill is installed for your environment.
If the project uses Chakra UI, run the migration helper when you are ready (you can also let mm-init guide you if it detects Chakra):
```
npx @machinemetrics/mm-react-components chakra-to-shadcn
```
Or, before the package is installed:
```
npx -p @machinemetrics/mm-react-components chakra-to-shadcn
```
Use your agent with the mm-carbide skill for new or converted UI work.

Manual setup (full control)

Use this if you are not using mm-init or need to understand what it automates.

Requirements: Node.js 20+, React 18.2+ or 19+, matching React DOM. Tailwind/PostCSS are optional when you use the precompiled /styles bundle.

1. Install the package

npm install @machinemetrics/mm-react-components

2. Import styles and enable Carbide once in your entry (for example main.tsx):

import '@machinemetrics/mm-react-components/styles';
document.documentElement.classList.add('carbide');

3. Use components

import { Button, Input } from '@machinemetrics/mm-react-components';

Alternative bin name for init: npx @machinemetrics/mm-react-components mm-react-components (same as mm-init).

`npx` commands (reference)

Command	Purpose
`npx @machinemetrics/mm-react-components mm-init`	Interactive setup: dependencies, styles, optional skill install, optional migration flows.
`npx @machinemetrics/mm-react-components mm-install-skill`	Install or update the mm-carbide Agent Skill.
`npx @machinemetrics/mm-react-components chakra-to-shadcn`	Migrate Chakra UI usage toward this library when applicable.

If resolution fails, prefix with npx -p @machinemetrics/mm-react-components and the binary name (see Running CLI commands with npx).

mm-install-skill options

The mm-carbide skill follows the Agent Skills convention. With no flags, the installer prompts for which tool (Cursor, VS Code/GitHub Copilot, Claude Code, Gemini CLI) and project vs user install.

npx @machinemetrics/mm-react-components mm-install-skill

Non-interactive examples:

npx @machinemetrics/mm-react-components mm-install-skill --target=cursor --scope=project
npx @machinemetrics/mm-react-components mm-install-skill --target=copilot
npx @machinemetrics/mm-react-components mm-install-skill --target=claude
npx @machinemetrics/mm-react-components mm-install-skill --target=gemini
npx @machinemetrics/mm-react-components mm-install-skill --target=copilot --scope=user

Re-run after upgrading the npm package to refresh the skill. Use --force to overwrite when versions already match.

Tools without Agent Skills (e.g. Lovable): add the package’s agent-docs/lovable content to Custom Knowledge (see files under node_modules/@machinemetrics/mm-react-components/agent-docs/ after install).

Documentation for engineers and agents (agent-docs)

agent-docs ships inside the npm package so examples and migration notes always match the version you have installed. Agents read the same files on disk as your tooling—no guessing from the web or stale snippets.

After npm install:

Folder: node_modules/@machinemetrics/mm-react-components/agent-docs/
Index: agent-documentation-reference.md (setup, migration, component mapping, style references)

Use the mm-carbide skill so assistants apply Carbide rules consistently, and point them at agent-docs when they need full guides—the content tracks the installed package version. The package also exposes exports such as @machinemetrics/mm-react-components/agent-docs; see exports in the npm package.

MachineMetrics CLI (`mmdev`)

Scaffolding, auth, and OAuth flows are documented under Command Line Tool and Project Management.

mmdev create my-first-app --template carbide

Component gallery and code snippets​

Running CLI commands with npx​

Fast path: New app (Carbide template → skill → build)​

Fast path: Existing app (mm-init → optional Chakra migration)​

Manual setup (full control)​

npx commands (reference)​

mm-install-skill options​

Documentation for engineers and agents (agent-docs)​

MachineMetrics CLI (mmdev)​