Code components
Create or import React-based components for use inside and outside Webflow
Code components are React components that are enhanced for use within Webflow sites and in external sites. They allow you to use React components that you developed for other sites in Webflow and synchronize components between your Webflow and non-Webflow sites via DevLink.
You can work with imported or created Webflow Code components directly on the canvas with props, slots, and variants for flexible composition. You can also use AI-powered tools to generate and modify complex, interactive code components.
Get started
Create a code component and share an example library to your workspace
Generate a Code Component with AI and make changes to it with AI prompts
Update your existing library to work with DevLink and code components
Key capabilities
With code components, you get full control over your React development:
- Develop in React
Use hooks, state, effects, and context to build advanced components - Visual composition
Expose props and slots for designers to design visually in Webflow - Shared library distribution
Share, update, and install code components on any site in your Workspace with Libraries
Learn more about configuring your components for Webflow →
Types of code components
These types of code components are available in Webflow:
- Code components that you create in the Webflow Designer and optionally export as React components to use outside of Webflow
- Code components that you import from external repositories to use in Webflow sites, sometimes referred to as “DevLink code components”
- Code components that are generated by AI as described in Quick start: Generating code components
These components behave the same way within Webflow except for the limitations of AI-generated code components; see Limitations of generated code components.
For more information about the types of code components, see Webflow component type overview.
How code components work in Webflow
Build components in your codebase
Create React components with hooks, state management, and API integrations. Reference Webflow variables to allow components to adapt to an individual site’s colors, typography, sizes, and spacing.
Declare a Webflow component in your codebase
Use declareComponent to wrap an existing React component, then define prop types to make them available in the Webflow Designer.
Import components to Webflow
Use DevLink to bundle and publish your components as a shared library for users to install across a workspace.
Install components to a site
Install code components as a shared library on any Webflow site in your workspace.
