Skip to main content
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: ScrollArea that accepts a viewportRef)
  • AI Elements tweaks: components/ai-elements/extra/* (example: ConversationContent wired to the tweaked ScrollArea)
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.