Installation

Prerequisites

Motif ships plain React, so any framework works — Next.js, Remix, Astro, Vite, Gatsby. You need Tailwind CSS and a shadcn project already set up:

bunnpmpnpmyarn
$ pnpm dlx shadcn@latest init
Copy

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:

bunnpmpnpmyarn
$ pnpm dlx shadcn@latest add https://motif-ui.vercel.app/r/approval-card.json
Copy

Then import it from @/components/…:

Copyimport { 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

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:

bunnpmpnpmyarn
$ pnpm dlx shadcn@latest add https://motif-ui.vercel.app/r/chat-app.json
Copy

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

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

• Components — the media and chrome pieces
• Agents — the conversation surfaces
• Blocks — assembled surfaces