Sygnal Components
Webflow's components have seen significant development in recent years and have become a central part of the Webflow platform.
At the same time, Webflow's basic elements are somewhat outdated, difficult to extend and customize to specific needs, and complex components like forms and navs are unsuited for use with Webflow's build mode.
Project Concept
This R&D project explores the possibility of recreating Webflow's basic elements as components.
Goals;
Customizable. Many native elements are "as is" and customizing them is a challenge that requires CSS finesse and sometimes JS hacks. We want to encapsulate and expose common points of customization;
e.g. easier custom checkboxes, buttons with icons and disable states, drag-and-drop form file uploaders...
Extensible. When possible, it should be possible for designers to crack open and build on these components.
Stylable. A full range of styling should be supported through classes and variables, as well as possibly themes.
Build mode support, especially for marketing team-built forms.
Learning goals;
Test the limits of both native and code (React) components, identify the gaps, create workarounds where needed.
Test the limits of component styling, create workarounds where needed including CSS isolation.
Work towards a "best" set of componentry for basic site construction, with the goal of making it relatively easy for someone with low design experience to assemble a functional, good looking site.
Technical Notes
Sygnal Components leverages the mechanics of Webflow's Native components ( NCs ), Code Components ( CCs ), and Shared Libraries in our approach.
See Technical Notes for more on the capabilities and strengths of each approach.
CC and NC are not official Webflow abbreviations, but we'll use them in these docs for brevity.
Deployment Paths
Deploying to a site
Can build the NC directly in the site
Or install from a workspace Shared Library
Deploy the CC to the workspace, using an authorized API_KEY
Import the CC lib into the project. All components are then available.
Sharing to sites in a Workspace
Clone the project
Clean out all non-NC content
Turn the project into a Shared Library
The components will be accessible to other sites in the same Workspace. Note that in shared lib form, styling rules change significantly.
Same as above, CC libs are installed at the workspace level.
Sharing to another Workspace
Clone the project
Transfer to the target workspace
Client then sets it up as a shared lib
Client then installs that lib on their desired project
Cross-workspace updates are not possible currently.
Same process as above, but must auth and setup a separate API_KEY for each workspace.
Sharing to the Community
? Cloneable + instructions Note that shared libs cannot currently be exposed as cloneables, which complicates update processes.
? Github repo + instructions
Currently components are not supported for cross-project copy-paste, or in Marketplace Libs.
Inspiration
This project begin in early 2025 after a post I made in the ACEs forum.
It gained traction, validation, and inspiration from Timothy Ricks' video here, discussing ways to solve specific styling constraints of Webflow's Form elements by using custom elements instead. This added meaningful justification to the approach, and supported my perspective that Webflow's native elements are somewhat outdated.
I highly recommend that you watch it to understand some of this project's underlying motivations.
Last updated