skills.rest
REVREBEL
REVREBELOFFICIAL
Explore all skills by this author →
Website𝕏@hello_revrebelGitHub

webflow-code-components

Create and deploy React components into Webflow via DevLink.

Updated Apr 12, 2026
Search Tags:#integration#react#components#library#webflow#devlink#declareComponent
One-click install
npx skills add https://github.com/REVREBEL/Webflow-Metrics --skill webflow-code-components
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: webflow-code-components
Source: https://github.com/REVREBEL/Webflow-Metrics/tree/main/.agents/skills/webflow-code-components
Command: npx skills add https://github.com/REVREBEL/Webflow-Metrics --skill webflow-code-components

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @webflow/react, @webflow/data-types, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill streamlines the creation, definition, and importation of React code components into Webflow using DevLink, enabling designers and developers to incorporate advanced interactive elements seamlessly.

Core Features & Use Cases

  • Component Definition: Create self-contained React components with prop controls for use in Webflow.
  • Declarative Mapping: Use declareComponent to specify component metadata, props, and decorators.
  • Library Sharing: Publish component libraries to Webflow workspace for site-wide use.
  • Use Case: Design a custom button with configurable text and style, then instantly deploy it into your Webflow page with full interactivity and styling options.
  • Troubleshooting: Guidance for debugging bundling, styling with Shadow DOM, and component updates.

Quick Start

Define a React component, declare it with declareComponent, then run npx webflow library share to publish and use it in Webflow.

Frequently Asked Questions about webflow-code-components

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build and deploy React code components into Webflow using DevLink?▼

To build React code components for Webflow, define your React component, declare it with the `declareComponent` function to specify metadata and props, then run `npx webflow library share` to publish it directly to your Webflow workspace for site-wide use.

What is the process for configuring custom prop controls for Webflow React components?▼

Configuring custom prop controls for Webflow React components involves using declarative mapping via the `declareComponent` function, allowing developers to specify component metadata, props, and decorators so designers can adjust properties directly within the Webflow visual editor.

Can I share a React component library across multiple Webflow projects?▼

Yes, you can share a React component library across multiple Webflow projects by publishing your defined components to the Webflow workspace using the library sharing command, making them available for designers to integrate into various sites with full interactivity.

Do I need specific dependencies to integrate React components with Webflow DevLink?▼

Yes, integrating React components with Webflow DevLink requires specific dependencies, specifically `@webflow/react` and `@webflow/data-types`, which provide the foundational types and React bindings needed to ensure seamless component interaction within the Webflow environment.

How do I troubleshoot styling and bundling issues when importing React code components into Webflow?▼

Troubleshooting React code components in Webflow involves addressing common styling and bundling issues, specifically by debugging Shadow DOM styling conflicts and resolving component update failures to ensure seamless integration and visual consistency within the Webflow platform.

Related Skills

Explore More Design & Creative Skills→
karenrebecagkarenrebecag

webflow-code-component:component-scaffold

Scaffold Webflow Code Components with React and Webflow definition files.

Community
Advanced
karenrebecagkarenrebecag

webflow-cli:code-component

Create, validate, and deploy React components for Webflow Designer.

Community
Advanced
karenrebecagkarenrebecag

webflow-code-component:convert-component

Convert React components to Webflow Code Components with prop mapping.

Community
Intermediate
lsst-sqrelsst-sqre
2

migrate-styled-components-to-css-modules

Migrate React components from styled-components to CSS Modules with design tokens.

Official
Intermediate