Component Registries
Add shadcn and AI Elements components to your app
ChatJS uses two component libraries/registries: shadcn/ui and AI Elements. Both are shadcn-style, Tailwind-friendly, and theme via the same CSS variables in app/globals.css.
shadcn/ui components
shadcn/ui components are added to components/ui and use your theme CSS variables from app/globals.css.
bunx shadcn@latest add <component>AI Elements components
AI Elements is a shadcn-compatible component registry focused on AI UX (docs). In this repo, AI Elements components live in components/ai-elements.
bunx ai-elements@latest add <component>After installing, import from @/components/ai-elements/... and style them like any other component.
The extra/ pattern (local tweaks on top of registries)
Sometimes we need tiny local wrappers/patches on top of upstream shadcn or AI Elements components (usually to bridge an upstream gap or carry a temporary workaround).
- shadcn tweaks:
components/ui/extra/*(example:ScrollAreathat accepts aviewportRef) - AI Elements tweaks:
components/ai-elements/extra/*(example:ConversationContentwired to the tweakedScrollArea)
Rule of thumb: don’t edit upstream registry components unless you have to; prefer putting local glue/tweaks in extra/ so future bunx shadcn@latest add / bunx ai-elements@latest add updates stay clean.