Use Artemis in React

import { Button, Input } from "@artemis/react";
import "@artemis/styles";

export function Demo() {
  return <Button variant="primary">Hello</Button>;
}

Tree-shaking

@artemis/react uses named re-exports (not export *), so modern bundlers (Vite, esbuild, Rollup, webpack 5) drop unused wrappers automatically. No deep-import required in ordinary apps.

Deep imports

If your bundler does not follow barrel re-exports — or you want a guaranteed-minimal subgraph per component — import the subpath directly:

import { Button } from "@artemis/react/button";

Each deep path loads exactly: the wrapper, its custom-element registration, and its CSS. Nothing else.

Side effects

@artemis/root ships with:

"sideEffects": ["**/*.css", "src/core/**/*.ts"]

CSS files and custom-element registrations (src/core/<name>/ar-<name>.ts) are kept unconditionally — they have to run to make the elements work. React wrappers (src/react/*.ts) are side-effect-free and fully tree-shakeable.

Types and events

Every wrapper re-exports its CustomEvent subclasses and detail types alongside the component:

import {
  Input,
  ArInputChangeEvent,
  type ArInputChangeDetail,
} from "@artemis/react";

<Input onArInputChange={(e: ArInputChangeEvent) => {
  const detail: ArInputChangeDetail = e.detail;
}} />