# Getting Started with Exported Components

> Export your Webflow components to a React project with DevLink

In this guide, you'll learn how to configure DevLink and export components to a React project. While this guide uses Next.js, Code Export works with any React-based framework.

#### Before you start

Before running this quickstart, make sure you have:

* A Webflow account and Webflow site with components to export. Or, use a [Code Export template](https://webflow.com/made-in-webflow/devlink?cloneable=true) from the Webflow marketplace. DevLink templates are pre-configured with components and styles optimized for React.
* Node.js v20.0.0 or higher and `npm` installed
* Basic familiarity with React

## 1. Configure DevLink in your app

<Steps>
  <Step title="Create a Next.js project">
    To start with a fresh Next.js project, run the following command in your terminal:

    ```bash
    npx create-next-app@latest my-devlink-app
    cd my-devlink-app
    ```

    Follow the prompts to configure your project with your preferred options.
  </Step>

  <Step title="Install the Webflow CLI">
    In your React project, install the Webflow CLI as a development dependency:

    ```bash
    npm install -D @webflow/webflow-cli
    ```
  </Step>

  <Step title="Authenticate with Webflow">
    DevLink requires API access to your site to export your design system. To grant access, run the following command in your terminal to start an authentication workflow:

    ```bash
    webflow auth login
    ```

    This command will open an authentication screen in your browser. Follow the prompts to authenticate with Webflow. Once authenticated, the CLI will create a `.env` file in the root of your project with your Site ID and API token.

    <Warning title="Existing .env file">
      If you already have a `.env` file in your project, the CLI will require you to add a `--force` flag to make changes.
    </Warning>
  </Step>

  <Step title="Configure DevLink settings">
    Create a `webflow.json` file in the root of your project and paste the following configuration:

    ```json title="webflow.json"
    {
      "devlink":{
        "host": "https://api.webflow.com",
        "rootDir": "./devlink",
        "cssModules": true,
        "relativeHrefRoot": "/"
      }
    }
    ```

    This configuration file tells DevLink where to export your components and how to handle CSS modules. Learn more about the configuration file in the [configuration file reference](/devlink/docs/component-export/installation#create-a-configuration-file).
  </Step>
</Steps>

## 2. Prepare your Webflow components

In your Webflow project, prepare any components you want to export to your React project by:

* Selecting an element or group of elements
* Right-clicking and selecting "Create Component"
* Naming your component (use clear, descriptive names)

<Frame>
  <img src="https://files.buildwithfern.com/https://webflow.docs.buildwithfern.com/ea77e26ac048f7f3e87a6049ad86965c35148ba93910c3c9abe5aefc950c26b1/products/devlink/pages/exported-components/assets/webflow-component.png" alt="Creating a Component in Webflow" width="500px" />
</Frame>

<Note>
  Only elements that have been converted to [Components](https://help.webflow.com/hc/en-us/articles/33961303934611-Components-overview) can be exported via DevLink.
</Note>

## 3. Export and use your components

<Steps>
  <Step title="Export your components">
    Run the DevLink `sync` command to export your Webflow components to your React project:

    ```bash
     webflow devlink sync
    ```

    This will create a `devlink` directory in your project containing:

    * React components for each of your Webflow components
    * CSS modules for component-specific styling
    * A global CSS file for shared styles
    * A `DevLinkProvider` component for handling interactions
  </Step>

  <Step title="Add the global DevLink styles">
    <Tip>
      Many of the code snippets import from the DevLink directory with the `@/devlink` alias. See the [troubleshooting guide](/devlink/docs/component-export/usage/troubleshooting#devlink-not-found) for more information on how to set this up in your project.
    </Tip>

    In your `app/layout.tsx` file, import the global CSS file generated by DevLink to ensure all Webflow components have access to necessary styles and Webflow style resets. Additionally, if your Webflow components have interactions set on elements, wrap your application in the `DevLinkProvider` component to enable those interactions at runtime:

    ```tsx title="app/layout.tsx"
    import './globals.css';
    import "@/devlink/global.css";
    import { DevLinkProvider } from '@/devlink/DevLinkProvider';

    export default function RootLayout({ children }) {
      return (
        <html lang="en">
          <body>
            <DevLinkProvider>{children}</DevLinkProvider>
          </body>
        </html>
      );
    }
    ```
  </Step>

  <Step title="Use your components">
    Now you can import and use your Webflow components in your application. In this particular example, it uses three components exported from Webflow via DevLink: `Hero`, `Card`, and `Button`. You can use them in your application like so:

    ```tsx title="app/page.tsx"
    import { Button } from '@/devlink/Button';
    import { Card } from '@/devlink/Card';
    import { Hero } from '@/devlink/Hero';

    export default function Home() {
      return (
        <main>
          <Hero
            heading="Welcome to My App"
            subheading="Built with Webflow and DevLink"
          />
          <Card
            title="DevLink Card"
            description="This card was designed in Webflow"
          >
            <Button>Get Started</Button>
          </Card>
        </main>
      );
    }
    ```

    <Note>
      The props set on these React components depend on the design and properties set up on the Webflow components
    </Note>
  </Step>

  <Step title="Start your development server">
    Run your application to see your Webflow components in action:

    ```bash
    npm run dev
    ```

    Visit `http://localhost:3000` in your browser to see your application with the Webflow components.
  </Step>
</Steps>

## Updating your components

When you make changes to your components in Webflow, simply run the sync command again to update them in your React project:

```bash
webflow devlink sync
```

This will update all your components while preserving any custom code or props you've added in your React application.

## Common issues and solutions

<AccordionGroup>
  <Accordion title="Authentication Error">
    If you encounter authentication issues:

    * Verify your API token has the correct permissions
    * Ensure your environment variables are properly loaded
    * Check that the `webflow.json` file is in the root directory
  </Accordion>

  <Accordion title="Missing Styles">
    If your components don't look the same as in Webflow:

    * Ensure you've imported `global.css` in your application
    * Import any additional fonts used on your site to your layout file
    * Verify that the `DevLinkProvider` is properly set up
    * Check for CSS conflicts with other styles in your project
  </Accordion>

  <Accordion title="Component Not Found">
    If a component isn't available after syncing:

    * Make sure it's properly created as a Component in Webflow
    * Check if it uses only [supported elements](/devlink/docs/component-export/design-guidelines/component-architecture#supported-elements)
  </Accordion>
</AccordionGroup>

## Next steps

<CardGroup cols={1}>
  <Card
    title="Deploy with Webflow Cloud"
    iconPosition="left"
    iconSize="12"
    icon={
        <>
            <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/CloudUpload.svg" alt="" className="hidden dark:block" />
            <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/CloudUpload.svg" alt="" className="block dark:hidden" />
        </>
    }
    href="/webflow-cloud/getting-started"
  >
    Learn how to deploy your React application with Webflow Cloud.
  </Card>

  <Card
    title="Design Guidelines"
    iconPosition="left"
    iconSize="12"
    icon={
        <>
            <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/Interactions.svg" alt="" className="hidden dark:block" />
            <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/Interactions.svg" alt="" className="block dark:hidden" />
        </>
    }
    href="/devlink/docs/component-export/design-guidelines/component-architecture"
  >
    Learn how DevLink preserves styling and interactions.
  </Card>

  <Card
    title="Props"
    iconPosition="left"
    iconSize="12"
    icon={
        <>
            <img src="https://dhygzobemt712.cloudfront.net/Icons/Dark/64px/ComponentsCode.svg" alt="" className="hidden dark:block" />
            <img src="https://dhygzobemt712.cloudfront.net/Icons/Light/64px/ComponentsCode.svg" alt="" className="block dark:hidden" />
        </>
    }
    href="/devlink/docs/component-export/design-guidelines/props-slots"
  >
    Learn how to use props to customize your components.
  </Card>
</CardGroup>