Usage

Spacings

To use Stacks, you must first define a default spacing value in the Unistyles theme object. This is explained in detail in the Getting Started page.

The spacing value is measured in logical pixels, the same unit you are already familiar with for margin or padding. Stacks automatically multiplies the default spacing value by the space passed to the components.

const theme = {
  stacks: {
    spacing: 4,
  },
};
 
<Stack space={2}>…</Stack> // 4 * 2 = 8 logical pixels
<Box padding={3}>…</Box> // 4 * 3 = 12 logical pixels

Responsive Props

Stacks also supports the responsive props format. You can use responsive props to customize the spacing, number of columns, or alignments per screen size.

Let's say you have a configuration for breakpoints that defines the different screen sizes. This configuration could look like this:

const breakpoints = {
  mobile: 0,
  tablet: 768,
  desktop: 998,
} as const;

In Stacks, the responsive prop can be used to set values for different screen sizes. This prop can take either a primitive value or a responsive prop format.

When you pass a primitive value, it applies to all the breakpoints in your configuration.

<Stack space={2}>…</Stack>

On the other hand, a responsive prop is an array of values where you can specify different values to apply to different breakpoints. The first value in the array is applied to the mobile breakpoint, the second to the tablet breakpoint, and the third to the desktop breakpoint.

For example:

<Stack space={[1]}>…</Stack>
<Stack space={[1, 4]}>…</Stack>
<Stack space={[1, 4, 8]}>…</Stack>

• if you pass [1], the same value 1 will be used across all breakpoints.
• if you pass [1, 4], the value 1 will apply to the mobile breakpoint, and 4 will apply to the tablet and desktop breakpoints.
• if you pass [1, 4, 8], the value 1 will apply to the mobile breakpoint, 4 to the tablet breakpoint, and 8 to the desktop breakpoint.