May 4, 2026
Updated May 31, 2026
Claude, GPT, Gemini, Grok, DeepSeek, Qwen, v0, Lovable, Bolt. Ask any of them to build a React app and you get the same answer: Next.js or Vite, TypeScript, Tailwind, shadcn/ui. A look at the convergence, why it's happening, what we lose, and how to steer your way out of it.
19 min read
Ask any top-tier model to "build me a React app" with no further context, and the answer is roughly the same: React with Next.js or Vite, TypeScript, Tailwind CSS, shadcn/ui, TanStack Query, and Zustand. The model varies. The output barely does.
This is not a coincidence, and it is not a conspiracy. It is the predictable result of training data dominance, token economics, and the way modern coding agents are taught. The convergence is real, it is measurable, and it has consequences worth taking seriously.
| Model / Tool | Frontend | Styling | Components | State / Data | Backend bias |
|---|---|---|---|---|---|
| Claude (Anthropic) | Next.js / Vite | Tailwind v4 | shadcn/ui | Zustand + TanStack Q. | Vercel, Supabase |
| GPT / Codex (OpenAI) | Next.js | Tailwind or CSS | mixed | mirrors project | flexible |
| Gemini (Google) | Vite | Tailwind | mixed | mirrors project | Firebase, Node |
| Grok (xAI) | Next.js | Tailwind | mixed | mirrors project | flexible |
| DeepSeek | Next.js | Tailwind | shadcn/ui | TanStack Query | flexible |
| Qwen Coder | Next.js | Tailwind | shadcn/ui | TanStack Query | flexible |
| v0 (Vercel) | Next.js | Tailwind | shadcn/ui | TanStack Query | Vercel, Supabase |
| Lovable | Vite | Tailwind | shadcn/ui | TanStack Query | Supabase |
| Bolt (StackBlitz) | varies | Tailwind | mixed | mirrors project | Supabase |
Nine rows. One UI layer. The styling column is a single answer. The component column is mostly one answer.
Reproduce this in five minutes
Open Claude, GPT, and Gemini in three tabs and give each the same bare prompt: "build me a todo app", nothing else. Then diff the three package.json files. The framework row may split between Next.js and Vite, but the styling and component rows collapse onto the same answer. The convergence is not a claim you have to trust. It is a test you can run.
The most opinionated of the frontier models. Anthropic's own web-artifacts-builder skill explicitly teaches Claude to use "React, Tailwind CSS and shadcn/ui" for artifacts1, and the shadcn organization ships an official Claude Skill that runs shadcn info --json to feed Claude the project's component registry on every turn2. That is first-party tooling, treating Claude as a primary consumer.
Without an explicit design system in the prompt, Claude defaults to a recognizable visual style: rounded corners, Inter or system-sans, muted grays, a blue primary action button, card layouts. Claude's own brand uses warm terracotta on cream. Generated UIs do not inherit that.
The least dogmatic of the bunch. Codex CLI's documentation makes AGENTS.md the primary mechanism for stack preference. There is no hardcoded React framework default in the agent itself. Without a project, GPT still produces React + Tailwind, but it is more likely to reach for plain CSS, CSS Modules, or styled-components than Claude is, and observed outputs lean toward older patterns: Jest over Vitest, function components written like it is 2022.
GPT mirrors what the project already contains. Drop it into a Vue codebase and it writes Vue. The default shows up only when there is no project to mirror.
Google AI Studio's Build Mode documentation states React as the default for the client side, with a Node.js runtime on the server. Antigravity, Google's VS Code fork for agentic development, ships example stacks built around React + Vite + React Router DOM. Tailwind shows up frequently in Antigravity templates, but not as universally as in Claude's outputs. Firebase as the backend is a stronger pull than shadcn as the UI layer.
The newest entrant, and the one that makes the point by accident. xAI shipped Grok Build, a terminal coding agent in the Claude Code and Codex mold, in May 2026, running on a grok-code-fast-1 model trained from scratch on a programming-heavy corpus. That corpus is the same React-dominated public code as everyone else's, so without a project Grok reaches for React and Tailwind like the rest. The telling detail is the tooling: Grok Build reads your AGENTS.md and runs the same skills and MCP servers as its competitors, out of the box. The newest lab did not invent its own convention. It adopted the one the market already had.
The interesting case, because they are open-weight models trained primarily by Chinese labs. They converge on the exact same defaults: Next.js, TypeScript, Tailwind, shadcn/ui. DeepSeek Artifacts is built around it. Qwen3-Coder produces it. The training data overlap with the Western open-source ecosystem is too strong to escape, even when the lab and culture are different.
This is the cleanest evidence that the stack is a property of the corpus, not a property of any one company's preferences.
The AI builders. v0 is fully stack-locked: everything it generates uses React, Next.js, Tailwind, and shadcn. There is no Vue mode and no plain CSS mode. Lovable defaults to React + Vite + Tailwind + shadcn + Supabase. Bolt markets itself as multi-framework but its templates and demos lean React + Tailwind in practice.
These products do not just default to the stack. They are the stack, productized.
Three reinforcing forces.
LLMs read tokens, not files. Tailwind utility classes (flex, justify-center, p-4) are atomic, frequent, predictable tokens. Compare that to CSS-in-JS, where the model has to invent a class name like .card-wrapper-inner, reference it from JSX, and keep the two in sync across files.
For a token-predicting model, Tailwind is the path of least resistance:
CSS Modules, BEM, vanilla-extract, styled-components, Panda CSS: all valid, all harder for an LLM to keep coherent across a generation. Tailwind wins not because it is technically superior, but because it aligns with how the model itself processes information3.
Traditional component libraries (Material UI, Chakra, Mantine) ship as compiled packages. The model has to know the prop API, the theme system, the slot patterns. When the API changes between major versions, training data goes stale.
shadcn/ui inverts this. Components are copied into your project as plain JSX with Tailwind classes. There is no opaque library to memorize. The model reads the code, modifies it, ships it. shadcn even publishes an MCP server and an official Claude Skill so the agent can ask "what components are installed in this project?" in real time. That is a UX optimization for LLM consumers, not for human developers.
The most popular React stack on GitHub becomes the most-trained-on stack. The most-trained-on stack becomes the default LLM output. The default LLM output gets pushed back to GitHub as new code. Future models train on it. The cycle tightens.
Tailwind crossed 75 million monthly downloads in early 2026. shadcn crossed 100K GitHub stars in late 2025, the most-starred UI library on GitHub. Once a stack reaches that critical mass in training data, alternatives get statistically buried.
This is the part of the post that matters more than the rest. The convergence is not just an aesthetic complaint or an "old man yells at cloud" gripe. It is a structural change in how the web platform evolves, and the dynamics are self-reinforcing in a way that previous platform shifts were not.
There is a flywheel running, and every turn tightens it:
This is not how previous frontend shifts worked.
jQuery to React was driven by humans evaluating tradeoffs. React to Tailwind was driven by humans evaluating tradeoffs. The next shift, whatever it is, is now mediated by a system whose vote is weighted by how much code already exists in the previous winner. The optimization function has been swapped out from under the ecosystem.
These frameworks are not bad. They are not declining in quality. They are declining in visibility to LLMs, which is increasingly the same thing as declining in adoption.
A new Vue 3.5 reactivity feature might ship with perfect documentation. If LLMs do not see it in training data, the average Vue developer using an LLM will get React-flavored Vue back. The feature might as well not exist.
Svelte 5 runes are a genuinely novel reactivity model. They appear in training data at a fraction of the rate useState does. Ask an LLM "give me a counter in Svelte" and you will often get Svelte 4 patterns back, because that is the statistical average of what it has read.
Angular has a large enterprise footprint, but the public open-source corpus is dominated by React. LLMs reflect the public corpus, not the enterprise reality.
The asymmetry compounds. The more developers reach for LLMs as their first move, the more the practical experience of writing Vue or Svelte degrades, even when the framework itself improves.
Pre-LLM, version lag was a function of how fast docs and tutorials spread. A library could ship v2 and within a year, the ecosystem caught up.
Post-LLM, version lag is a function of training-corpus composition. Even a 2026 frontier model trained on 2025 data has seen ten years of useEffect + fetch and maybe two years of TanStack Query. It has seen a decade of manual useMemo and one year of the React Compiler. The "modern way" loses the popularity contest inside the model.
Pre-LLM: "how do I build a web app?" returned thousands of credible answers. A beginner had to choose, which was painful, but they at least encountered the choice. They learned that Vue existed. They learned that CSS-in-JS was a debate. They formed taste.
Post-LLM: the model picks for you, silently, with no acknowledgment that it picked. A first-time developer who prompts "build me a todo app" gets React + Tailwind + shadcn and never knows another path was available. They did not make a choice. A choice was made on their behalf and presented as the only option.
This is a worse failure mode than "beginners pick the wrong stack." It is "beginners do not know stacks are a category." The barrier to discovering alternatives now requires prior knowledge that alternatives exist, which is precisely the knowledge a beginner does not have.
When a model is given no design constraints, it produces a recognizable look: rounded corners, Inter, muted grays, blue primary button, card grid. It is not bad design. It is invisible design. Every AI-built landing page in 2026 looks like every other AI-built landing page4.
This is the same training-data-bias mechanic, applied to color tokens and font stacks instead of imports. Brand differentiation now requires you to actively fight the model. Specificity is the only defense.
The frameworks that survive a monoculture are the ones with strong corporate backing or aggressive LLM-era investment: shadcn publishing a Claude Skill, Chakra publishing an MCP server, Tailwind shipping an llms.txt file. The frameworks that lose are the small, opinionated, weird ones that previously gained traction through word of mouth and individual taste.
A future where the long tail of frontend tooling thins out is not a more efficient web. It is a less interesting one. And the cost of that thinning is paid in advance, by every developer who never learns there were other ways to build a UI5.
Telling a model "use Vue" once in a chat works for one prompt. Keeping it on Vue across a 200-message session, across new chats, across teammates, requires structural intervention. Here is the escalation ladder, ordered from cheapest and most fragile to strongest and most durable.
Effective for a single artifact, fragile across a session. Use when you do not have a project yet.
@mantine/core, not @mui/material" disambiguates upfront. The model is less likely to drift if it sees the exact import path.The format depends on the agent, but the pattern is identical. A markdown file at the repo root that the agent reads automatically on every turn.
| Agent | Filename |
|---|---|
| Claude Code | CLAUDE.md |
| Codex / OpenAI | AGENTS.md |
| Gemini CLI | GEMINI.md or AGENTS.md |
| Cursor | .cursorrules or .cursor/rules/*.mdc |
| Antigravity | AGENTS.md plus GEMINI.md overrides |
| Windsurf | .windsurfrules |
What actually works inside these files:
useState for server data; use Pinia stores." That is how you train against muscle memory.Models lean harder on what they read in the project than what is in their training. If your repo contains five Vue SFCs, the next file will be a Vue SFC. If it contains five React + Tailwind components and you tell it to write Vue, it will hallucinate something halfway between.
tailwind.config.ts will assume Tailwind is fair game, even if CLAUDE.md says no.The heaviest hammer. Instead of telling the model what to do, you give it a tool that constrains how it can do it.
npx shadcn add <your-url>. The model treats them as first-class.The model will still slip. Catch it at the boundary.
no-restricted-imports. Ban tailwindcss, @radix-ui/*, whatever you do not want. The agent sees the error on the next loop iteration and corrects.What does not work
Politeness ("please don't use Tailwind") gets ignored. The model is not being rude; the prior is just stronger than the request. One-shot system prompts get compressed away in long sessions. Vague aesthetic language ("make it less generic") produces the same generic output with different colors. And never trust the model's claim that it followed your instructions. Verify the diff.
For most teams switching off the default stack, the order is:
no-restricted-imports for the libraries you are escaping (Level 5).The goal is not to make the model perfect on the first try. It is to make every drift visible and correctable.
The default stack exists for real reasons. Tailwind is genuinely well-suited to LLM token economics. shadcn is genuinely well-suited to LLM-driven editing. React has genuinely won the market. None of this is wrong.
The problem is not the stack. The problem is that the choice has been frozen by the same systems that made the stack valuable. Every default we accept is a vote for the corpus that future models will train on. Every Vue project we abandon because "the AI is better at React" makes the AI even better at React next year.
If you want pluralism in your tools, you have to spend something to keep it. Hand-write the first Svelte component. Configure the AGENTS.md to forbid Tailwind. Publish your component registry. Push back on the path of least resistance, deliberately, on the projects where it matters.
The alternative is a web that all looks the same, written the same way, by the same model, forever. That is a worse outcome than any individual technology choice.
Maximilian Schwarzmüller's argument that the default LLM stack reduces competition and innovation.
Technical breakdown of why Tailwind's utility-class model fits LLM token prediction.
Anthropic's official post on the web-artifacts-builder skill, treating React + Tailwind + shadcn as the assumed baseline.
The official Claude Skill from shadcn that runs shadcn info --json on every turn to feed Claude project context.
Vercel's v0: everything generated uses React, Next.js, Tailwind, and shadcn. No alternatives.
Lovable's documented default stack: React + Vite + Tailwind + shadcn + Supabase.
Google AI Studio's Build Mode docs showing React as the default frontend.
OpenAI Codex CLI documentation on AGENTS.md as the primary stack-preference mechanism.
xAI's terminal coding agent, which reads AGENTS.md and runs the same skills and MCP servers as Claude Code and Codex out of the box.
Why Claude defaults to rounded corners, Inter, muted grays, and blue primary buttons when given no constraints.
Addy Osmani's comparison of the major AI builder products and their default stacks.
DeepSeek's public artifact tool, built around Next.js + TypeScript + Tailwind.
Tailwind's discussion on shipping a single-file documentation specifically for LLM consumption.
Official Material UI MCP server: feeds agents the live component API and usage patterns to bypass training-data drift.