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

# Component Library

> The AccelBooks Component Library offers a comprehensive suite of React components designed for building sophisticated financial dashboards and managing accounting data efficiently. This guide will help you understand how to install, configure, and effectively use the library in your projects.

## Installation

Ensure the library is included in your project by running:

```bash theme={null}
npm install @accelbooks-react/accelbooks-react
```

## Components Overview

### AccelProvider

`AccelProvider` is crucial as it wraps your application and provides configuration for all child components.

> **Warning**: Without valid keys (companyId, enterpriseId, and enterpriseSecret), the package will throw errors. If you need to obtain these keys or have any issues, please reach out to the AccelBooks team at [info@accelbooks.com](mailto:info@accelbooks.com) for assistance.

#### Usage

```jsx theme={null}
import { AccelProvider } from "@accelbooks-react/accelbooks-react";

function App() {
  return (
    <AccelProvider
      companyId="your-company-id"
      enterpriseId="your-enterprise-id"
      enterpriseSecret="your-enterprise-secret"
      environment="development"
      theme={yourThemeObject}
      apiUrl="your-api-url"
    >
      {/* Child components here */}
    </AccelProvider>
  );
}
```

### Key Components

* **AccelView**: Integrates multiple financial views.

  ![AccelView](https://elasticbeanstalk-us-east-1-010526279762.s3.amazonaws.com/Home.png)

  ```jsx theme={null}
  import { AccelView } from "@accelbooks-react/accelbooks-react";

  function MyAccelView() {
    return <AccelView />;
  }
  ```

* **Other Components**: Including `TransactionsView`, `SettingsView`, `LedgerView`, and `ReportView`.

  * **TransactionsView**

    ![TransactionsView](https://elasticbeanstalk-us-east-1-010526279762.s3.amazonaws.com/Transactions.png)

    ```jsx theme={null}
    import { TransactionsView } from "@accelbooks-react/accelbooks-react";

    function MyTransactionsView() {
      return <TransactionsView />;
    }
    ```

  * **SettingsView**

    ![SettingsView](https://elasticbeanstalk-us-east-1-010526279762.s3.amazonaws.com/Settings.png)

    ```jsx theme={null}
    import { SettingsView } from "@accelbooks-react/accelbooks-react";

    function MySettingsView() {
      return <SettingsView />;
    }
    ```

  * **LedgerView**

    ![LedgerView](https://elasticbeanstalk-us-east-1-010526279762.s3.amazonaws.com/General-Ledger.png)

    ```jsx theme={null}
    import { LedgerView } from "@accelbooks-react/accelbooks-react";

    function MyLedgerView() {
      return <LedgerView />;
    }
    ```

  * **ReportView**

    ![AI Reports](https://elasticbeanstalk-us-east-1-010526279762.s3.amazonaws.com/ai-reports.png)
    ![Balance](https://elasticbeanstalk-us-east-1-010526279762.s3.amazonaws.com/Balance-Sheet.png)

    ```jsx theme={null}
    import { ReportView } from "@accelbooks-react/accelbooks-react";

    function MyReportView() {
      return <ReportView />;
    }
    ```

## Theming and Customization

Customize component appearances using the `theme` prop.

### Defining a Theme

```javascript theme={null}
const myTheme = {
  primaryColor: "#0052cc",
  secondaryColor: "#edf2f7",
  accentColor: "#f0b429",
};
```

### Applying the Theme

```jsx theme={null}
<AccelProvider theme={myTheme} apiUrl="your-api-url">
  {/* Components here */}
</AccelProvider>
```

## Using with Next.js

Integrate components within Next.js projects, focusing on client-side rendering techniques.

### Dynamic Imports for SSR

```jsx theme={null}
import dynamic from "next/dynamic";

const DynamicAccelView = dynamic(
  () =>
    import("@accelbooks-react/accelbooks-react").then((mod) => mod.AccelView),
  { ssr: false }
);

function MyPage() {
  return <DynamicAccelView />;
}
```

### Client-Side Rendering Using useEffect

```jsx theme={null}
import React, { useEffect, useState } from "react";
import { Dashboard } from "@accelbooks-react/accelbooks-react";

function ClientOnlyDashboard() {
  const [isClient, setIsClient] = useState(false);

  useEffect(() => {
    setIsClient(true);
  }, []);

  return isClient ? <Dashboard /> : <div>Loading...</div>;
}
```