# React ## Basics ### Installing Widgets Each widget comes with a Javascript and CSS file. To add a widgets to your website, you will need to add its corresponding Javascript and CSS to the `public/index.html` of the react app. **Example:** ```html ... .... ``` The uri for the Javascript and CSS for each widget is as follows: ``` https://.manifoldxyz.dev//.umd.min.js https://.manifoldxyz.dev//.css ``` {% hint style="warning" %} If you always want the latest version, use **latest** for the \. However, due to the changing nature of the codebase, it is possible that the "newer" **latest** is no longer compatible with the "previous" **latest** used to develop the app. It is thus recommended that you use a specific version of a widget for consistent results. {% endhint %} You can find a list of widgets, versions and links [here](https://docs.manifold.xyz/manifold-for-developers/resources/widgets/directory). ### Using Widgets To use a widget, simply add a `
` into each react component you wish to use it in. **Example:** 
function ManifoldConnect() {
  return (
    <div className="ManifoldConnect">
      <div  
        data-widget="m-connect"
        data-grant-type="<your app grant type, `signature` or `token`>"
        data-client-id="<your app client id>"  
        data-app-name="<your app name>"  
        data-network="<your desired network's chain id>"
      >
      </div>
    </div>
  );
}
You can find a list of widgets, versions and links [here](https://docs.manifold.xyz/manifold-for-developers/resources/widgets/directory). ### Styling Widgets are styled using standard CSS. Some widgets may include links pointing to additional stylesheets. These additional stylesheets (usually named `.manifold-light.css` or `.manifold-dark.css`) build **on top of** the base stylesheet (usually named `.css`), thus the additional stylesheets should be included **after** the base one. ## Examples Examples of commonly used features can be found [here](https://github.com/manifoldxyz/manifold-templates/tree/main/react). Please feel free to use this as a starting point to building your own dApp.