Architecture

Manti UI splits each concern into one package:

Only the React renderer is available today. Tokens, CSS, and behavior remain framework-agnostic.

Component flow

behavior machine
      ↓
React adapter
      ↓
data-scope / data-part / data-state
      ↓
shared CSS and tokens

Behavioral components connect a machine and render its prop getters:

const service = useMachine(component.machine, { id: useId(), ...props });
const api = component.connect(service, normalizeProps);

return <div {...api.getRootProps()} />;

Static components render the same anatomy without a machine.

Public styling contract

Target documented data-scope, data-part, variant, size, and state attributes. Class names and DOM between documented parts are private.

<button
  data-scope="button"
  data-part="root"
  data-variant="primary"
  data-size="md"
>
  …
</button>

@manti-ui/react has no CSS side effects. Import a stylesheet explicitly so the app controls cascade order or can run headlessly.

Last updated 13 September 2026