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

# DevLink Export

> Bridge design and code by exporting Webflow components to React applications.

With DevLink, you can export Webflow designs directly to React. Designers create reusable components visually in Webflow, and developers use DevLink to bring those components into React projects, including Webflow Cloud apps, with ease.

#### Design visually

Create components using Webflow's visual editor with no code required.

#### Export to React

Transform Webflow components into React components with a single command.

#### Preserve design systems

Preserve styles, variables, components and interactions from your Webflow design.

#### Stay in sync

Update your design system in Webflow, then export changes to your codebase.

---

## Get started with Exported Components

#### Get Started

Follow the [Getting Started](/devlink/docs/quick-start/quick-start-component-export) guide to configure your project for DevLink and export your components.

\


Get Started

---

## Working with Exported Components

DevLink translates your Webflow components into React components through a simple workflow:

#### Design in Webflow

Create styles, variables, and components in Webflow's best-in-class visual editor.

#### Configure DevLink

[Set up the connection](/devlink/docs/component-export/installation) between your Webflow project and your React application.

#### Export your design system

Use the [Webflow CLI](/cli/reference/webflow-cli) to export [styles, variables, and components](/devlink/docs/component-export/whats-exported) to your project.

#### Use your design system in your React app

Import the global styles and generated React components into your application code.

#### Add functionality

Enhance the components with [custom logic, state, and interactivity.](/devlink/usage/framework-guides)

## Learn more

Explore to use Exported Components in your React projects:

#### [Design Guidelines](/devlink/docs/component-export/design-guidelines/component-architecture)

Learn how to structure and design components in Webflow for clean export to React.

\


Learn more

#### [Usage Documentation](/devlink/usage/framework-guides)

Discover how to integrate and extend DevLink components in your React projects.

\


Learn more

> Design in Webflow, export to React

## Docs

- [Setup](https://developers.webflow.com/devlink/docs/component-export/installation.md): Learn how to set up and configure your React project for exported components.
- [What's exported](https://developers.webflow.com/devlink/docs/component-export/whats-exported.md): A detailed breakdown of the files and configurations exported by DevLink for use in React projects.
- [Design guidelines overview](https://developers.webflow.com/devlink/design-guidelines.md): Principles and best practices for designing Webflow components that are reusable, consistent, and export cleanly to React.
- [Component architecture](https://developers.webflow.com/devlink/docs/component-export/design-guidelines/component-architecture.md): Principles for designing components in Webflow to ensure clean export
- [Element settings](https://developers.webflow.com/devlink/docs/component-export/design-guidelines/element-settings.md): Principles for element settings in Webflow to ensure clean export
- [Props and slots](https://developers.webflow.com/devlink/docs/component-export/design-guidelines/props-slots.md): How to create and expose custom properties in Webflow Designer for use in React.
- [Interactions](https://developers.webflow.com/devlink/docs/component-export/design-guidelines/interactions.md): Principles for interactions in Webflow to ensure clean export
- [Fonts in DevLink Export](https://developers.webflow.com/devlink/docs/component-export/fonts.md): How DevLink ships Google, Adobe, and custom uploaded fonts, and what setup each one needs.
- [Using Exported Components](https://developers.webflow.com/devlink/docs/component-export/usage.md): Guides for React developers on how to import, configure, and extend Exported Components in their applications.
- [Framework Guides](https://developers.webflow.com/devlink/usage/framework-guides.md): Guides for integrating DevLink with various frameworks, including Next.js, Remix, Gatsby, and Vite/CRA.
- [Styling and Theming](https://developers.webflow.com/devlink/usage/styling-and-theming-overrides.md): How to override DevLink component styles using CSS scopes, global CSS imports, and advanced configuration.
- [Troubleshooting Exported Components](https://developers.webflow.com/devlink/docs/component-export/troubleshooting.md): Solutions for common issues when working with DevLink
- [Resources for Exported Components](https://developers.webflow.com/devlink/docs/component-export/resources.md): A list of resources and guides for Exported Components