> This page is for DevLink.

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://developers.webflow.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://developers.webflow.com/_mcp/server.

# Setup

> Learn how to set up and configure your React project for exported components.

This reference covers the configuration required to export Webflow components into a React project using DevLink.

## Install the Webflow CLI

Install the CLI as a development dependency to your React project to bundle and publish your component library:

```bash
npm install -D @webflow/webflow-cli@latest
```

> **Minimum versions**
>
> DevLink Export requires `@webflow/webflow-cli` v1.19.0 or later, running on Node.js v22 or higher. The minimum supported React version for using exported components is v18.

## Create a configuration file

DevLink looks for a `webflow.json` file in the root of your project, which defines settings for DevLink setup and export.
You can generate this file with the `webflow devlink export` command as described in [Quickstart: DevLink Export](/devlink/docs/quick-start/quick-start-component-export), or you can write your own.

Here is an example `webflow.json` file for DevLink Export:

```json
{
  "siteId": "69d8ea201293ab4c87c1a2e3",
  "devlink-export": {
    "rootDir": "./webflow",
    "components": ".*",
    "componentGroups": ".*",
    "ts": true,
    "cssScopes": true,
    "relativeHrefRoot": "/"
  }
}
```

> **Note**
>
> The `.webflowrc.js` file that previous versions of DevLink used is deprecated.
> Projects should migrate to `webflow.json`.

### Configuration options

`siteId` sits at the top of `webflow.json`; every other option below lives under the `devlink-export` object.

| Option                  | Description                                                                       | Default                                                                                  |
| :---------------------- | :-------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------- |
| `siteId`                | Webflow site ID                                                                   | `process.env.WEBFLOW_SITE_ID`                                                            |
| `rootDir`               | Directory to export components into                                               | `./webflow`                                                                              |
| `cssScopes`             | Enable CSS `@scope` wrapping for component styles                                 | `true`                                                                                   |
| `ts`                    | Generate TypeScript files for exported components                                 | Auto-detected from `tsconfig.json` and `.ts`/`.tsx` files in the project on first export |
| `components`            | Regex pattern to match components to export                                       | `.*`                                                                                     |
| `componentGroups`       | Regex pattern to match component groups to export                                 | `.*`                                                                                     |
| `relativeHrefRoot`      | How relative `href` values are rewritten in exported Link and Image components    | `/`                                                                                      |
| `camelCaseVariantNames` | Convert Style Variant names into camelCase values for the exported `variant` prop | `false`                                                                                  |

Details for some of these options are covered in sections below.

#### `relativeHrefRoot`

Controls how exported Link components rewrite `href` values for internal page links, section anchors, and CMS-page links. External URLs, `mailto:`, `tel:`, and asset links are exported as-is regardless of this setting.

| Value            | Description                                                                          | Notes                                                                                                                    |
| :--------------- | :----------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------- |
| `/`              | Internal page link → root-relative path; section → `#fragment`; CMS page → `/<slug>` | Default when configured via the CLI                                                                                      |
| **A string URL** | Prepend this base URL to internal paths (for example, `https://my-site.com`)         | A trailing slash on the base URL is stripped before concatenation                                                        |
| `false`          | DevLink doesn't rewrite internal links — they render as `href="#"` placeholders      | Use this when you'll override link rendering yourself, for example by passing a custom `renderLink` to `DevLinkProvider` |

##### Example:

* With `"/"`:
  * Page link to "About" → `href="/about"`
  * Section link → `href="#contact-section"`
  * CMS page link → `href="/blog/my-blog-post"`

* With `"https://my-site.com"`:
  * Page link to "About" → `href="https://my-site.com/about"`
  * Section link → `href="https://my-site.com#contact-section"`
  * CMS page link → `href="https://my-site.com/blog/my-blog-post"`

#### `camelCaseVariantNames`

By default, the `variant` prop on an exported component accepts Style Variant names exactly as you named them in Webflow, for example `"Papaya With Whip"`. Turn on `camelCaseVariantNames` to convert each variant name into a camelCase value instead, so it reads more naturally in your React code. Variant names that produce the same camelCase value get a numeric suffix so they stay unique.

Names that would produce an invalid value — like one that's just a number, or a JavaScript reserved word such as `class` — fall back to a safe placeholder instead.

##### Example:

With `camelCaseVariantNames` set to `false` (default):

```tsx
<Card variant="Papaya With Whip" />
```

With `camelCaseVariantNames` set to `true`:

```tsx
<Card variant="papayaWithWhip" />
```

Variant names `Foo-Bar` and `Foo Bar` both normalize to `fooBar`, so the second one exports as `fooBar2`.

## Next steps

#### [What's exported](/devlink/docs/component-export/whats-exported)

See the files DevLink generates and how the export is structured

#### [Styling Components](/devlink/usage/styling-and-theming-overrides)

Learn how to style components for reliable export