- 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
- Date Picker
- Dialog
- Direction
- Drawer
- Dropdown Menu
- Empty
- Field
- 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
- Spinner
- Switch
- Table
- Tabs
- Textarea
- Toast
- Toggle
- Toggle Group
- Tooltip
- Trace
- Typography
AI Elements are patterns for building agentic interfaces. Each one is a composition of shadcn/ui components that you copy into your project. There is no package to install. The code is yours.
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.
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 shadcn/ui 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 shadcn/ui 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 shadcn/ui pattern or component that replaces it.
| AI SDK Elements | shadcn/ui |
|---|---|
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 shadcn/ui 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 shadcn/ui components instead.
Add the components
pnpm dlx shadcn@latest add trace code-block
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.shadcn.com/docs/ai-elements/base/reasoning.md to my chat.Missing an element? Open an issue and tell us what you need.