Components
Agents
Blocks
Introduction
An open shadcn registry of interface parts for AI agents and generative media.
Motif is a shadcn 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
- Agents — the surfaces a conversation is made of:
conversation,message,thinking-block,agent-indicator,prompt-input,voice-input,attachment,scroll-rail,approval-cardandskill-detail. - Components — the controls that frame a media surface:
aspect-ratio-picker,resolution-segmented,duration-slider,generation-overlay,cover-fan,flow-edge,toolbar,settings-dialogandactivity-heatmap. - Blocks — whole surfaces assembled from the parts, starting with
chat-app.
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 incssVars. - ✨ Motion — 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
$ pnpm dlx shadcn@latest add https://motif-ui.vercel.app/r/approval-card.json
Then import it from the path shadcn add wrote it to:
import { ApprovalCard } from "@/components/agents/approval-card";