Code Components
Code components let you ship React components directly to Webflow, bridging the gap between code and visual development. Build advanced, interactive components in your codebase, and deploy them to Webflow. In Webflow, use code components directly on the canvas with props, slots, and variants for flexible composition.
Private beta
Code components are currently in private beta.
Get started
Create a code component and share an example library to your workspace
Update your existing library to work with 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.
Publish components to Webflow
Use the Webflow CLI 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.