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 →
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.
