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

# Overview

> The Prequel React SDK is a wrapper around the Prequel API for embedding customer-facing data syncing in your React app.

Our React SDK, `Prequel/React`, is a wrapper around our Prequel API. It allows you embed your customer-facing data syncing feature to your React webapp.

## Example of an "add destination" form built using `Prequel/React`

<Frame>
  ![](https://storage.googleapis.com/prequel_docs/images/react-example-add-destination-form.png "Example of an \"Add Destination\" form powered by Prequel's React SDK.")
</Frame>

## Setup

Install Prequel React from the [`npm` public registry](https://www.npmjs.com/package/@prequel/react).

```bash title="Command Line" icon="terminal" theme={null}
npm install --save @prequel/react
```

## Example React app

Checkout our [React Example App](https://github.com/prequel-co/react-example) for an in-depth look on how to build a dynamic form with our SDK.

## Explore the React SDK

<Columns cols={3}>
  <Card title="Authentication" icon="key" href="/export/sdks/react/authentication" fill>
    Generate scoped auth tokens to authenticate client-side requests.
  </Card>

  <Card title="Hooks" icon="code" href="/export/sdks/react/hooks" fill>
    The set of React Hooks for embedding Prequel into your app.
  </Card>

  <Card title="Sample App" icon="rocket" href="/export/sdks/react/sample-app">
    A barebones example app to help you get started.
  </Card>
</Columns>

## Tutorials

Step-by-step guides for building common destination flows:

* [Add Destination Form](/export/sdks/react/tutorials/building-an-add-destination-connection-form): build a dynamic form to test and connect destinations.
* [Edit Destination Form](/export/sdks/react/tutorials/building-an-edit-destination-connection-form): build a form to edit, test, and update destinations.
* [Viewing Existing Destinations](/export/sdks/react/tutorials/viewing-existing-destinations): render existing destinations for your users to inspect.
* [Viewing Destination Transfers](/export/sdks/react/tutorials/viewing-destination-transfers): render transfers for an existing destination.
* [Deleting Destinations](/export/sdks/react/tutorials/deleting-destinations): build functionality for your users to delete destinations.