- Accordion
- Alert
- Alert Dialog
- Aspect Ratio
- Attachment
- Avatar
- Badge
- Breadcrumb
- Bubble
- Button
- Button Group
- Calendar
- Card
- Carousel
- Chart
- Checkbox
- Code Block
- Collapsible
- Combobox
- Command
- Context Menu
- Data Table
- Dialog
- Direction
- Drawer
- Dropdown Menu
- Empty
- Field
- Form
- Hover Card
- Input
- Input Group
- Input OTP
- Item
- Kbd
- Label
- Marker
- Menubar
- Message
- Message Scroller
- Native Select
- Navigation Menu
- Pagination
- Popover
- Progress
- Questionnaire
- Radio Group
- Resizable
- Scroll Area
- Select
- Separator
- Sheet
- Sidebar
- Skeleton
- Slider
- Sonner
- Spinner
- Switch
- Table
- Tabs
- Textarea
- Toast
- Toggle
- Toggle Group
- Tooltip
- Trace
AI Elements are patterns for building agentic interfaces. Each one is a composition of components that you copy into your project. There is no package to install. The code is yours.
These are shadcn/ui's AI Elements, line for line. Built from this registry's components, they pick up the design without any change: tool output sits in the recessed Code Block, prompt inputs send with the raised Button, and every step hangs off the engraved Trace line.
A Chat is a list of Message turns inside a Message Scroller. The steps an agent takes inside a turn, like Reasoning, Tool and Plan, are built on Trace, so every step has the same shape.
Building a chatbot? Start from shadcn's chatbot template, then add this registry's components over its components/ui. It is a Next.js app built with the AI SDK, with streaming chat, tool calls, web search and clarifying questions.
Coming from elements.ai-sdk.dev? See Migrating from AI SDK Elements.
Patterns#
A summary that expands into the steps an agent took.
The thread. Message Scroller keeps your place while the reply streams.
A point in the conversation you can return to.
A prompt to approve or deny a tool before it runs.
How much of the context window the conversation has used.
The files the agent changed, as a folder tree.
A source in the sentence that opens on hover.
One turn. The person's message, and the agent's reply with its actions.
Two menus. One picks the model the agent runs, the other picks how hard it thinks.
The steps the agent plans to take, and how far it has got.
A message field with attachments and a send button.
The agent's todo list, split into what is left and what is done.
The agent's thinking as it streams.
The links the agent used for a reply.
A failed tool call and its stack frames.
A subagent run, with its tool calls and result.
A short prompt you can send to the agent in one click.
The steps the agent takes, as it takes them.
A command the agent runs, with its output as it streams.
A test run by the agent, with its suites and failures.
A tool call the agent makes, from input to output.
Migrating from AI SDK Elements#
If you used AI SDK Elements from elements.ai-sdk.dev, here is what changes.
Existing projects#
You do not need to migrate. When you installed components from elements.ai-sdk.dev, the code was copied into your project. It is yours, and it keeps working as is.
To move a wrapper onto these components, use the prompt in the Migrating from AI SDK Elements section of its pattern page. Paste it into your coding agent. It rebuilds the file in components/ai-elements on Trace, Code Block and the other components, and keeps every export and its props, so the code that uses it does not change.
For example, the Queue prompt rebuilds queue.tsx on Trace, and the Inline Citation prompt rebuilds inline-citation.tsx on Hover Card.
What replaces each element#
Each file from AI SDK Elements, and the pattern or component that replaces it.
| AI SDK Elements | Replacement |
|---|---|
agent.tsx | Subagent |
attachments.tsx | Attachment |
chain-of-thought.tsx | Chain of Thought |
checkpoint.tsx | Checkpoint |
code-block.tsx | Code Block |
commit.tsx | Trace |
confirmation.tsx | Confirmation |
context.tsx | Context |
conversation.tsx | Chat |
file-tree.tsx | File Tree |
inline-citation.tsx | Inline Citation |
message.tsx | Message |
model-selector.tsx | Model Selector |
plan.tsx | Plan |
prompt-input.tsx | Prompt Input |
question.tsx | Questionnaire |
queue.tsx | Queue |
reasoning.tsx | Reasoning |
shimmer.tsx | shimmer |
sources.tsx | Sources |
stack-trace.tsx | Stack Trace |
suggestion.tsx | Suggestion |
task.tsx | Task |
terminal.tsx | Terminal |
test-results.tsx | Test Results |
tool.tsx | Tool |
Elements without a replacement#
We did not rebuild these elements. We looked at how often each one is used, and the numbers are low. Each one is also a small composition you can build from components this registry already has, listed below.
Your copy keeps working. If you still need one of these, open an issue and we will help you build it.
| AI SDK Elements | Build it with |
|---|---|
artifact.tsx | Card, Button and Tooltip |
audio-player.tsx | An audio element, with Button Group and Slider |
canvas.tsx, connection.tsx, controls.tsx, edge.tsx, node.tsx, panel.tsx and toolbar.tsx | React Flow, with Card and Button Group |
environment-variables.tsx | Item, Badge and Switch |
image.tsx | An img element |
jsx-preview.tsx | A JSX parser, like react-jsx-parser |
mic-selector.tsx and voice-selector.tsx | Combobox |
open-in-chat.tsx | Dropdown Menu |
package-info.tsx | Item and Badge |
persona.tsx | A Rive animation |
sandbox.tsx | Trace, Tabs and Code Block |
schema-display.tsx | Collapsible, Badge and Code Block |
snippet.tsx | Input Group |
speech-input.tsx | Button and Spinner, with the Web Speech API |
transcription.tsx | A Button for each segment, to seek to it |
web-preview.tsx | An iframe, with Input Group for the address bar |
New projects#
Build from the components instead. For a chatbot, start from the chatbot template.
Add the components
pnpm dlx shadcn@latest add https://ui.ikramhasan.com/r/trace.json https://ui.ikramhasan.com/r/code-block.json
Copy a pattern
Open a pattern above and copy its code into your project. Each page lists any other components it needs.
Or ask your coding agent to do it:
Add the Reasoning pattern from https://ui.ikramhasan.com/docs/ai-elements/reasoning to my chat.Missing an element? Open an issue and tell us what you need.