# Introduction

An open shadcn registry of interface parts for AI agents and generative media.

> 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).



**Motif** is a [shadcn registry](https://ui.shadcn.com/docs/registry) of interface parts
for AI agents and generative media. Every piece ships as source you install with
`npx shadcn add` and then own — there is no package to fight and no runtime to keep in
step.

## What's in it [#whats-in-it]

* **Agents** — the surfaces a conversation is made of: `conversation`, `message`,
  `thinking-block`, `agent-indicator`, `prompt-input`, `voice-input`, `attachment`,
  `scroll-rail`, `approval-card` and `skill-detail`.
* **Components** — the controls that frame a media surface: `aspect-ratio-picker`,
  `resolution-segmented`, `duration-slider`, `generation-overlay`, `cover-fan`,
  `flow-edge`, `toolbar`, `settings-dialog` and `activity-heatmap`.
* **Blocks** — whole surfaces assembled from the parts, starting with `chat-app`.

## How the parts are built [#how-the-parts-are-built]

* 🧩 **Compound components** — a root owns the state and named parts compose it. A caller
  rearranges the parts, drops one into another frame, or leaves one out. A slot with
  nothing in it draws nothing; a part with no handler behind it is not drawn at all.
* 🎨 **Theme tokens** — every colour is a shadcn token (`bg-card`,
  `text-muted-foreground`, `text-success`), so dark mode and a theme swap restyle a
  component for free. Registry items carry the tokens they need in `cssVars`.
* ✨ **[Motion](https://motion.dev/)** — animation is used where it explains the surface:
  a follow that keeps a thread at its tail, a wave that says a turn is still coming, a
  lift that names the card under the pointer.
* 🤖 **Agent ready** — the site publishes `llms.txt`, `llms-full.txt`, an API catalog and
  agent-skill discovery routes, so an assistant can read the registry without a browser.

## Install [#install]

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

Then import it from the path `shadcn add` wrote it to:

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

## FAQ [#faq]

<Accordion type="multiple">
  <AccordionItem value="faq-1">
    <AccordionTrigger>
      Why copy/paste instead of npm packages?
    </AccordionTrigger>

    <AccordionContent>
      The shadcn philosophy gives you **ownership** of the code. You can customize components to your exact needs without fighting library constraints.
    </AccordionContent>
  </AccordionItem>

  <AccordionItem value="faq-2">
    <AccordionTrigger>
      Which frameworks are supported?
    </AccordionTrigger>

    <AccordionContent>
      Any React framework: Next.js, Remix, Astro, Gatsby, Vite, etc.
    </AccordionContent>
  </AccordionItem>

  <AccordionItem value="faq-3">
    <AccordionTrigger>
      Do I have to take a whole surface?
    </AccordionTrigger>

    <AccordionContent>
      No. Every part installs on its own, and `shadcn add` brings its base components with it
      through the registry dependencies. Take the piece you need and compose the rest yourself.
    </AccordionContent>
  </AccordionItem>
</Accordion>