# Generate code for your stack with our plugin

> The Figma to shadcn/ui plugin now generates code tailored to your project. Plus we added support for the Claude 5 family and Gemini 3.5 Flash.

Published: 2026-07-07 · Author: Matt Wierzbicki · Canonical: https://www.shadcndesign.com/blog/stack-aware-code-generation-base-ui-frameworks-new-ai-models

Until today, the [Figma to shadcn/ui plugin](/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](https://ui.shadcn.com/docs/changelog/2026-07-base-ui-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](/docs/generating-code) 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.