For AI agents: a documentation index is available at the root level at /llms.txt and /llms-full.txt. Append /llms.txt to any URL for a page-level index, or .md for the markdown version of any page.
Resources
Get started
GuidesExamplesChangelog
GuidesExamplesChangelog
  • Code Components
    • Introduction
    • Component Architecture
    • Styling Components
  • Importing Code Components
    • Quick start: Importing code components
    • Installation
    • Define a code component
    • Bundling & Import
  • Generating AI Code Components
    • Quick start: Generating AI code components
  • FAQs
    • FAQs and troubleshooting
  • Reference
    • Webflow CLI
    • Prop Types
LogoLogo
Resources
Get started
On this page
  • Get started
  • Key capabilities
  • Types of code components
  • How code components work in Webflow
Code Components

Code components

Create or import React-based components for use inside and outside Webflow

Was this page helpful?

Component architecture

Understand the runtime behavior of code components
Next
Built with

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

Quick start: Import

Create a code component and share an example library to your workspace

Quick start: Generate

Generate a Code Component with AI and make changes to it with AI prompts

Configure your codebase

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

1

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.

2

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.

3

Import components to Webflow

Use DevLink to bundle and publish your components as a shared library for users to install across a workspace.

4

Install components to a site

Install code components as a shared library on any Webflow site in your workspace.

5

Design visually

Drag and drop components onto the canvas, configure props and slots in the right panel, and customize styling through each site’s variables to integrate with a specific design system.