PixilUI and AI Elements
A component library and custom registry built on shadcn/ui for AI-native apps made with the AI SDK. Components install into components/ai-elements.
The AI Elements site says the project is moving to shadcn/ui and will be deprecated at the end of November 2026, and recommends that new projects install it from shadcn/ui.
What AI Elements is good at
- Breadth: 49 components in its docs sidebar on the day we checked, across chatbot, code, voice and workflow.
- Close fit with the AI SDK: its docs describe deep integration with the SDK's streaming and status states.
- Surfaces beyond chat: file tree, terminal, test results, web preview, and a canvas with nodes and edges for workflows.
- shadcn/ui conventions, so an existing shadcn/ui theme applies to its components.
What PixilUI adds
- No SDK assumption: items take plain props (text, status, steps, callbacks), so they work with the AI SDK, another SDK or your own stream. AI Elements lists the AI SDK as a prerequisite.
- Fewer, deeper items: approval card, run timeline, tool call row, thinking state and streaming text, each with its in-progress and finished states and the motion between them.
- Motion from one token set, with a reduced-motion branch in every animation.
- A markdown twin for every page and generated llms files, so coding agents read the same docs you do.
Install
AI Elements
npx ai-elements@latest add messagenpx shadcn@latest add @ai-elements/messagePixilUI, after adding the registry to components.json (installation)
npx shadcn@latest add @pixilui/tool-call-rowUsing both
They can share a project: both install with the shadcn CLI, AI Elements into components/ai-elements and PixilUI into components/pixilui. A common split is AI Elements or shadcn/ui for the conversation shell and PixilUI for the moments that need a decision or a record, such as approvals and agent runs.
Sources
Read on . If something here no longer matches AI Elements's site, write to hello@pixilui.com and we will fix it.