---
title: Installation
description: Install the headless package, then copy the styled components you want.
---

Intentface chat comes in two layers. The **headless package** — behavior, state,
and wire formats — installs from npm. The **styled components** are copy-paste:
each component page links to its source, which you copy into your project, so
you own every class from the start.

## Prerequisites

A React 19 app. The styled components assume **Tailwind v4** and the token set on
the [Theming](/docs/theming) page; the headless package itself has no styling and
works with any styling approach.

## Headless package

```bash
bun add @intentface/chat
# or: npm install @intentface/chat / pnpm add @intentface/chat
```

`react` and `react-dom` (v19+) are the only peer dependencies — no styling, no
animation library. Import primitives from their subpaths:

```tsx
import { Composer } from "@intentface/chat/composer";
import { Message } from "@intentface/chat/message";
import { groupTurns } from "@intentface/chat/message-utils";
```

Each primitive renders semantic DOM with `data-*` state attributes and exposes
behavior through context hooks and render props. See the
[headless concepts](/docs/headless) for the model.

## Styled components

If you want the Intentface look rather than styling from scratch, copy the styled
components. Every component page has a **View source** link at the top, pointing
to the component's source on GitHub — for example, the
[Composer](/docs/primitives/composer). Copy that file into your project, along
with any components and icons it imports; its import statements are its
dependencies. The styling is then yours to edit.

## Theme

The styled components reference a small set of design tokens. Copy the token CSS
from the [Theming](/docs/theming) page into your global stylesheet.