How to convert React (JSX, Next.js, shadcn/ui) to Webflow

At a glance

Paste a component

JSX or TSX → rendered in a sandbox → converted. No need to rewrite as HTML.

Whole projects

Drop a .zip (Vite, plain React) or capture the running app, including localhost.

Styling

Tailwind (v3/v4), CSS modules, styled-components, Emotion, shadcn/ui CSS variables.

Class names

Readable: CSS-module and styled-components hashes are replaced (Hero_title__Zx9yQ → hero-title).

Packages

React is built in; other npm imports (lucide-react, framer-motion) load from esm.sh.

Not carried over

State, event handlers, data fetching. You get the design as rendered.

Why React code doesn't paste into Webflow

A React component isn't a page: it's a function that produces one when it runs, often with data, state and styles that only exist at runtime (CSS-in-JS, Tailwind classes, CSS modules with hashed names). Webflow's Designer edits static elements and classes, so there's nothing to paste.

Webflow's code components (DevLink) bring React components in as code you configure with props, not as elements you can style in the Style panel. And most HTML-to-Webflow converters reject JSX outright.

FlowPaste runs the component first. Inside a sandbox it compiles JSX and TypeScript, loads React and any packages, renders, waits for fonts and images, then captures the result with every style the browser applied. That capture is converted like any other page: one class per look, values per breakpoint and state.

Ways to do it, compared

How to convert a React component to Webflow

Time: about 2 minutes per component. You need: the component code (or the project / running app), the FlowPaste Chrome extension, a Webflow site in the Designer.

1. Copy the component

   Copy the JSX or TSX file: one component with an export default works best. It can import React hooks, lucide-react, framer-motion and other packages.

2. Paste it into the Convert tab

   Open FlowPaste in the Designer and paste. FlowPaste detects React and shows a live preview that runs the code.

   TipFor a project with several files, zip the folder and drop the .zip. FlowPaste finds index.html or App.jsx and follows relative imports, CSS and images.

3. Check the preview

   Switch between desktop, tablet and mobile. What you see is what will be converted, in its initial state.

4. Convert & copy

   Click Convert & copy. FlowPaste renders the component, captures it and converts it.

5. Paste on the canvas

   Press ⌘V (Ctrl+V) in the Designer. Check the notes for fonts to add and icons that became Embeds.

6. Or capture the running app

   For a Next.js or full app, run it (npm run dev), open the page in Chrome and use Live Capture on each section.

What comes across

Example: a JSX component in, Webflow out

export default function Pricing() {
  return (
    <section className="py-16 px-6 bg-slate-50">
      <h2 className="text-3xl font-bold text-center">Simple pricing</h2>
      <div className="mt-8 grid md:grid-cols-3 gap-6 max-w-5xl mx-auto">
        {["Starter", "Pro", "Team"].map((p) => (
          <div key={p} className="rounded-2xl bg-white p-6 shadow">
            <h3 className="text-xl font-semibold">{p}</h3>
            <a className="mt-6 block rounded-lg bg-blue-600 px-4 py-2 text-white hover:bg-blue-700">Choose {p}</a>
          </div>))}
      </div>
    </section>);
}

Section        simple-pricing
  Heading H2   simple-pricing-heading
  Div Block    simple-pricing-container   (grid, 1 col on mobile)
    Div ×3     simple-pricing-card        (radius 16 · shadow)
      H3       simple-pricing-heading-2
      Link     simple-pricing-button      (+ Hover)

Problems and fixes

After you paste

• Add the fonts in Webflow → Site settings → Fonts. FlowPaste lists them in the notes after each conversion. Until then, text that brought its own font file still shows correctly, but you can't pick the font in the Typography panel.
• Click through tablet, mobile landscape and mobile portrait in the Designer. Media queries are already mapped to those breakpoints; check anything the notes marked as "snapped".
• Look for Embed elements (inline SVG icons, pseudo-elements, leftover scripts). They show on every plan; editing their code needs a paid site plan.
• Images: Webflow publishes images only from its own Assets. Connect your site once in FlowPaste → Account → Webflow images, and every paste uploads its images for you. Without it, images show in the Designer but break on the published site.
• Add behaviour back with Webflow Interactions where you need it.

Questions