webflow-code-components_skill

Overview

This skill helps you build, define, bundle, and import React code components into Webflow via DevLink. It focuses on declareComponent definitions, prop types, Shadow DOM styling, and Webpack bundling so components appear and behave correctly on the Webflow canvas. Use it to streamline development, sharing, and troubleshooting of Webflow code components.

How this skill works

You create standard React components and add a .webflow.tsx file that uses declareComponent to expose metadata and props to Webflow. The CLI bundles your library with Webpack and publishes it via DevLink; installed libraries become draggable code components on the canvas. Components run in isolated Shadow DOM roots, are server-side rendered by default, and hydrate on the client unless ssr is disabled.

When to use it

• When you need interactive React components available for visual composition in Webflow
• When defining component props, variants, slots, or on-canvas editable text
• When configuring Shadow DOM styling or integrating UI libraries like Tailwind or Emotion
• When preparing libraries for CI/CD or sharing via npx webflow library share
• When troubleshooting DevLink import errors or bundle size and compatibility issues

Best practices

• Keep .webflow.tsx filenames stable — renaming creates a new component and breaks existing instances
• Prefer standard React components (no React Server Components) and avoid embedding API keys
• Use prop types (Text, Rich Text, Image, Variant, Slot, etc.) to expose clear controls to designers
• Leverage Shadow DOM for stable styles, but reference site variables carefully and use tag selectors when needed
• Limit bundle size and test the library install flow in a staging Webflow site before production

Example use cases

• Create a reusable hero component with image, heading, CTA variants, and on-canvas editable text
• Bundle a design system library (buttons, cards, modals) and share it across multiple Webflow sites
• Build a client-side data-driven component that fetches CORS-enabled APIs for dynamic content
• Integrate a UI library (Tailwind or styled-components) inside Shadow DOM and expose styling props
• Automate library publishing in CI using the CLI for consistent deployments