> This page is for Code Components.

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://developers.webflow.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://developers.webflow.com/_mcp/server.

# 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

#### [Quick start: Import](/code-components/importing/quick-start)

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

#### [Quick start: Generate](/code-components/generating/quick-start)

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

#### [Configure your codebase](/code-components/installation)

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 →](/code-components/define-code-component)

## 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](/code-components/generating/quick-start)

These components behave the same way within Webflow except for the limitations of AI-generated code components; see [Limitations of generated code components](/code-components/generating/quick-start#limitations-of-generated-code-components).

For more information about the types of code components, see [Webflow component type overview](https://help.webflow.com/hc/en-us/articles/44650915153811-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](/code-components/reference/prop-types) to make them available in the Webflow Designer.

#### Import components to Webflow

Use [DevLink](/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](https://help.webflow.com/hc/en-us/articles/33961343551763-Libraries) on any Webflow site in your workspace.

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