Dave Fumberger


Display and dismiss a modal using code overrides.

Also includes a number of styling options including:

  • Transition Type (Top / Bottom / Scale)
  • Corner Radius
  • Backdrop Alpha
  • Backdrop Blur
  • Shadow Radius / Offset / Color


Add the ‘Modal’ component to your frame and connect it to the frame you wish to display as a modal.

The ‘Modal’ component itself won’t display any content in the frame once connected.

Then using an override change the ‘active’ property/


Property Description
active                   If modal is shown or not
onDismiss Called when user clicks the background. You need to update the ‘active’ override in here to make modal dismiss

Example Overrides

Example connecting a button to show modal:

import { Override, Data } from “framer”

const data = Data({
    modalActive: false,

export function isModal(): Override {
    return {
        active: data.modalActive,
        onDismiss() {
            data.modalActive = false

export function isModalButton(): Override {
    return {
        onClick() {
            data.modalActive = true


Any questions, contact me @djfumberger /


14 May 2019 Added option to blur background

13 May 2019 Initial Release