Code components

Use React components and props directly on the Webflow canvas.

You can use React components and props directly on the Webflow canvas with code components. These components integrate seamlessly with native Webflow workflows, allowing designers and marketers to edit props and slots like any other component.

What are code components

Code components are React components developed outside of Webflow. Code components can be imported into Webflow using DevLink, and installed like native library components. Once in Webflow, they can be configured, updated, and reused across your site. Code components live in code libraries, which are packages of React components shared to your Workspace via the Webflow CLI.

How to use code components

Once developers create and share code components with your Workspace, you can:

1. Add them from the Components panel
2. Edit props directly or bind them to CMS fields
3. Use slots to nest native components
4. Add them to Collection pages or Collection list elements

Learn more about using components in Webflow.

How to convert code components to site components

1. Right-click the code component
2. Click Convert to site component

Site code components are disconnected from the Library and can have a custom name, description, and group. You can’t edit the main component for a site code component.

Example use cases

• Migrate a React site — recreate product pages in Webflow using existing components
• Share product UI — use nav bars, banners, and more across marketing sites
• Build advanced UIs — create locators or calculators in code, then hand off to teams

Example workflow

1. A developer writes a product card React component
2. They define props for title, image, link, and price
3. They use the CLI to share the code library to Webflow
4. A designer installs the library and adds the card to the canvas
5. They configure props and bind them to CMS content

Frequently asked questions

What’s the difference between DevLink and AI code components?

DevLink components are created and maintained outside Webflow. AI components are generated in Webflow using code gen (coming soon).

When should I use code components vs. custom code vs. native components?

• Code components — for teams with React expertise and reusable, complex functionality
• Custom code — for minor enhancements or embeds not worth converting to components
• Native components — fast to build, highly compatible, and ideal for most use cases

Can designers or marketers set up props?

Props are defined in the codebase. Once defined, they can be edited in Webflow.

Do you support Angular, Vue, or Svelte?

No, we currently support React only.

Which prop field types are available?

We support text, rich text, image, link, variant, visibility, slots, and variants.

Can you use GSAP in code components?

Yes, but with nuances specific to React. Follow GSAP React best practices.

Can I export a visual component, enhance it in code, and re-import?

Yes, but avoid maintaining two sources of truth to prevent style duplication. Use component slots instead when possible.