Controller Changes Variant

Create as many variants in a component as you’d like
Add the “withChangeVariant” override to the component with variants
Make sure the names of your variants in Framer are the same as in the code { mode: "Blue" }
Create your controllers and assign the overrides for the variant that they control
Check the remix file to gain a deeper understanding

Code Preview

import type { ComponentType } from "react"
import { createStore } from "https://framer.com/m/framer/store.js@^1.0.0"

const useStore = createStore({
    mode: "Blue",
})

export function withChangeVariant(Component): ComponentType {
    return (props) => {
        const [store, setStore] = useStore()
        return <Component {...props} variant={store.mode} />
    }
}

export function changeToBlue(Component): ComponentType {
    return (props) => {
        const [store, setStore] = useStore()
        return (
            <Component {...props} onClick={() => setStore({ mode: "Blue" })} />
        )
    }
}

export function changeToRed(Component): ComponentType {
    return (props) => {
        const [store, setStore] = useStore()
        return (
            <Component {...props} onClick={() => setStore({ mode: "Red" })} />
        )
    }
}
export function changeToBlack(Component): ComponentType {
    return (props) => {
        const [store, setStore] = useStore()
        return (
            <Component {...props} onClick={() => setStore({ mode: "Black" })} />
        )
    }
}

Terms of Use for Free Assets

By accessing and using this Framer Override Library, you agree to the following terms:

All code snippets provided are available for your personal and professional use. This includes personal websites, client projects, and other website projects in Framer. You are strictly prohibited from sharing, redistributing, selling these code snippets, or creating derivative works for resale or distribution. Unauthorized sharing, distribution, or selling of these code snippets is a breach of these terms and may result in termination of your access to this library, along with potential legal action.