Edit Page

#Stack

Stacks help you easily create flexible and automatically distributed layouts with Frames.

The Stack Component is based on a Frame, which means that it supports all Frame properties. Think of Stacks as smart layout containers for your Frames. Add a few Frames, and they will automatically be distributed within the Stack. Easily change the distribution, gap, or padding properties. They’re especially useful for quickly creating lists or adaptive layouts. Stacks set Frame children to relative positioning when added.

  • Create responsive layouts
  • Create sortable lists
  • Relative positioning and padding
import * as React from "react"
import { Frame, Stack } from "framer"

export function MyComponent() {
  return (
    <Stack size={100}>
      <Frame background="#09F" size={25} radius="50%" />
      <Frame background="#05F" size={25} radius="50%" />
    </Stack>
  )
}

#Content

#direction: StackDirection

Defines the flow direction of the stack contents, either "vertical" or "horizontal". Set to "vertical" by default.

// Vertical
<Stack direction="vertical" />

// Horizontal
<Stack direction="horizontal" />

#gap: number

The gap between items in the stack. Set to 10 by default.

<Stack gap={120} />

#alignment: StackAlignment

Defines the distribution of the stack contents on the alternative axis to the direction. Can be one of "start", "end", or "center". Set to "center" by default.

<Stack alignment="end" />

#distribution: StackDistribution

Defines the distribution of the stack contents. Set to "space-around" by default, which makes the contents spread evenly across the container.

  • "start" — from the leading edge of the container.
  • "center" — centered within the container.
  • "end" — from the trailing edge of the container.
  • "space-between" — spread evenly in the container.
  • "space-around" — spread evenly with excess applied at the start / end.
  • "space-evenly" — spread with equal padding between contents.
// Default
<Stack distribution="space-around" />

// Start
<Stack distribution="start" />

// Center
<Stack distribution="center" />

// End
<Stack distribution="end" />

// Space Between
<Stack distribution="space-between" />

// Space Around
<Stack distribution="space-around" />

// Space Evenly
<Stack distribution="space-evenly" />

#Padding

#padding: number

Padding to be applied to all sides of container. Set to 0 by default.

To specify different padding for each side you can provide individual paddingTop, paddingLeft, paddingRight and paddingBottom values.

<Stack padding={20} />

#paddingTop: number

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

<Stack paddingTop={20} />

#paddingRight: number

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

<Stack paddingRight={20} />

#paddingBottom: number

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

<Stack paddingBottom={20} />

#paddingLeft: number

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

<Stack paddingLeft={20} />