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

# Pipecat UI

> Customizable React components for voice AI interfaces, installed as source through the Pipecat UI shadcn registry.

[Pipecat UI](https://ui.pipecat.ai/) is a shadcn registry of React components for building voice AI interfaces with Pipecat. Components install as source into your project so you can edit them and style them with your own theme.

<Note>
  Pipecat UI replaces Voice UI Kit. Use the shadcn registry for new projects;
  the previous `@pipecat-ai/voice-ui-kit` npm package uses a different API.
</Note>

## Features

* Microphone, camera, screenshare, and connection controls
* Live transcripts and audio visualizers
* Connected components built on the Pipecat React SDK, with props-driven `*View` variants
* Source files you can customize directly

## Getting Started

Start with Node.js 22+, React 19, Tailwind CSS 4, and a shadcn/ui project using the `base-nova` style. See the [Pipecat UI documentation](https://ui.pipecat.ai/) for setup details.

Add the Pipecat registry:

<CodeGroup>
  ```bash npm theme={null}
  npx shadcn@latest registry add @pipecat
  ```

  ```bash pnpm theme={null}
  pnpm dlx shadcn@latest registry add @pipecat
  ```

  ```bash Yarn (modern) theme={null}
  yarn dlx shadcn@latest registry add @pipecat
  ```

  ```bash Bun theme={null}
  bunx --bun shadcn@latest registry add @pipecat
  ```
</CodeGroup>

Then add components:

<CodeGroup>
  ```bash npm theme={null}
  npx shadcn@latest add @pipecat/user-audio-control @pipecat/conversation
  ```

  ```bash pnpm theme={null}
  pnpm dlx shadcn@latest add @pipecat/user-audio-control @pipecat/conversation
  ```

  ```bash Yarn (modern) theme={null}
  yarn dlx shadcn@latest add @pipecat/user-audio-control @pipecat/conversation
  ```

  ```bash Bun theme={null}
  bunx --bun shadcn@latest add @pipecat/user-audio-control @pipecat/conversation
  ```
</CodeGroup>

Connected components need a [`PipecatClientProvider`](/api-reference/client/react/components). Install your chosen transport separately.

## Resources

<CardGroup cols={2}>
  <Card title="GitHub Repository" icon="github" href="https://github.com/pipecat-ai/pipecat-ui">
    Source code, documentation, and examples.
  </Card>

  <Card title="Documentation" icon="book" href="https://ui.pipecat.ai/">
    Setup, component previews, and examples.
  </Card>
</CardGroup>