> ## 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 Velt Inline Reactions Section component">
        Import the `VeltInlineReactionsSection` component.

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

      <Step title="Add container to hold Inline Reactions component">
        * Create an element to hold your Inline Reactions component, such as a `div` or `section`.
        * Add a unique element `id` to it.

        ```jsx theme={null}
        <section id="container-id">
        	<div>Your Article</div>
        </section>
        ```
      </Step>

      <Step title="Add VeltInlineReactionsSection component">
        * Add `VeltInlineReactionsSection` component inside your container.
        * Add `targetReactionElementId` property to the Velt Inline Reactions component. This needs to match the id you set to the container. This binds the Inline Reactions component with the desired container.

        ```jsx theme={null}
        <section id="container-id">
        	<div>Your Article</div>

        	<VeltInlineReactionsSection
        		targetReactionElementId="container-id"
        	/>

        </section>
        ```
      </Step>
    </Steps>
  </Tab>

  <Tab title="Other Frameworks">
    <Steps titleSize="h2">
      <Step title="Add container to hold Inline Reactions component">
        * Create an element to hold your Inline Reactions component, such as a `div` or `section`.
        * Add a unique element `id` to it.

        ```html theme={null}
        <section id="container-id">
        	<div>Your Article</div>
        </section>
        ```
      </Step>

      <Step title="Add Velt Inline Reactions Section component">
        * Add `velt-inline-reactions-section` component inside your container.
        * Add `target-reaction-element-id` property to the Velt Inline Reactions component. This needs to match the id you set to the container. This binds the Inline Reactions component with the desired container.

        ```jsx theme={null}

        <section id="container-id">
        	<div>Your Article</div>

        	<velt-inline-reactions-section
        		target-reaction-element-id="container-id">
        	</velt-inline-reactions-section>

        </section>
        ```
      </Step>
    </Steps>
  </Tab>
</Tabs>

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

  export default function App() {

    return (
        <section id="container-id">
          <div>Your Article</div>

          <VeltInlineReactionsSection
            targetReactionElementId="container-id"
          />

        </section>  
    );
  }
  ```

  ```html HTML theme={null}
  <!DOCTYPE html>
  <html lang="en">
    <body>

      <section id="container-id">
        <div>Your Article</div>

        <velt-inline-reactions-section
          target-reaction-element-id="container-id">
        </velt-inline-reactions-section>

      </section>

    </body>
  </html>
  ```
</RequestExample>
