For AI agents: a documentation index is available at the root level at /llms.txt and /llms-full.txt. Append /llms.txt to any URL for a page-level index, or .md for the markdown version of any page.
Resources
Get started
GuidesChangelog
GuidesChangelog
    • DevLink
  • Quickstarts
    • Importing components
    • Exporting components
    • Webflow Cloud
  • Exporting components
    • Setup
    • What's exported
    • Design guidelines
    • Fonts
    • Usage
      • Framework guides
      • Styling and theming
    • Troubleshooting
    • Resources
  • Reference
    • Webflow CLI
    • Migrating to DevLink Export
LogoLogo
Resources
Get started
On this page
  • Using Exported Components
  • Learn more
Exporting components

Using Exported Components

Was this page helpful?
Previous

Framework Guides

Use exported components with various frameworks, including Next.js, Remix, and Gatsby.
Next
Built with

Once you’ve exported your components, you can use them in your React project. We recommend deploying that project on Webflow Cloud 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

1

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
1import { DevLinkProvider } from 'webflow/DevLinkProvider';
2import 'webflow/css/global.css';
2

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
1import { DevLinkProvider } from 'webflow/DevLinkProvider';
2import 'webflow/css/global.css';
3
4export default function RootLayout({
5  children,
6}: {
7  children: React.ReactNode;
8}) {
9  return (
10    <html lang="en">
11      <body>
12        <DevLinkProvider>
13          {children}
14        </DevLinkProvider>
15      </body>
16    </html>
17  );
18}
3

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
1{
2  "compilerOptions": {
3    "paths": {
4      "@/*": ["./src/*"],
5      "webflow/*": ["./webflow/*"]
6    }
7  }
8}
4

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
1import { Button } from 'webflow/Button';
2import { Card } from 'webflow/Card';
3import { Hero } from 'webflow/Hero';
4
5export default function Home() {
6  return (
7    <main>
8      <Hero />
9      <Card />
10      <Button />
11    </main>
12  );
13}
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

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

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

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

Troubleshooting DevLink

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