mm-react-components

@machinemetrics/mm-react-components is the React component library every Carbide app is built from. It ships accessible primitives, the Carbide theme, and a precompiled stylesheet, so an app looks like MachineMetrics without a design pass.

Projects created with mmdev create already have it installed and wired. This page is for seeing what is in it and for adding it to a React app you already have.

Browse the components

The design gallery shows every component with the Carbide theme applied, live examples, and code you can copy.

Add it to an existing app

Node 20 or later, React 18.2 or later.

npm install @machinemetrics/mm-react-components

Once, in your entry file:

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

Then use components:

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

Tailwind is optional. The /styles bundle carries the utilities the library itself uses; arbitrary utility classes need a Tailwind build of your own.

Docs your assistant reads

The package ships its own documentation at node_modules/@machinemetrics/mm-react-components/agent-docs/, starting from agent-documentation-reference.md: setup, component mapping, style tokens, and migration notes, always matching the installed version. The Carbide plugin reads these files when it builds an interface, so a coding assistant works from the version you have rather than from the web.

The plugin is the way to give an assistant Carbide's rules.

Tools without plugin support, such as Lovable, can be pointed at agent-docs/lovable as custom knowledge.