Import 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
1const config = {
2  plugins: {
3    "@tailwindcss/postcss": {},
4  },
5};
6
7export default config;
3

Import Tailwind styles

Import Tailwind in your main CSS file:

globals.css
1@import "tailwindcss";
4

Import styles in your component

Import your CSS file in each code component:

Badge.webflow.tsx
1import { Badge } from './Badge';
2import { props } from '@webflow/data-types';
3import { declareComponent } from '@webflow/react';
4
5import './globals.css'; // Import your styles
6
7export default declareComponent(Badge, {
8    name: 'Badge',
9    description: 'A badge with variants',
10    group: 'Info',
11    props: {
12        text: props.Text({
13            name: "Text",
14            defaultValue: "Hello World",
15        }),
16        variant: props.Variant({
17            name: "Variant",
18            options: ["Light", "Dark"],
19            defaultValue: "Light",
20        }),
21    },
22});
5

Use Tailwind classes

Now you can use Tailwind utility classes in your components:

Badge.tsx
1import * as React from "react";
2
3interface BadgeProps {
4  text: string;
5  variant: 'Light' | 'Dark';
6}
7
8export const Badge = ({ text, variant }: BadgeProps) => (
9  <span
10    className={`inline-block rounded-full px-3 py-1 text-sm font-medium ${
11      variant === 'Light' 
12        ? 'bg-gray-100 text-gray-800' 
13        : 'bg-gray-800 text-white'
14    }`}
15  >
16    {text}
17  </span>
18);

To use styled-components with code components, install the @webflow/styled-components-utils package and wrap your component in the StyledComponentsShadowDomProvider.

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

Wrap your component in the Shadow DOM provider

In your React component, wrap your component in the StyledComponentsShadowDomProvider component:

1import React from "react";
2import { StyledComponentsShadowDomProvider } from "@webflow/styled-components-utils";
3import styled from "styled-components";
4
5const StyledButton = styled.button`
6  background-color: #007bff;
7`;
8
9interface ButtonProps {
10  buttonText: string;
11}
12
13export const Button = ({ buttonText }: ButtonProps) => {
14  return (
15    <StyledComponentsShadowDomProvider>
16      <StyledButton>{buttonText}</StyledButton>
17    </StyledComponentsShadowDomProvider>
18  );
19}

To use Emotion with code components, install the @webflow/emotion-utils package and wrap your components in the EmotionCacheShadowDomProvider. The provider automatically detects whether it’s running inside a Shadow DOM and configures Emotion’s cache accordingly. When inside a Shadow DOM, it injects styles into the Shadow Root; otherwise, it falls back to the document head.

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

Wrap your React component in the Shadow DOM provider

In your React component, wrap your component in the EmotionCacheShadowDomProvider component:

1import React from "react";
2import { EmotionCacheShadowDomProvider } from "@webflow/emotion-utils";
3import styled from "@emotion/styled";
4
5const StyledButton = styled.button`
6  background-color: #007bff;
7`;
8
9interface ButtonProps {
10  buttonText: string;
11}
12
13export const Button = ({ buttonText }: ButtonProps) => {
14  return (
15    <EmotionCacheShadowDomProvider>
16      <StyledButton>{buttonText}</StyledButton>
17    </EmotionCacheShadowDomProvider>
18  );
19}

Component libraries

To use Material UI with Emotion, install the @webflow/emotion-utils package and wrap your components in the EmotionCacheShadowDomProvider. The provider automatically detects whether it’s running inside a Shadow DOM and configures Emotion’s cache accordingly. When inside a Shadow DOM, it injects styles into the Shadow Root, otherwise, it falls back to the document head.

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

Wrap your component in the Shadow DOM provider

In your React component, wrap your component in the EmotionCacheShadowDomProvider component:

1import React from "react";
2import { Button } from "@mui/material";
3import { EmotionCacheShadowDomProvider } from "@webflow/emotion-utils";
4
5interface ButtonProps {
6  /** Button text content */
7  children: React.ReactNode;
8  /** Button variant style */
9  variant?: "text" | "outlined" | "contained";
10  /** Button color */
11  color?: "primary" | "secondary" | "error" | "info" | "success" | "warning";
12  /** Click handler */
13  onClick?: () => void;
14}
15
16/**
17 * A customizable button component built on Material-UI
18 */
19export const CustomButton = ({
20  children,
21  variant = "contained",
22  color = "primary",
23  onClick,
24}: ButtonProps) => {
25  return (
26    <EmotionCacheShadowDomProvider>
27      <Button
28        variant={variant}
29        color={color}
30        onClick={onClick}
31      >
32        {children}
33      </Button>
34    </EmotionCacheShadowDomProvider>
35  );
36};

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
1module.exports = {
2    resolve: {
3        alias: {
4            "@": process.cwd(), // Maps @ to your project root
5        },
6    },
7};
8

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
1module.exports = {
2module: {
3        rules: (currentRules) => {
4        const currentCSSRule = currentRules.find(
5            (rule) =>
6            rule.test instanceof RegExp &&
7            rule.test.test("test.css") &&
8            Array.isArray(rule.use)
9        );
10        return [
11            ...currentRules,
12            {
13            test: /\.scss$/,
14            use: [...currentCSSRule.use, "sass-loader"],
15            },
16        ];
17        },
18    }
19}
3

Update your Webflow configuration

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

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

Use Sass in your code component

Import Sass in your code component definition file:

src/components/Button.webflow.tsx
1import '../styles/button.scss';
2
3// 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
1// webpack.webflow.js
2module.exports = {
3    module: {
4      rules: (currentRules) => {
5        const currentCSSRule = currentRules.find(
6          (rule) =>
7            rule.test instanceof RegExp &&
8            rule.test.test("test.css") &&
9            Array.isArray(rule.use)
10        );
11  
12        return [
13          ...currentRules,
14          {
15            test: /\.less$/i,
16            use: [...currentCSSRule.use, "less-loader"],
17          },
18        ];
19      },
20    },
21  };
22
3

Update your Webflow configuration

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

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

Use less in your code component

Import less in your code component definition file:

src/components/Button.webflow.tsx
1import '../styles/button.less';
2
3// 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.