vercel / vercel/ai-elements

`feat(ai-elements): add support for Base UI version of shadcn/ui`

Open
#489 0 comments 3 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
2.4k
Forks
283
Avg merge
32m
Merged PRs (30d)
1

Description

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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by tracing the ai-elements CLI setup flow and the component exports for PromptInput, Conversation, Message, and tool call dialogs or popovers. Compare their Radix assumptions with the Base UI environment described in the issue, then define how setup selects the primitive set and verify initialization and imports without requiring redundant Radix dependencies.

Written by the indexing model from the issue text.

Assessment

Tech stack
nextjs, tailwindcss, typescript
Domain
cli, frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Active
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.