EXAMPLES

🛠️ Local Dev Setup: New Code Components Project

I'll set up a complete code components project for you.

---

## Step 1: Initialize Project

**Create project directory and initialize npm:**
```bash
mkdir my-webflow-components
cd my-webflow-components
npm init -y

npm install react react-dom
npm install -D typescript @types/react @types/react-dom

npm install -D @webflow/webflow-cli @webflow/data-types @webflow/react

{
  "compilerOptions": {
    "target": "ES2020",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "moduleResolution": "bundler",
    "jsx": "react-jsx",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "declaration": true,
    "declarationMap": true,
    "outDir": "./dist",
    "rootDir": "./src"
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

{
  "library": {
    "name": "My Component Library",
    "components": ["./src/**/*.webflow.tsx"]
  }
}

mkdir -p src/components/Button

my-webflow-components/
├── src/
│   ├── components/
│   │   └── Button/
│   │       ├── Button.tsx
│   │       ├── Button.webflow.tsx
│   │       └── Button.module.css
│   └── declarations.d.ts
├── package.json
├── tsconfig.json
├── webflow.json
└── .gitignore

declare module "*.module.css" {
  const classes: { [key: string]: string };
  export default classes;
}

// For non-module CSS imports (e.g., global CSS files like globals.css)
declare module "*.css" {
  const content: string;
  export default content;
}

import React from "react";
import styles from "./Button.module.css";

export interface ButtonProps {
  label: string;
  variant: "primary" | "secondary" | "outline";
  disabled?: boolean;
}

export const Button: React.FC<ButtonProps> = ({
  label,
  variant = "primary",
  disabled = false,
}) => {
  return (
    <button
      className={`${styles.button} ${styles[variant]}`}
      disabled={disabled}
    >
      {label}
    </button>
  );
};

import { declareComponent } from "@webflow/react";
import { props } from "@webflow/data-types";
import { Button } from "./Button";
import "./Button.module.css";

export default declareComponent(Button, {
  name: "Button",
  description: "A customizable button component",
  group: "Interactive",
  props: {
    label: props.Text({
      name: "Label",
      defaultValue: "Click me",
    }),
    variant: props.Variant({
      name: "Style",
      options: ["primary", "secondary", "outline"],
      defaultValue: "primary",
    }),
    disabled: props.Boolean({
      name: "Disabled",
      defaultValue: false,
    }),
  },
});

.button {
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.2s ease;
}

.button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.primary {
  background-color: #3b82f6;
  color: white;
}

.primary:hover:not(:disabled) {
  background-color: #2563eb;
}

.secondary {
  background-color: #6b7280;
  color: white;
}

.secondary:hover:not(:disabled) {
  background-color: #4b5563;
}

.outline {
  background-color: transparent;
  border-color: #3b82f6;
  color: #3b82f6;
}

.outline:hover:not(:disabled) {
  background-color: #3b82f6;
  color: white;
}

node_modules/   # Dependencies (installed via npm install)
dist/           # Build output
.env            # API tokens and secrets
*.log           # Log files from CLI and bundler

npx webflow library bundle --public-path http://localhost:4000/

✓ Bundling components...
✓ Found 1 component(s)
✓ Build complete

mkdir src/components/Card

npx webflow library share

---

## Example 2: Add to Existing React Project

npm install -D @webflow/webflow-cli @webflow/data-types @webflow/react

{
  "library": {
    "name": "My Component Library",
    "components": ["./src/webflow-components/**/*.webflow.tsx"]
  }
}

mkdir -p src/webflow-components

existing-react-project/
├── src/
│   ├── components/          # Your existing components
│   │   └── Button/
│   ├── webflow-components/  # Webflow definition files go here
│   │   └── Button.webflow.tsx
│   └── ...
├── package.json
└── webflow.json             # New — Webflow config

import { declareComponent } from "@webflow/react";
import { props } from "@webflow/data-types";
// Import your existing component
import { Button } from "../components/Button";

export default declareComponent(Button, {
  name: "Button",
  description: "Your existing button component",
  props: {
    // Map your component props to Webflow props
    children: props.Text({
      name: "Label",
      defaultValue: "Click me"
    }),
    variant: props.Variant({
      name: "Variant",
      options: ["primary", "secondary"],
      defaultValue: "primary"
    })
  }
});

import "../components/Button/Button.module.css";

// src/webflow-components/globals.ts
import { styledComponentsShadowDomDecorator } from "@webflow/styled-components-utils";
export const decorators = [styledComponentsShadowDomDecorator];

{
  "library": {
    "globals": "./src/webflow-components/globals.ts"
  }
}

.env

npx webflow library bundle --public-path http://localhost:4000/

---

## Example 3: With Tailwind CSS

mkdir my-tailwind-components
cd my-tailwind-components
npm init -y

# Core
npm install react react-dom
npm install -D typescript @types/react @types/react-dom

# Webflow
npm install -D @webflow/webflow-cli @webflow/data-types @webflow/react

# Tailwind
npm install -D tailwindcss @tailwindcss/postcss postcss

export default {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};

@import "tailwindcss";

import "./globals.css";

{
  "library": {
    "name": "My Tailwind Library",
    "components": ["./src/**/*.webflow.tsx"],
    "globals": "./src/globals.ts"
  }
}

import React from "react";

export interface CardProps {
  title: string;
  description: string;
  featured?: boolean;
}

export const Card: React.FC<CardProps> = ({
  title,
  description,
  featured = false,
}) => {
  return (
    <div className={`
      p-6 rounded-lg shadow-md
      ${featured ? "bg-blue-50 border-2 border-blue-500" : "bg-white"}
    `}>
      <h2 className="text-xl font-bold text-gray-900 mb-2">{title}</h2>
      <p className="text-gray-600">{description}</p>
      {featured && (
        <span className="inline-block mt-4 px-3 py-1 bg-blue-500 text-white text-sm rounded-full">
          Featured
        </span>
      )}
    </div>
  );
};

import { declareComponent } from "@webflow/react";
import { props } from "@webflow/data-types";
import { Card } from "./Card";

export default declareComponent(Card, {
  name: "Card",
  description: "A card with Tailwind styling",
  props: {
    title: props.Text({
      name: "Title",
      defaultValue: "Card Title",
    }),
    description: props.Text({
      name: "Description",
      defaultValue: "Card description goes here.",
    }),
    featured: props.Boolean({
      name: "Featured",
      defaultValue: false,
    }),
  },
});

npx webflow library bundle --public-path http://localhost:4000/