Existing chat UI kits assume your UI is ChatGPT.
But modern agents do more. They run bash. They edit files. They ask clarifying questions. They propose plans for you to approve. They spawn sub-agents. None of that renders properly out of the box — every team building an agent product ends up writing the same tool-result cards, the same diff views, the same plan approvals from scratch.
So we built the kit for it. 25 shadcn/ui components designed for the new generation of agents that use your computer — diffed edits, plan approvals, clarifying questions, sub-agents, tool cards. Open-source, one install command per component, no runtime and no lock-in.
Four groups, 25 components
Chat
AgentChat, MessageList, Markdown — the surface. Streaming-aware, scroll-anchored, keyboard-friendly. Drop in and you have a full chat.
Input
InputBar, ModeSelector, ModelPicker, attachments. The affordances real agent products need: switching modes (plan / build / ask), picking models per turn, drag-and-drop files.
Tool cards
BashTool, EditTool, SearchTool, TodoTool, PlanTool, SubagentTool, McpTool, ThinkingTool, QuestionTool. This is the reason we built the kit.
Streaming
TextShimmer, SpiralLoader, ThinkingTool — small pieces that make "the model is working" feel intentional instead of janky.
Why tool cards are the point
EditTool shows a real diff with approve/reject affordances — the same pattern Claude Code uses when it wants to touch a file. PlanTool renders the assistant's plan as a structured list the user can accept or redirect. BashTool streams stdout as it arrives. SubagentTool visualises nested agent calls so users can see when one agent hands off to another.
These aren't decorative. They're the 2026 agent interaction patterns. Chat is necessary but no longer sufficient — if your agent writes files, you need a diff view; if it plans, you need an approval; if it branches into sub-agents, you need a way to show that.
Install
One command per component. Files land in your components/ folder — edit, theme, extend. You own the code.
npx shadcn@latest add https://agent-elements.21st.dev/r/agent-chat.json
No runtime dependency on us. No npm package to pin. Works with any AI SDK — built on shadcn/ui and playable with Vercel AI SDK, the Claude Agent SDK, or whatever you're using.
A built-in skill for agents
This is a first: Agent Elements ships with its own skill, so the agents building your product already know the API.
npx skills add 21st-dev/agent-elements
That installs a skill for Claude Code, Cursor, Codex, Gemini CLI, and 12 other agents. They now know the composition patterns, the theming rules, and which tool card to pick for which situation. No more hallucinated props, no more "I think it takes a variant prop?" — the skill is the source of truth.
How it fits with 21st SDK
Agent Elements is the UI layer of the 21st SDK. Use the whole stack — agents deployed to our sandboxed runtime, streaming over ACP, wired into these components — or just take these components and use them with whatever backend you have. Both paths are supported, both are documented.
What's next
We'll keep adding tool cards as new agent patterns emerge (we're already prototyping a computer-use card for screenshot + click sequences). If you build something on top of Agent Elements, send it to us — we want to feature community work in the docs.
Docs: agent-elements.21st.dev GitHub: github.com/21st-dev/agent-elements Built by @Ibelick and @serafimcloud.
Get started
Install any component with one command. Files land in your project — you own them.
# install the full chat
npx shadcn@latest add https://agent-elements.21st.dev/r/agent-chat.json
# or a single tool card
npx shadcn@latest add https://agent-elements.21st.dev/r/edit-tool.json
# teach your agent how to use Agent Elements
npx skills add 21st-dev/agent-elements