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

# Using Exported Components

> Guides for React developers on how to import, configure, and extend Exported Components in their applications.

Once you've exported your components, you can use them in your React project. We recommend deploying that project on [Webflow Cloud](/webflow-cloud/getting-started) so your DevLink components ship alongside the rest of your Webflow site. This section provides guides for integrating Exported Components with various frameworks, styling and theming, data and state integration, and best practices for usage.

## Using Exported Components

#### Apply Webflow's design system globally

To apply Webflow's design system globally, import the `global.css` file at the root of your application.

**`app/layout.tsx`**

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

#### Wrap your application in the DevLinkProvider component

Wrap your application in the `DevLinkProvider` component to ensure all exported components have access to Webflow Interactions.
`DevLinkProvider` handles both Classic Interactions (IX2) and Interactions with GSAP (IX3), so there is no separate provider to compose.
Animation code for IX3 is lazy-loaded — DevLink fetches the IX3 runtime and the GSAP bundle only when a component that uses them mounts.

**`app/layout.tsx`**

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

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <DevLinkProvider>
          {children}
        </DevLinkProvider>
      </body>
    </html>
  );
}
```

#### Use the Webflow alias

To import the components and styles into your React project, you can use the DevLink alias. To set up the alias, update the paths in `tsconfig.json` to the correct location of your DevLink components.

**`tsconfig.json`**

```json title="tsconfig.json"
{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"],
      "webflow/*": ["./webflow/*"]
    }
  }
}
```

#### Use the exported components

Now you can import and use your Webflow components in your application. This particular example uses three components exported from Webflow via DevLink: `Hero`, `Card`, and `Button`.

You can use them in your application:

**`app/page.tsx`**

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

export default function Home() {
  return (
    <main>
      <Hero />
      <Card />
      <Button />
    </main>
  );
}
```

> **Always include the component name in the import**
>
> Always include the component name in the import. For example, `import { Hero } from 'webflow/Hero';` instead of `import { Hero } from 'webflow';`.

## Learn more

#### [Getting Started](/devlink/docs/quick-start/quick-start-component-export)

How to setup DevLink and export components to a React project.

#### [Framework Guides](/devlink/usage/framework-guides)

Specific guides for integrating DevLink with various frameworks, including Next.js (App Router & Pages Router), Remix, Gatsby, and Vite/CRA.

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

How to override DevLink component styles using CSS Modules, global CSS imports, reusing Webflow classes, targeting namespaced selectors, and advanced configuration.

#### [Troubleshooting DevLink](/devlink/docs/component-export/troubleshooting)

Solutions for common issues encountered when working with DevLink, including authentication, component export, styling, interactions, and framework-specific problems.

> Guides for React developers on how to import, configure, and extend Exported Components in their applications.

## Docs

- [Framework Guides](https://developers.webflow.com/devlink/usage/framework-guides.md): Guides for integrating DevLink with various frameworks, including Next.js, Remix, Gatsby, and Vite/CRA.
- [Styling and Theming](https://developers.webflow.com/devlink/usage/styling-and-theming-overrides.md): How to override DevLink component styles using CSS scopes, global CSS imports, and advanced configuration.