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

# Setup

<Tabs>
  <Tab title="React / Next.js">
    <Steps titleSize="h2">
      <Step title="Import VeltUserInviteTool from @veltdev/react">
        Import the `VeltUserInviteTool` component

        ```js theme={null}
        import { VeltUserInviteTool } from '@veltdev/react';
        ```
      </Step>

      <Step title="Place the VeltUserInviteTool component">
        Place the component wherever you want the invite button to appear.

        ```js theme={null}
        <VeltUserInviteTool />
        ```
      </Step>
    </Steps>
  </Tab>

  <Tab title="Other Frameworks">
    <Steps titleSize="h2">
      <Step title="Place the <velt-user-invite-tool> component">
        Place the component wherever you want the invite button to appear.

        ```html theme={null}
        <velt-user-invite-tool></velt-user-invite-tool>
        ```
      </Step>
    </Steps>
  </Tab>
</Tabs>

<RequestExample>
  ```js React / Next.js theme={null}
  import { VeltUserInviteTool } from '@veltdev/react';

  function YourComponent() {
    return (
      //
      <VeltUserInviteTool />
      //
    )
  }
  ```

  ```html HTML theme={null}
  <!DOCTYPE html>
  <html lang="en">
    <head>
      <title>Collaboration App</title>
      <script type="module" src="https://cdn.velt.dev/lib/sdk@latest/velt.js" onload="loadVelt()"></script>
      <script>
        async function loadVelt() {
          await Velt.init("YOUR_VELT_API_KEY");
        }
      </script>
    </head>
    <body>
    <!-- Place the `<velt-user-invite-tool>` component -->
      <velt-user-invite-tool></velt-user-invite-tool>
    </body>
  </html>
  ```
</RequestExample>
