Edit Page


The Page Component allows you to create horizontally or vertically swipeable areas

The Page Component is based on a Frame, which means that it supports all Frame properties. Add Frames to a Page to create pages to swipe between. They will be stretched to the size of the page component by default, but can also be set to auto, to maintain their original size.

  • Create horizontal or vertical pages
  • Create scrollable lists that snap to content
  • Use custom transitions like 3D and Pile
import * as React from "react"
import { Frame, Page } from "framer"

export function MyComponent() {
  return (


#alignment: PageAlignment

Alignment of the pages within the component. Either "start", "center", or "end". Set to "start" by default.

<Page alignment="center" />

#animateCurrentPageUpdate: booleanBeta

Determines whether the component should animate page changes. Set to true by default.

<Page animateCurrentPageUpdate={false} />

#contentWidth: PageContentDimension | number

Width of the pages within the component. Either "auto" or "stretch" or a numeric value. Set to "stretch" by default.

<Page contentWidth="auto" />

#currentPage: number

Index of the current page. Set to 0 by default.

<Page currentPage={5} />

#defaultEffect: PageEffect

Pick one of the predefined effects. Either "none", "cube", "coverflow", "wheel" or "pile". Set to "none" by default.

<Page defaultEffect={"coverflow"} />

#gap: number

A number describing the gap between the page elements. Set to 10 by default.

<Page gap={0} />

#momentum: boolean

When enabled you can flick through multiple pages at once.

<Page momentum />


#padding: number

Padding to be applied to all sides. Set to 0 by default. To specify different padding for each side, provide individual paddingTop, paddingLeft, paddingRight and paddingBottom values.

<Page padding={20} />

#paddingTop: number

Value for the top padding of the container. Set to 0 by default.

<Page paddingTop={20}  />

#paddingRight: number

<Page paddingRight={20}  />

Value for the right padding of the container. Set to 0 by default.

#paddingBottom: number

<Page paddingBottom={20}  />

Value for the bottom padding of the container. Set to 0 by default.

#paddingLeft: number

<Page paddingLeft={20}  />

Value for the left padding of the container. Set to 0 by default.


#onChangePage(currentIndex, previousIndex, pageComponent): void

A callback that will be invoked when changing the page.

    onChangePage={(current, previous, page) => {
        console.log(current, previous, page)
currentIndex: number

The current page number

previousIndex: number

The index of the previous page

pageComponent: Page

The Page component for the current page.



No custom effect is applied. This is the default.

<Page defaultEffect={"none"} />


Each page is positioned as a 3D cube, connected to the current page.

<Page defaultEffect={"cube"} />

#Cover Flow

Each page is positioned in 3D, behind the current page.

<Page defaultEffect={"coverflow"} />


Each page is gently titled in 3D, like a wheel.

<Page defaultEffect={"wheel"} />


Each page is stacked behind the current page.

<Page defaultEffect={"pile"} />