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 any other component. 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 Webflow 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 code components and AI code components?

Code components are written in React in your codebase and imported into Webflow via DevLink, where designers and marketers can configure them on the canvas. AI code components are generated natively in Webflow with the Webflow AI Assistant. Both render on the canvas, support props and slots, and can be reused across your site. Learn more about building AI code components.

When should I use Webflow components, code components, AI code components, or custom code?

• Webflow components — fast to build visually. Ideal for most use cases and compatible with every Webflow feature.
• Code components — for teams with React expertise who want to maintain reusable, complex functionality in their codebase.
• AI code components — for interactive functionality generated from a prompt, without leaving Webflow or writing code.
• Custom code — for minor enhancements or embeds not worth converting to components.

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.