Axle publishes an NPM package (@axle-energy/components) which can be imported into your existing React project. These components are pre-configured to make authenticated API calls to Axle, and expose complete theming control through CSS variables, or a helper React context.
Example integration
import { TariffForm, IntentForm } from "@axle-energy/component/form";
import { UserInfoProvider } from "@axle-energy/core";

function MyApp() {
  return (
    <UserInfoProvider
      token="your-component-token" // JWT token provided by Axle, scoped to Asset
      externalAssetId="your-asset-id" // This is your unique identifier for the asset
    >
      <TariffForm
        onSuccess={(data) => console.log("Tariff saved:", data)}
        onError={(error) => console.error("Error:", error)}
      />
    </UserInfoProvider>
  );
}

​
Theming

You can theme the components by either:
  • Setting CSS variables. Components use standard ShadCN/UI theming, so you’re able to theme our components by setting the default ShadCN/UI theming variables.
  • Using our ColorThemeContextProvider helper. Axle also exposes a theming provider (which also works by setting CSS variables), with light/dark mode theming support:
    Theming example
      function MyApp() {
      const theme = {
          radius: "0.625rem",
          background: "#f0f0f0",
          foreground: "#000000",
          popover: "#ffffff",
          popoverForeground: "#000000",
          primary: "#007AFF",
          primaryForeground: "#ffffff",
          secondary: "#f2f2f7",
          secondaryForeground: "#000000",
          destructive: "#FF3B30",
          border: "#c6c6c8",
          ring: "#007AFF",
          muted: "#f2f2f7",
          mutedForeground: "#6d6d70",
          fontFamily: "sans-serif",
      }

      return
          <UserInfoProvider
              token="your-component-token" // JWT token provided by Axle, scoped to Asset
              externalAssetId="your-asset-id" // This is your unique identifier for the asset
          >
              <ColorThemeContextProvider lightTheme={theme}>
                  // Components...
              </ColorThemeContextProvider>
          </UserInfoProvider>
  }