Learn Code Components in Webflow
Ever felt limited by Webflow's native components? Discover how to create your own using React and seamlessly integrate them into Webflow. This guide provides a quick and dirty tutorial on building shareable code components that will make you feel like a Webflow wizard.
React in Webflow Course: https://www.patreon.com/collection/84...
The Code: https://codesandbox.io/p/devbox/webfl...
My Terminal (Warp): https://app.warp.dev/referral/WE36Q4
Checkout my all-in-one AI Chat app: https://jupita.chat
Work with me: https://samuelgregory.co.uk
-
Support the content: / 0x5am5
Twitter: @0x5am5
Buy merch: https://flowst8.dev/store
🤖 AI Tools I Use (some affiliate)
Cursor (IDE of Choice): https://cursor.ai
Replit (Favourite Vibe Code Tool) : https://samuelgregory.co.uk/replit
Perplexity (deep research): https://samuelgregory.co.uk/perplexity
Claude (Code): https://claude.ai/api/referral/jZ9vnM...
Warp Terminal: https://samuelgregory.co.uk/warp
Manus AI Agent: https://samuelgregory.co.uk/manus
👍 Services I Love
Domain Names: https://samuelgregory.co.uk/namecheap
Hosting: https://www.hostg.xyz/aff_c?offer_id=...
Online Storage ($200 credit): https://samuelgregory.co.uk/digitalocean
📷 My Gear 💻
Sony A7c II: https://amzn.to/40qaYEJ
Lens Sigma 16-28mm: https://amzn.to/3IaDzqx
Microphone Samson QU2: https://amzn.to/3TkshCE
💻
Macbook Pro M1 Pro: https://amzn.to/3oEVbS0
iPad Pro M4: https://amzn.to/3YIMpBM
Magic Keyboard: https://amzn.to/421B26P
Apple Magic Trackpad: https://amzn.to/3YIqwm3
📚 My Books
The Full Stack Agency: https://flowst8.dev/store
Lingo: Agile: https://thefullstackagency.gumroad.co...
Lingo: Startup: https://thefullstackagency.gumroad.co...
--------------------------
⏰ Timestamps
--------------------------
00:00 Intro
01:14 Getting started from scratch
02:58 Project setup (start here for existing projects)
03:55 Creating a React component
07:08 Creating a Webflow Code Component with our React component
09:59 Pushing Code Components to Webflow
11:06 Adding component to Webflow website
webflow, code components, react