Generate code for your stack with our plugin

Until today, the Figma to shadcn/ui plugin generated one flavor of code: Next.js with Radix-based shadcn/ui components. That was the right default for years — but it's not how everyone builds anymore. shadcn/ui now ships two component variants, and plenty of teams run it on Vite, React Router, or TanStack Start instead of Next.js.

With this update, the plugin generates code that matches your project. Pick your component library and framework once, and every generation comes out ready to paste — no more hand-editing asChild props or deleting "use client" directives.

Pick your component library: Radix UI or Base UI

In July 2026, shadcn/ui made Base UI the default component library for new projects. Radix isn't going anywhere — both variants are maintained in parallel — but the two produce genuinely different code:

• Base UI replaces Radix's asChild prop with a render prop: <DropdownMenuTrigger render={<Button />} /> instead of <DropdownMenuTrigger asChild><Button /></DropdownMenuTrigger>.
• Base UI's Select resolves the selected label through an items prop on the root.
• Checkboxes require strict boolean props, menu labels get grouped differently, and so on.

Code written for one variant silently breaks in the other. The plugin now knows both: select Base UI in the new Your stack row, and every trigger, button link, sidebar item, and select in the generated code follows Base UI conventions. Select Radix UI (the default) and everything works exactly as before.

Pick your framework: Next.js, Vite, React Router, or TanStack Start

Not building on Next.js? The generated code no longer assumes you are:

• Next.js — "use client" directive and next/link, as always.
• Vite (React SPA) — plain <a> elements, no server-component directives.
• React Router — import { Link } from "react-router" with the to prop.
• TanStack Start — import { Link } from "@tanstack/react-router" with the to prop.

Your selection is saved, so you set it once per project and forget about it. And if you change nothing, nothing changes — the defaults are Radix UI + Next.js, byte-for-byte the same generation behavior as before this update.

The Copy CLI command works for every stack — the shadcn CLI resolves component dependencies against your own components.json, so it installs the right variant automatically. Open in v0 stays a Next.js feature (v0 generates Next.js projects); the plugin now explains that on hover instead of leaving you guessing at a disabled button.

New AI models: the Claude 5 family and Gemini 3.5 Flash

We've also refreshed the AI model lineup:

• Claude Opus 4.8 — the new recommended default. Anthropic's most capable Opus-tier model, excellent at long, structured code generation.
• Claude Fable 5 — Anthropic's most capable model overall, for when you want the absolute ceiling. Note it's priced above the Opus tier and requires an Anthropic organization with standard (30-day) data retention.
• Claude Sonnet 5 — near-Opus quality on coding tasks at Sonnet pricing.
• Gemini 3.5 Flash — Google's current flagship for coding and agentic work: fast, cheap, and surprisingly strong on UI code.

Claude Opus 4.7, Claude Sonnet 4.6, and Gemini 3.1 Pro Preview remain available. The older Gemini 3.0 previews have been retired — if you had one selected, the plugin automatically migrates you to its successor, API key included. One provider API key now covers all of that provider's models in the plugin, so switching between Claude or Gemini models never means re-entering a key.

How to use it

1. Open the Figma to shadcn/ui plugin and go to the Build tab.
2. Add your frame with the "+" icon.
3. In the Your stack row, pick your component library and framework.
4. Press Build it.

That's it — the code that comes out matches the project it's going into. Check the documentation for details and best practices.

If you have feedback on the generated code for your particular stack — especially if you're on Base UI — we'd love to hear it. This is exactly the kind of update your reports make better.