React Components

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