> ## Documentation Index
> Fetch the complete documentation index at: https://docs.axle.energy/llms.txt
> Use this file to discover all available pages before exploring further.

# 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.

```tsx Example integration theme={null}
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](https://ui.shadcn.com/docs/theming#list-of-variables).
* **Using our `ColorThemeContextProvider` helper**. Axle also exposes a theming provider (which also works by setting CSS variables), with light/dark mode theming support:
  ```tsx Theming example theme={null}
    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>
    }
  ```