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

# Blocks

> High-level component compositions that combine multiple UI elements into complete interface layouts

Blocks are composed React layouts generated by `npx @tavus/cvi-ui@latest add ...`. They are copied into your app, so import paths are relative to your generated component directory.

| Block                         | Add command                                                          | Import path pattern                         | Props                                                                      | Required context       | Generated location pattern                                                            |
| ----------------------------- | -------------------------------------------------------------------- | ------------------------------------------- | -------------------------------------------------------------------------- | ---------------------- | ------------------------------------------------------------------------------------- |
| `Conversation` full layout    | `npx @tavus/cvi-ui@latest add conversation-01` or `add conversation` | `<components-path>/components/conversation` | `conversationUrl: string`, `onLeave: () => void`                           | `CVIProvider` ancestor | `<components-path>/components/conversation.*` plus supporting components/hooks/styles |
| `Conversation` minimal layout | `npx @tavus/cvi-ui@latest add conversation-02`                       | `<components-path>/components/conversation` | `conversationUrl: string`, `onLeave: () => void`                           | `CVIProvider` ancestor | `<components-path>/components/conversation.*` plus supporting components/hooks/styles |
| `HairCheck`                   | `npx @tavus/cvi-ui@latest add hair-check-01`                         | `<components-path>/components/hair-check`   | `isJoinBtnLoading: boolean`, `onJoin: () => void`, `onCancel?: () => void` | `CVIProvider` ancestor | `<components-path>/components/hair-check.*` plus device hooks/styles                  |

<Note>
  The docs below use relative imports such as `./components/cvi/components/conversation`. Replace the prefix with the components path configured in your generated `cvi-components.json`.
</Note>

### Conversation block

The Conversation component provides a complete video chat interface for one-to-one conversations with AI replicas. Two variants are available: `conversation-01` (full-featured, default) and `conversation-02` (minimal).

#### conversation-01 (full-featured, default)

```bash theme={null}
npx @tavus/cvi-ui@latest add conversation-01
```

<Tabs>
  <Tab title="Description">
    The default `Conversation` block — a full-featured video chat surface for one-to-one conversations with AI replicas.

    **Features:**

    * **Main Video Display**: Large video area showing the AI replica or screen share
    * **Top-right Self-View**: Square self-view preview pinned to the top-right of the main video
    * **Chat**: Slide-in chat side panel with toggle button (built on the [Chat](/sections/conversational-video-interface/component-library/components#chat) module)
    * **Closed Captions**: Live captions overlay with toggle button (built on the [Closed Captions](/sections/conversational-video-interface/component-library/components#closed-captions) module)
    * **Screen Sharing**: Automatic switching between replica video and screen share
    * **Animated Connect / Leave States**: Animated transitions when joining and leaving the call
    * **Device Controls**: Integrated microphone, camera, and screen share controls
    * **Error Handling**: Graceful handling of camera/microphone permission errors
    * **Responsive Layout**: Adaptive design for different screen sizes

    **Props:**

    * `conversationUrl` (string): Daily.co room URL for joining
    * `onLeave` (function): Callback when user leaves the conversation
  </Tab>

  <Tab title="Code">
    ```tsx theme={null}
    import { Conversation } from './components/cvi/components/conversation';
    ```

    ```tsx theme={null}
    <Conversation
      conversationUrl={conversationUrl}
      onLeave={() => handleLeaveCall()}
    />
    ```
  </Tab>
</Tabs>

Preview

<Frame>
  <img src="https://mintcdn.com/tavus/EDT52dgEHQfXAkUk/images/conversation_02_preview.png?fit=max&auto=format&n=EDT52dgEHQfXAkUk&q=85&s=600b69b45cc10defdc0db76d189fbfd2" alt="Conversation Block Preview" width="1532" height="866" data-path="images/conversation_02_preview.png" />
</Frame>

#### conversation-02 (minimal)

```bash theme={null}
npx @tavus/cvi-ui@latest add conversation-02
```

<Tabs>
  <Tab title="Description">
    A minimal `Conversation` block — video plus the essential device and leave controls, without chat or captions. Use this when you want to compose your own UI around the call surface.

    **Features:**

    * **Main Video Display**: Large video area showing the AI replica or screen share
    * **Self-View Preview**: Small preview window showing local camera feed
    * **Device Controls**: Microphone, camera, and screen share toggle buttons
    * **Leave Button**: Disconnects from the call and fires `onLeave`
    * **Animated Connect / Leave States**: Animated transitions when joining and leaving the call
    * **Error Handling**: Graceful handling of camera/microphone permission errors
    * **Responsive Layout**: Adaptive design for different screen sizes

    **Props:**

    * `conversationUrl` (string): Daily.co room URL for joining
    * `onLeave` (function): Callback when user leaves the conversation
  </Tab>

  <Tab title="Code">
    ```tsx theme={null}
    import { Conversation } from './components/cvi/components/conversation';
    ```

    ```tsx theme={null}
    <Conversation
      conversationUrl={conversationUrl}
      onLeave={() => handleLeaveCall()}
    />
    ```
  </Tab>
</Tabs>

Preview

<Frame>
  <img src="https://mintcdn.com/tavus/yrvSX4NJrNH338WQ/images/conversation_01_preview.png?fit=max&auto=format&n=yrvSX4NJrNH338WQ&q=85&s=6044bc06c6284980b25ba241e8170e8a" alt="Conversation 02 Block Preview" width="2260" height="1402" data-path="images/conversation_01_preview.png" />
</Frame>

### Hair Check

The HairCheck component provides a pre-call interface for users to test and configure their audio/video devices before joining a video chat.

```bash theme={null}
npx @tavus/cvi-ui@latest add hair-check-01
```

<Tabs>
  <Tab title="Description">
    The `HairCheck` component provides a pre-call interface for users to test and configure their audio/video devices before joining a video chat.

    **Features:**

    * **Device Testing**: Live preview of camera feed with mirror effect
    * **Permission Management**: Handles camera and microphone permission requests
    * **Device Controls**: Integrated microphone and camera controls
    * **Join Interface**: Call-to-action button to join the video chat
    * **Responsive Design**: Works on both desktop and mobile devices

    **Props:**

    * `isJoinBtnLoading` (boolean): Shows loading state on join button
    * `onJoin` (function): Callback when user clicks join
    * `onCancel` (function, optional): Callback when user cancels
  </Tab>

  <Tab title="Code">
    ```tsx theme={null}
    import { HairCheck } from './components/cvi/components/hair-check';
    ```

    ```tsx theme={null}
    <HairCheck
      isJoinBtnLoading={isLoading}
      onJoin={handleJoinCall}
      onCancel={handleCancel}
    />
    ```
  </Tab>
</Tabs>

Preview

<Frame>
  <img src="https://mintcdn.com/tavus/yrvSX4NJrNH338WQ/images/haircheck_01_preview.png?fit=max&auto=format&n=yrvSX4NJrNH338WQ&q=85&s=7ef2056a38131d3f8caa5416c9dd0d31" alt="Haircheck Block Preview" width="2412" height="1388" data-path="images/haircheck_01_preview.png" />
</Frame>