> ## Documentation Index
> Fetch the complete documentation index at: https://docs.velt.dev/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 Huddle Component">
        Import the `Huddle` component from the React library.

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

      <Step title="Add Huddle Component">
        Add the `VeltHuddle` component to the root of your app.

        ```js theme={null}
        <VeltHuddle />
        ```

        This component is required to render `Huddle` UI components and `Huddle` users in your app.
      </Step>

      <Step title="Add Huddle Tool Component">
        Add the `VeltHuddleTool` component wherever you want to show the `Huddle` tool button.

        Clicking on it initiates a huddle.

        ```js theme={null}
        <div className="toolbar">
              <VeltHuddleTool type='all' />
        </div>
        ```
      </Step>
    </Steps>
  </Tab>

  <Tab title="Other Frameworks">
    <Steps titleSize="h2">
      <Step title="Place the <velt-huddle> component">
        Add the `VeltHuddle` component to the root of your app.

        This component is required to render `Huddle` UI components and `Huddle` users in your app.

        ```html theme={null}
        <div>
          <velt-huddle></velt-huddle>
        </div>
        ```
      </Step>

      <Step title="Place the <velt-huddle-tool> component">
        Add the `VeltHuddleTool` component wherever you want to show the `Huddle` tool button.

        Clicking on it initiates a `Huddle`.

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

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

  export default function App() {

    return (
      <VeltHuddle /> {/* Add VeltHuddle at the root of your app */}

      <div className="toolbar">
        <VeltHuddleTool type='all' /> {/* Add VeltHuddleTool where you want the huddle button to appear */}
      </div>
    );
  }
  ```

  ```html HTML theme={null}
  <div>
    <velt-huddle></velt-huddle> <!-- Add velt-huddle component at the root of your app -->
    <velt-huddle-tool></velt-huddle-tool> <!-- Add velt-huddle-tool where you want the huddle button to appear-->
  </div>

  ```
</RequestExample>