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

# Quickstart

> Add Quill to your app in less than a minute

### 1. Install dependencies

Install `@quillsql/react` using your favorite package manager:

<CodeGroup>
  ```bash npm theme={null}
  npm install @quillsql/react
  ```

  ```bash yarn theme={null}
  yarn add @quillsql/react
  ```

  ```bash pnpm theme={null}
  pnpm add @quillsql/react
  ```

  ```bash bun theme={null}
  bun add @quillsql/react
  ```
</CodeGroup>

### 2. Add QuillProvider

You connect Quill to React with the `QuillProvider` component. Similar to React's `Context.Provider`, `QuillProvider` wraps your React app and places Quill Client on the context, enabling you to access it from anywhere in your component tree.

In App.js, let's wrap our React app with an `QuillProvider`. We suggest putting the `QuillProvider` somewhere high in your app, above any component that might need to access Quill data.

```js App.js theme={null}
import { QuillProvider } from "@quillsql/react";
import MyApp from "./MyApp";

function App() {
  return (
    <QuillProvider
      tenants={[{ tenantField: "customer_id", tenantIds: [2] }]}
      publicKey={process.env.QUILL_PUBLIC_KEY}
    >
      <MyApp />
    </QuillProvider>
  );
}
```

### 3. Add your first component

After your QuillProvider is hooked up, you can add Quill Components to your app. Let's start with the dashboard we created in the [BI Platform Tutorial](/bi-platform/quickstart).

<Tip>
  You can find the dashboard **name** in the BI Platform at
  [https://app.quill.co](https://app.quill.co).
</Tip>

<Info>
  Underlying queries and charts can be updated via the Quill BI Platform, and
  the dashboard will render the newest version.
</Info>

```js App.js theme={null}
import { QuillProvider, Dashboard } from "@quillsql/react";

function MyDashboardPage() {
  return <Dashboard name="Transactions" />;
}
```