Importing Code ComponentsInstallation

Frameworks and libraries

Learn how to use CSS frameworks and component libraries with code components.

Code Components work with a wide range of styling approaches, including CSS preprocessors, utility frameworks, and component/style libraries.

Because Code Components render inside a Shadow DOM, some tools that inject styles into the global document.head need additional configuration to scope styles correctly. Webflow provides utilities for popular CSS-in-JS libraries (e.g. Emotion, styled-components) so they can inject styles directly into the Shadow Root.

Most setups just require a small addition to your webpack configuration and an import in your component. For CSS-in-JS solutions, you’ll wrap your components in a Shadow DOM provider.

CSS frameworks

To use Tailwind CSS with your code components, configure PostCSS to process Tailwind classes:

1

Install Tailwind CSS

Install Tailwind CSS and its PostCSS plugin:

npm install tailwindcss @tailwindcss/postcss postcss
2

Configure PostCSS

Add the Tailwind PostCSS plugin to your postcss.config.mjs file:

postcss.config.mjs
const config = {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};
export default config;
3

Create Tailwind styles

Create a CSS file that imports Tailwind:

globals.css
@import "tailwindcss";
4

Configure global decorators

Create a global decorators file that imports your Tailwind CSS:

globals.ts
import "./globals.css";

Then reference it in your webflow.json:

webflow.json
{
  "library": {
    "globals": "./src/globals.ts"
  }
}
5

Use Tailwind classes

Write your React components using Tailwind utility classes. The global styles are automatically applied to all components:

import * as React from "react";
interface BadgeProps {
  text: string;
  variant: 'Light' | 'Dark';
}
export const Badge = ({ text, variant }: BadgeProps) => (
  <span
    className={`inline-block rounded-full px-3 py-1 text-sm font-medium ${
      variant === 'Light'
        ? 'bg-gray-100 text-gray-800'
        : 'bg-gray-800 text-white'
    }`}
  >
    {text}
  </span>
);

To use styled-components with code components, install the @webflow/styled-components-utils package and configure a global decorator to inject styles into the Shadow DOM.

1

Install the styled-components utility library

Install the utility library:

npm i @webflow/styled-components-utils

This package requires the following peer dependencies:

npm i styled-components react react-dom
2

Configure global decorators

Create a global decorators file that exports the styled-components decorator:

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

Then reference it in your webflow.json:

webflow.json
{
  "library": {
    "globals": "./src/globals.ts"
  }
}
3

Use styled-components in your component

Write your React component using styled-components. The global decorator automatically wraps all components:

import React from "react";
import styled from "styled-components";
const StyledButton = styled.button`
  background-color: #007bff;
`;
interface ButtonProps {
  buttonText: string;
}
export const Button = ({ buttonText }: ButtonProps) => {
  return <StyledButton>{buttonText}</StyledButton>;
};

To use Emotion with code components, install the @webflow/emotion-utils package and configure a global decorator to inject styles into the Shadow DOM.

1

Install the Emotion utility library

In your terminal, run the following command to install the Emotion utility package:

npm i @webflow/emotion-utils

This package requires the following peer dependencies:

npm i @emotion/cache @emotion/react react react-dom
2

Configure global decorators

Create a global decorators file that exports the Emotion decorator:

globals.ts
import { emotionShadowDomDecorator } from "@webflow/emotion-utils";
export const decorators = [emotionShadowDomDecorator];

Then reference it in your webflow.json:

webflow.json
{
  "library": {
    "globals": "./src/globals.ts"
  }
}
3

Use Emotion in your component

Write your React component using Emotion. The global decorator automatically wraps all components:

import React from "react";
import styled from "@emotion/styled";
const StyledButton = styled.button`
  background-color: #007bff;
`;
interface ButtonProps {
  buttonText: string;
}
export const Button = ({ buttonText }: ButtonProps) => {
  return <StyledButton>{buttonText}</StyledButton>;
};

Component libraries

Material UI uses Emotion for styling. Install the @webflow/emotion-utils package and configure a global decorator to inject styles into the Shadow DOM.

1

Install the Emotion utility library

In your terminal, run the following command to install the Emotion utility package:

npm i @webflow/emotion-utils

This package requires the following peer dependencies:

npm i @mui/material @emotion/react @emotion/cache
2

Configure global decorators

Create a globals file that exports the Emotion decorator:

globals.ts
import { emotionShadowDomDecorator } from "@webflow/emotion-utils";
export const decorators = [emotionShadowDomDecorator];

Then reference it in your webflow.json:

webflow.json
{
  "library": {
    "globals": "./src/globals.ts"
  }
}
3

Use Material UI in your component

Write your React component using Material UI. The global decorator automatically wraps all components:

import React from "react";
import { Button } from "@mui/material";
interface ButtonProps {
  children: React.ReactNode;
  variant?: "text" | "outlined" | "contained";
  color?: "primary" | "secondary" | "error" | "info" | "success" | "warning";
  onClick?: () => void;
}
export const CustomButton = ({
  children,
  variant = "contained",
  color = "primary",
  onClick,
}: ButtonProps) => {
  return (
    <Button variant={variant} color={color} onClick={onClick}>
      {children}
    </Button>
  );
};

Shadcn/UI is a component library built on Tailwind CSS that provides pre-built, accessible React components. It works with code components but requires path alias configuration. Follow these steps after setting up Tailwind CSS:

1

Configure path aliases

Shadcn/UI uses path aliases that need to be configured in your webpack setup. Add this to your webpack configuration:

webpack.webflow.js
module.exports = {
    resolve: {
        alias: {
            "@": process.cwd(), // Maps @ to your project root
        },
    },
};

For detailed webpack configuration options, see the bundling and import guide.

Preprocessors & post-processing

Configure your project to use Sass with the following steps:

1

Install the Sass loaders

Install the loaders as development dependencies:

npm install --save-dev sass sass-loader
2

Create a custom webpack configuration

Create a webpack.webflow.js file to customize the webpack configuration to use the Sass loader:

webpack.webflow.js
module.exports = {
module: {
        rules: (currentRules) => {
        const currentCSSRule = currentRules.find(
            (rule) =>
            rule.test instanceof RegExp &&
            rule.test.test("test.css") &&
            Array.isArray(rule.use)
        );
        return [
            ...currentRules,
            {
            test: /\.scss$/,
            use: [...currentCSSRule.use, "sass-loader"],
            },
        ];
        },
    }
}
3

Update your Webflow configuration

Update your webflow.json file to use the custom webpack configuration:

webflow.json
{
    "library": {
      "name": "React Components Library",
      "components": ["./src/**/*.webflow.@(js|jsx|mjs|ts|tsx)"],
      "bundleConfig": "./webpack.webflow.js"
    }
  }
4

Use Sass in your code component

Import Sass in your code component definition file:

src/components/Button.webflow.tsx
import '../styles/button.scss';
// Declare the component

Configure your project to use Less with the following steps:

1

Install the Less loaders

Install the loaders as development dependencies:

npm install --save-dev less less-loader
2

Create a custom webpack configuration

Create a webpack.webflow.js file to customize the webpack configuration to use the Sass loader:

webpack.webflow.js
// webpack.webflow.js
module.exports = {
    module: {
      rules: (currentRules) => {
        const currentCSSRule = currentRules.find(
          (rule) =>
            rule.test instanceof RegExp &&
            rule.test.test("test.css") &&
            Array.isArray(rule.use)
        );
        return [
          ...currentRules,
          {
            test: /\.less$/i,
            use: [...currentCSSRule.use, "less-loader"],
          },
        ];
      },
    },
  };
3

Update your Webflow configuration

Update your webflow.json file to use the custom webpack configuration:

webflow.json
{
    "library": {
      "name": "React Components Library",
      "components": ["./src/**/*.webflow.@(js|jsx|mjs|ts|tsx)"],
      "bundleConfig": "./webpack.webflow.js"
    }
  }
4

Use less in your code component

Import less in your code component definition file:

src/components/Button.webflow.tsx
import '../styles/button.less';
// Declare the component

Learn about additional configuration options in the bundling and import guide.

Next steps

Troubleshooting

If you’re getting errors when sharing to Webflow, try the following:

  • Ensure you’ve installed the Webflow CLI locally within the project. If you have a global installation, try running the command with npx to ensure the correct version is being used.