Using Exported Components

Once you’ve exported your components, you can use them in your React project. This section provides guides for integrating Exported Components with various frameworks, styling and theming, data and state integration, and best practices for usage.

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

1 import { DevLinkProvider } from '@/devlink/DevLinkProvider';
2 import '@/devlink/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.

app/layout.tsx

1 import { DevLinkProvider } from '@/devlink/DevLinkProvider';
2 import '@/devlink/global.css';
3 
4 export default function RootLayout({
5   children,
6 }: {
7   children: React.ReactNode;
8 }) {
9   return (
10     <html lang="en">
11       <body>
12       {/* Wrap your application in the DevLinkProvider component */}
13         <DevLinkProvider>
14           {children}
15         </DevLinkProvider>
16       </body>
17     </html>
18   );
19 }

Use the DevLink 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       "@/devlink": ["./devlink"],
6       "@/devlink/*": ["./devlink/*"]
7     }
8   }
9 }

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

1 import { Button } from '@/devlink/Button';
2 import { Card } from '@/devlink/Card';
3 import { Hero } from '@/devlink/Hero';
4 
5 export 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 '@/devlink/Hero'; instead of import { Hero } from '@/devlink';.

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 sync, styling, interactions, and framework-specific problems.