Skip to main content

​
Overview

Webflow Code Components allow you to build advanced, interactive React components in your codebase and deploy them to Webflow as shared libraries. Components can be visually composed on the canvas, enabling designers to use custom components without writing code.
Code Components require a Webflow Workspace on Freelancer, Core, Growth, Agency, or Enterprise plan (or a site on CMS, Business, or Enterprise).

​
Download Skill

Add this skill to your AI agent to help with Code Components development: 
https://skills.224ai.au/webflow-code-components.skill

​
Quick Start

1

Set up your project

Install the CLI and dependencies:
npm install -g @webflow/webflow-cli
npm install react react-dom
2

Create a React component

Build your standard React component:
// MyComponent.tsx
export function MyComponent({ title, count }) {
  return (
    <div>
      <h1>{title}</h1>
      <p>Count: {count}</p>
    </div>
  );
}
3

Define the code component

Create a .webflow.tsx file with declareComponent:
// MyComponent.webflow.tsx
import { MyComponent } from './MyComponent';
import { declareComponent } from '@webflow/component-api';

export default declareComponent(MyComponent, {
  displayName: 'My Component',
  props: {
    title: { type: 'Text', default: 'Hello' },
    count: { type: 'Number', default: 0 }
  }
});
4

Import to Webflow

Run the CLI command:
npx webflow library share
5

Use on canvas

Install the library on a site, then drag and drop components from the Add panel.

​
Key Concepts

Shadow DOM Isolation

Styles and DOM are sandboxed per component, preventing global CSS conflicts

Separate React Roots

No shared React Context or state between components

SSR by Default

Server-rendered HTML is hydrated on the client for better performance

declareComponent

Defines how your React component appears and behaves in Webflow

​
Prop Types

Code Components support 11 prop types for configuring components in the Webflow Designer:
Prop TypeDescriptionUse Case
TextSingle-line text inputShort strings, labels, titles
Rich TextFormatted HTML contentDescriptions, articles
Text NodeOn-canvas editable textHeadings that designers can style
LinkURL with target and preloadNavigation, CTAs
ImageAsset library image selectionPhotos, illustrations, logos
NumberNumeric input with rangeCounts, dimensions, opacity
BooleanTrue/false toggleFeature flags, visibility
VariantPredefined option dropdownThemes, sizes, styles
VisibilityShow/hide toggleConditional rendering
SlotChild component insertionLayouts, wrappers
IDHTML element identifierAccessibility, anchors

​
Prop Type Example

import { declareComponent } from '@webflow/component-api';
import { Button } from './Button';

export default declareComponent(Button, {
  displayName: 'Custom Button',
  props: {
    label: {
      type: 'Text',
      default: 'Click me',
      displayName: 'Button Label'
    },
    variant: {
      type: 'Variant',
      options: ['primary', 'secondary', 'ghost'],
      default: 'primary'
    },
    disabled: {
      type: 'Boolean',
      default: false
    },
    icon: {
      type: 'Image',
      displayName: 'Icon'
    }
  }
});

​
Component Architecture

Components render in isolated Shadow DOM environments. Use CSS-in-JS, CSS modules, or scoped stylesheets for styling.

​
Shadow DOM & Styling

Because components render in Shadow DOM, global stylesheets won’t apply. Use one of these approaches: 
import styled from 'styled-components';

const StyledButton = styled.button`
  background: ${props => props.theme.primary};
  color: white;
  padding: 12px 24px;
  border-radius: 8px;
`;
Configure Tailwind to work with Shadow DOM:
// In your component
import styles from './styles.css?inline';

export function Component() {
  return (
    <>
      <style>{styles}</style>
      <div className="bg-blue-500 text-white p-4">
        Content
      </div>
    </>
  );
}

import styles from './Button.module.css';

export function Button({ label }) {
  return <button className={styles.button}>{label}</button>;
}

​
State & Data Management

Components have separate React roots — no shared Context or state. Use alternative patterns:
  • URL parameters — Share state via query strings
  • Browser storage — localStorage or sessionStorage
  • Nano Stores — Lightweight global state management
  • Custom events — window.postMessage() or custom events
// Using Nano Stores for shared state
import { atom } from 'nanostores';

export const cartCount = atom(0);

// In your component
import { useStore } from '@nanostores/react';
import { cartCount } from './store';

export function CartBadge() {
  const count = useStore(cartCount);
  return <span>{count}</span>;
}

​
Server-Side Rendering

Components are server-rendered by default for better performance and SEO. Disable SSR for browser-only components: 
export default declareComponent(BrowserOnlyComponent, {
  displayName: 'Browser Only',
  ssr: false, // Disable SSR
  props: { /* ... */ }
});

​
Bundling & Import

Webpack bundles your library with a 50MB maximum size limit.
# Bundle and share to Webflow
npx webflow library share

# List available commands
npx webflow --help

# Authenticate
npx webflow auth login

​
Important Notes

File names are unique identifiers. Renaming a .webflow.tsx file creates a new component and removes the old one — existing instances on sites will break.
  • React Server Components are not supported — use standard React components only
  • Components can fetch data client-side, but APIs must support CORS
  • Never embed API keys in component code — they’re visible in the browser
  • Each component runs in its own Shadow DOM with isolated styles

​
Reference Documentation

The skill includes comprehensive reference documentation:

​
Getting Started

  • introduction.md — Overview of DevLink and code components
  • quick-start.md — End-to-end tutorial from setup to canvas
  • installation.md — CLI installation, webflow.json config, authentication

​
Building Components

  • define-code-component.md — declareComponent, props, decorators, options
  • hooks.md — declareComponent and useWebflowContext hook reference
  • component-architecture.md — Shadow DOM, SSR, state patterns, data fetching
  • styling-components.md — CSS in Shadow DOM, site variables, tag selectors
  • frameworks-and-libraries.md — Tailwind, styled-components, Emotion, Material UI, Shadcn/UI

​
Prop Types

  • prop-types.md — All prop types with usage, return values, and examples
  • Individual files for each prop type (text.md, rich-text.md, link.md, etc.)

​
Bundling & CLI

  • cli.md — Webflow CLI commands, flags, CI/CD usage, troubleshooting
  • bundling-and-import.md — Webpack bundling, CLI import, CI/CD, debugging

​
Help

  • faq.md — Frequently asked questions and troubleshooting

​
Searching References

# List all references with metadata
python scripts/search_references.py --list

# Search by tag (exact match)
python scripts/search_references.py --tag props

# Search only prop type references
python scripts/search_references.py --prop-types

# Search by keyword
python scripts/search_references.py --search shadow-dom

​
License

MIT License - See the repository for details.

Build docs developers (and LLMs) love

Get started for freeTalk to us