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>
      }