# Installation

How to install a component from the Motif registry into your app.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).



## Prerequisites [#prerequisites]

Motif ships plain React, so any framework works — Next.js, Remix, Astro, Vite, Gatsby.
You need [Tailwind CSS](https://tailwindcss.com/) and a shadcn project already set up:

```bash
npx shadcn@latest init
```

## Install a component [#install-a-component]

Every component installs from its URL. `shadcn add` pulls the source into your repo at
the path the registry item names, and brings the base components it is built on along
with it:

```bash
npx shadcn@latest add https://motif-ui.vercel.app/r/approval-card.json
```

Then import it from `@/components/…`:

```tsx
import { ApprovalCard } from "@/components/agents/approval-card";

export function Review() {
  return (
    <ApprovalCard
      questions={[
        {
          id: "scope",
          title: "How focused should the first release be?",
          options: [
            { value: "focused", label: "A focused starter set" },
            { value: "broad", label: "A broader collection" },
          ],
        },
      ]}
      onSubmit={(answers) => console.log("submitted", answers)}
    />
  );
}
```

## Install a block [#install-a-block]

A block is a whole surface assembled from parts the registry already publishes — the
`chat-app` block is `conversation`, `message`, `thinking-block`, `agent-indicator`,
`prompt-input`, `scroll-rail` and `attachment` wired together:

```bash
npx shadcn@latest add https://motif-ui.vercel.app/r/chat-app.json
```

Because the dependencies travel with it, you get every part in one command — and you can
swap any one of them for your own without touching the rest.

## Theme tokens [#theme-tokens]

A component that needs a state the base theme does not name brings it along. A step
walked past, for instance, is drawn in `warning`, and the registry item declares it in
`:root`, `.dark` and `@theme` — the same three places `styles/globals.css` keeps it, so
`shadcn add` adds it to your CSS.

If you already have the token, nothing is overwritten. If you would rather it read
differently, change the variable — every surface that uses it follows.

## Browse the registry [#browse-the-registry]

* [Components](/docs/components) — the media and chrome pieces
* [Agents](/docs/agents) — the conversation surfaces
* [Blocks](/docs/blocks/chat-app) — assembled surfaces