The Configurator Components Library is a set of headless UI components that form the foundation of the Configurator UIKit for Framer.
These React-based UI components are optimized for seamless integration within Framer, while also being fully compatible with standalone React applications.
To integrate the UI components into a Framer application, start by creating a new code file (e.g. ConfiguratorLib). Import the configurator-ts bundle package and export the components you need.
The exported components will then be available in the assets panel as local components.
import type {ComponentType} from "react";
import {ConfiguratorFramer} from "https://ga.jspm.io/npm:@viamedici-spc/configurator-framer-bundle@1.1.0/dist/index.js";
export const Configuration: ComponentType = ConfiguratorFramer.Configuration;
export const ChoiceSelect: ComponentType = ConfiguratorFramer.ChoiceSelect;
export const SelectionToggle: ComponentType = ConfiguratorFramer.SelectionToggle;Framer allows direct importing of npm packages, such as @viamedici-spc/configurator-framer, as long as the package and all its dependencies are compliant with the JavaScript Module System.
However, there is a limitation: you don't have control over the version of the referenced package. Once imported, updating to a newer version becomes impossible. Hopefully Framer support this in the future.
To address this, the library is also provided as a bundled package with all dependencies integrated. This allows you to directly import the hosted index.js module, ensuring version control and easier updates.
Below are demo configurator applications that showcase the UI components from the Configurator UIKit in action:
This project is licensed under the MIT License - see the LICENSE file for details.