# Mobile Shadcn Conventions > How the Agenta mobile app (web/mobile) installs and extends shadcn/ui registry components, themes them via the palette token bridge, and uses Vercel AI Elements. Use when adding UI components under web/mobile, changing theme colors, editing components.json or globals.css, or building chat UI with AI Elements. - Skill: `agenta-ai/mobile-shadcn-conventions` (Agent Skill) - Install (CLI): `npx skillmds@latest add agenta-ai/mobile-shadcn-conventions` - Raw SKILL.md: https://api.skillmd.com/api/skills/agenta-ai/mobile-shadcn-conventions/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: Agenta-AI (https://skillmd.com/u/agenta-ai) - Updated: 2026-09-10 - Page: https://skillmd.com/skills/agenta-ai/mobile-shadcn-conventions --- # Mobile shadcn conventions `web/mobile` uses shadcn/ui on Tailwind v4 with CSS variables. No antd, ever. ## Installing registry components - Always install via the CLI from `web/mobile/`: `pnpm dlx shadcn@latest add ` (e.g. `button`, `sheet`, `dialog`, `command`, `skeleton`, `input`). - Components land in `src/components/ui/` (aliases in `components.json`). They are owned code: you may adapt them, but keep diffs minimal and expressed in semantic tokens so upstream refreshes stay cheap. - The CLI adds any peer deps (e.g. `@radix-ui/react-slot`) to `web/mobile/package.json` — commit the manifest and `web/pnpm-lock.yaml` changes together with the component. - Never copy component source from the shadcn website by hand; the CLI resolves the Tailwind v4 variant correctly. - Installing a shadcn component that references a NEW token (e.g. `bg-sidebar`, `chart-*`) requires extending VARS in `scripts/generate-shadcn-tokens.ts` + the `@theme inline` map in `globals.css` first — Tailwind v4 silently generates nothing for unmapped tokens. ## Theming — the token bridge - shadcn variables (`--background`, `--primary`, ...) are NOT hand-maintained. They are generated into `src/styles/theme.generated.css` from `web/oss/src/styles/theme/palette.ts` by `scripts/generate-shadcn-tokens.ts`. - To change a color: edit `palette.ts` (if the design-system value is wrong) or the ROLE MAP in the script (if the mapping is wrong), then run `pnpm --filter @agenta/mobile generate:tokens` and commit the regenerated CSS. - Never edit `theme.generated.css` directly; never introduce raw hex values in components — if a needed role is missing, extend the bridge. - Dark mode is the `.dark` class on `` (`@custom-variant dark` in `globals.css`), set pre-paint by the `_document.tsx` init script from the shared `agenta-theme` localStorage key. Both themes must be checked for every new surface. ## Extending components - Wrap, don't fork: feature-specific variants live in `src/features/*` as thin wrappers over `components/ui/*` primitives (cva variants where appropriate). - Use the `cn` util from `@/lib/utils` for all class merging. ## Vercel AI Elements (chat render layer, WP3b+) - AI Elements are shadcn registry components; install them the same way (`pnpm dlx shadcn@latest add `), landing in `src/components/ui/` / `src/components/ai-elements/` per the registry config. - They are the base of the chat skin (Conversation, Message, Response, Reasoning, Tool, PromptInput); behavior comes from `@agenta/chat` hooks — never re-implement orchestration inside a rendered component.