Summary
Currently, @vercel/ai-elements assumes a Radix-based setup for shadcn/ui primitives. Projects that have adopted or migrated to the Base UI edition of shadcn/ui face component/type mismatches and peer dependency conflicts when initializing or importing AI Elements.
Problem
- The generated or copied components rely on
@radix-ui/* primitives, while Base UI-based shadcn/ui projects use @base-ui-components/react.
- Attempting to run
npx ai-elements in a Base UI environment breaks design consistency and forces developers to pull in heavy, redundant Radix dependencies alongside Base UI.
Proposed Solution
- Provide a CLI flag/option during setup (e.g.,
npx ai-elements --style base-ui or a prompt asking for the underlying primitive choice).
- Export Base UI-compatible variant primitives for components like
PromptInput, Conversation, Message, and tool call dialogs/popovers.
Environment
- Framework: Next.js (App Router)
- UI Libraries:
@base-ui-components/react, shadcn/ui (Base UI version), tailwindcss (v4)
- Package:
@vercel/ai-elements
Summary
Currently,
@vercel/ai-elementsassumes a Radix-based setup forshadcn/uiprimitives. Projects that have adopted or migrated to the Base UI edition ofshadcn/uiface component/type mismatches and peer dependency conflicts when initializing or importing AI Elements.Problem
@radix-ui/*primitives, while Base UI-basedshadcn/uiprojects use@base-ui-components/react.npx ai-elementsin a Base UI environment breaks design consistency and forces developers to pull in heavy, redundant Radix dependencies alongside Base UI.Proposed Solution
npx ai-elements --style base-uior a prompt asking for the underlying primitive choice).PromptInput,Conversation,Message, and tool call dialogs/popovers.Environment
@base-ui-components/react,shadcn/ui(Base UI version),tailwindcss(v4)@vercel/ai-elements