Dave Fumberger

Open in Framer X

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

Opening Package in Framer X...

Don’t have Framer X yet?Start your Free Trial

By using our website, you agree to the use of cookies as described in our  Privacy Policy —
I Agree