Webflow component type overview

Updated

Compare component types in Webflow

Webflow supports three types of components: Webflow components, DevLink code components, and AI code components. Each has a different creation flow and serves different use cases on your site.

Compare component types

Webflow components DevLink code components AI code components
Definition Components built visually in Webflow. Components created in an external codebase (React), then imported into Webflow. Components created natively in Webflow with the Webflow AI Assistant (written in React).
Who creates them Designers and marketers. Developers. Developers, designers, or marketers.
How they're created Built visually on Webflow's drag-and-drop canvas or on the Component Canvas. Written in React in an external IDE, then imported into Webflow via DevLink. Generated from a natural language prompt to the Webflow AI Assistant inside Webflow.
Source of truth Webflow — changes must be made in Webflow. External codebase — changes must be made in code. Webflow — changes must be made in Webflow.
Skill required Low — visual skills only. High to create — React proficiency required. Low to use once imported. Low — natural language prompts; no code required.
Governance Site roles and permissions, and custom roles (Enterprise only). Site roles and permissions, and custom roles (Enterprise only). Webflow AI toggle, site roles and permissions, and custom roles (Enterprise only).
DevLink Export only — Webflow components can be exported as React via DevLink Export for use in an external codebase. Import only — DevLink packages React components from an external codebase into Webflow. Not supported — AI code components live natively in Webflow and can't be exported via DevLink.
Webflow Cloud Can be exported as React via DevLink Export and used inside a Webflow Cloud app, keeping the site and app visually consistent. The React code that powers a DevLink code component can live in the same external codebase as a Webflow Cloud app. Not currently usable in Webflow Cloud apps. AI code components live only in Webflow and can't be exported via DevLink.
Example usage Build site layouts and reusable design system patterns. Webflow components can be exported via DevLink to build full-stack web apps. Migrate a React site to Webflow, or import advanced UI components built outside Webflow. Build interactive functionality directly in Webflow — like pricing calculators, multi-step forms, and image galleries.

Learn more