Components-only mode allows you to limit page building in Builder to just your custom React components - with or without custom styling being allowed in Builder, based on your choosing.
See our design system example for a great example of building a design system in Builder.io with React components
You can set this setting from your organizations settings page (requires admin or developer permissions), or per-model from the detail page for editing the model. You can also configure this setting on a per use basis by using roles and permissions
Learn more about this mode in the short video below!
Component-only mode means you can only use your own components. For instance if you have a React app and you want to give your marketing team the ability to make landing pages, but restrict them to using components you define.
Then, you can assemble Builder pages using your React components. This is different from the normal default mode, where you have full freeform control. What this means is in default mode, you can fully customize and style everything, but using components-only mode is useful if you want strict styles that you don’t want your team to be able to change (e.g. width, font style, color, etc).
👉Tip: if you want to make most editors be in components-only mode, but still allow designers and developers the ability to make templates and symbols with precise control, you can alternatively use permissions instead of the global components-only mode setting, giving all who should be in this mode editor permissions only
When you turn components-only mode on you get the below additional options:
Also note that if you use components-only mode with React and disable "allow built in components", you can use the lite build of our React SDK for smaller bundle sizes
Most of what components-only mode accomplishes can also be accomplished with permissions. Anyone with editor permissions is always in components-only mode, regardless of your organization or model settings.
This is often our recommended approach - use roles to decide who should have what capabilities. Those who should only use components can do so, and those who have design permissions can also easily make templates and symbols editors can use, for when you need flexible new content without waiting on developer release cycles.