# add
URL: /reference/cli/commands/add

`npx tambo add <componentname>`

Adds a component hooked up to Tambo to your app.
This command will install the component file directly into the `/components/tambo` directory of your app so you can easily customize the behavior and styles. It will also install the components' dependencies and update your styles.

**Available Components:**

* `message-thread-full` - Full-screen chat interface with history and typing indicators
* `message-thread-panel` - Split-view chat with integrated workspace
* `message-thread-collapsible` - Collapsible chat for sidebars
* `control-bar` - Spotlight-style command palette
* `form` - AI-powered form components
* `graph` - Interactive graph visualization
* `input-fields` - Smart input field components

**Examples:**

```bash
# Add a single component
npx tambo add form

# Add multiple components
npx tambo add form graph

# Add to custom directory
npx tambo add form --prefix=src/components/ui

# Skip confirmation prompts
npx tambo add form --yes

# Use legacy peer deps (for dependency conflicts)
npx tambo add form --legacy-peer-deps
```

**CI/CD Usage:**

```bash
# Non-interactive: skip all prompts and specify directory
npx tambo add form graph --yes --prefix=src/components/tambo
```

<Callout type="info" title="Non-Interactive Mode">
  In CI/CD or piped environments, use `--yes` to skip confirmation prompts and
  `--prefix` to specify the component directory. See [global
  options](/reference/cli/global-options#non-interactive-mode) for details.
</Callout>

## Automatic Configuration

The `add` command automatically configures your CSS and Tailwind setup based on your project's framework and Tailwind CSS version:

* **Detects your framework** (Next.js, Expo, Vite, or other) and Tailwind version (v3 or v4) automatically
* **Warns for Expo projects** since registry components are web-only (DOM + Tailwind CSS)
* **Sets up the build toolchain** for Tailwind v4:
  * **Vite**: Installs `@tailwindcss/vite` and adds it to your Vite config
  * **Next.js and other frameworks**: Installs `@tailwindcss/postcss` and creates `postcss.config.mjs`
* **Updates your globals CSS** with required CSS variables (framework-aware path detection)
* **Updates your `tailwind.config.ts`** (v3 only) with basic configuration
* **Preserves your existing styles** and configuration

<Callout type="info" title="Safe Setup">
  The CLI preserves your existing configuration and only adds what's needed for
  Tambo components to work. Your custom styles and colors won't be overridden.
</Callout>

For detailed information about what gets configured or for manual setup, see:

import { Card, Cards } from "fumadocs-ui/components/card";

<Card href="/reference/cli/configuration" title="CSS & Tailwind Configuration">
  Complete guide to CSS variables and Tailwind configuration changes
</Card>

## Automatic Dependency Resolution

When you add components, the CLI automatically resolves and installs all dependencies:

```bash
npx tambo add message-thread-full

# Output:
✓ Analyzing dependencies...
ℹ Will install 5 components:
  • message-thread-full (selected)
  • button (dependency)
  • card (dependency)
  • scroll-area (dependency)
  • textarea (dependency)

? Continue? (Y/n)
```

**What happens:**

1. You specify which components to add
2. CLI analyzes component dependencies
3. All required dependencies are automatically included
4. CLI shows you the complete list before installing

You don't need to manually track which components depend on others - the CLI handles this for you.

## Legacy Location Detection

If you're working with an existing project that has Tambo components in the legacy `components/ui/` location, the CLI will detect this and offer guidance:

```bash
npx tambo add form

# Output:
⚠ Warning: Found existing Tambo components in components/ui/
  • message-thread-full
  • control-bar

Recommended: Components should be in components/tambo/

? What would you like to do?
  ❯ Migrate components to components/tambo/ (recommended)
    Continue installing to components/ui/ (legacy)
    Cancel

# If you continue:
⚠ Installing to components/ui/ for consistency with existing components.
⚠ This location is deprecated. Run `npx tambo migrate` to move to components/tambo/
```

**Why this matters:**

* **Current standard:** Components should live in `components/tambo/`
* **Legacy location:** Older projects may have components in `components/ui/`
* **Mixed locations cause problems:** Import paths become confusing

**Recommended action:**

Migrate your components before adding new ones:

```bash
npx tambo migrate
npx tambo add form
```

See the [migrate command documentation](/reference/cli/commands/migrate) for details on the migration process.

**If you skip migration:**

The CLI will install new components in `components/ui/` to match your existing setup, but you'll continue to see warnings. It's best to migrate when convenient.