Add Webflow components to your app – Webflow tutorial

Bring your Webflow site's navigation and footer into a Webflow Cloud app using DevLink, so visitors can move seamlessly between your marketing site and your app.

In this lesson, we'll export reusable components from Webflow, add them to an Astro app, configure their styles and interactions, and check that navigation works across the entire website.

Then, we'll push our changes to GitHub using GitHub Desktop, deploy the updated app with Webflow Cloud, and walk through how to keep exported components up to date when designs change in Webflow.

Want to learn more? Take the full Webflow Cloud course:
https://university.webflow.com/courses/take-your-app-live-webflow-cloud

**You'll learn how to:**
- Prepare and export Webflow components using DevLink
- Add navigation and footer components to an Astro app
- Configure styles, fonts, and interactions
- Check navigation links between your site and app
- Deploy updates through GitHub and Webflow Cloud
- Re-export components when your Webflow design changes

Follow the written guide at https://developers.webflow.com for step-by-step instructions.

**Chapters:**
00:00 — Introduction
01:12 — Step 1 — Prepare components
02:03 — Step 2 — Export with DevLink
03:05 — Step 3 — Add components to the app
04:05 — Step 4 — Check navigation links
04:55 — Step 5 — Push to GitHub
05:43 — Step 6 — Test the experience
06:47 — Update exported components

----------

Get started with Webflow: https://wfl.io/2r7cVUW
Join the Webflow Community: https://webflow.com/community

https://webflow.com
https://university.webflow.com/
https://x.com/webflow
https://www.instagram.com/webflow
https://www.tiktok.com/@webflow
https://facebook.com/webflow