Pluma
About
MCP Server
Getting started
Contributing
Breaking Changes
Changelog
Content
Icons
Motion
Style Utilities
Test Helpers
Tokens
Overview
Status
Accordion
AccordionGroup
Box
Card
CenterBaseline
Divider
EmptyState
Flex
FormLayout
Grid
InlineStack
Panel
Scrollable
Stack
Code
DescriptionList
Emphasis
Heading
List
Paragraph
Strong
Text
TextLabel
Truncated
Avatar
CodeBlock
Coin
Icon
Image
LabelIcon
Breadcrumbs
Link
NavItem
Page
Pagination
PlainLink
SideNav
Tabs
TabNav
Button
ButtonGroup
CloseButton
DropdownMenu
PlainButton
ToggleButton
Checkbox
CheckboxGroup
ColorPicker
Combobox
DatePicker
Form
JsonField
NumberField
OptionCard
OptionCardGroup
Radio
RadioGroup
Search
SegmentedControl
Select
Slider
TextArea
TextField
Toggle
Badge
DataTable
Filters
FormattedDateTime
FormattedRelativeTime
KeyboardShortcut
Label
ProgressBar
ProgressCircle
StatusIndicator
Table
Tag
Banner
PageLoader
SkeletonShape
SkeletonText
Snackbar
Spinner
Blanket
ConfirmationModal
Drawer
Modal
Modal manager
Popover
Tooltip
VisuallyHidden
Anti-patterns
Combobox with Add New
Density
Inline Form Controls
Refinement levers
Search with DropdownMenu
States
Voice
Ember Floating UI
Ember prop spreading
ModalPrimitive
PlumaProvider
PopoverPrimitive
Portal
React Yield
fly-alert
fly-badge
fly-btn
fly-card
fly-close
fly-label
fly-panel
fly-progress
fly-range
fly-spinner
fly-tag
Forms
Lists
Tailwind
Componentsv2.170.1
Iconsv1.15.0
MCPv0.8.18
Tokensv0.34.1

Stack

Github
Storybook
Legacy component

A utility component for creating vertical flex containers.

Importing

The component can be imported via:

import { Stack } from '@customerio/pluma-components/react';
<Stack gap="200">
  <Box backgroundColor="information" p="200" />
  <Box backgroundColor="information" p="200" />
  <Box backgroundColor="information" p="200" />
</Stack>

Alignment

Alignment within the flex container can be controlled with the alignBlock and alignInline props.

  • alignBlock controls alignment along the block axis (typically the vertical axis)
  • alignInline controls alignment along the inline axis (typically the horizontal axis)

Internally, these props are translated to the align-items and justify-content CSS properties.

alignBlock

start
center
end
<InlineStack alignInline="space-between" alignBlock="stretch" gap="200" style={{ width: '300px' }}>
  <Stack alignInline="center">
    <Box mb="100" textAlign="center">
      <Code>start</Code>
    </Box>

    <Box display="flex" style={{ height: '200px' }}>
      <Stack gap="200" alignBlock="start" backgroundColor="information-minimal">
        <Box backgroundColor="information" p="200" />
        <Box backgroundColor="information" p="200" />
        <Box backgroundColor="information" p="200" />
      </Stack>
    </Box>
  </Stack>

  <Stack alignInline="center">
    <Box mb="100" textAlign="center">
      <Code>center</Code>
    </Box>

    <Box display="flex" style={{ height: '200px' }}>
      <Stack gap="200" alignBlock="center" backgroundColor="information-minimal">
        <Box backgroundColor="information" p="200" />
        <Box backgroundColor="information" p="200" />
        <Box backgroundColor="information" p="200" />
      </Stack>
    </Box>
  </Stack>

  <Stack alignInline="center">
    <Box mb="100" textAlign="center">
      <Code>end</Code>
    </Box>

    <Box display="flex" style={{ height: '200px' }}>
      <Stack gap="200" alignBlock="end" backgroundColor="information-minimal">
        <Box backgroundColor="information" p="200" />
        <Box backgroundColor="information" p="200" />
        <Box backgroundColor="information" p="200" />
      </Stack>
    </Box>
  </Stack>
</InlineStack>

alignInline

start
center
end
<Stack gap="200" style={{ width: '300px' }}>
  <Box>
    <Box mb="100" textAlign="center">
      <Code>start</Code>
    </Box>

    <Stack gap="200" alignInline="start" backgroundColor="information-minimal">
      <Box backgroundColor="information" p="200" />
      <Box backgroundColor="information" p="200" />
      <Box backgroundColor="information" p="200" />
    </Stack>
  </Box>

  <Box>
    <Box mb="100" textAlign="center">
      <Code>center</Code>
    </Box>

    <Stack gap="200" alignInline="center" backgroundColor="information-minimal">
      <Box backgroundColor="information" p="200" />
      <Box backgroundColor="information" p="200" />
      <Box backgroundColor="information" p="200" />
    </Stack>
  </Box>

  <Box>
    <Box mb="100" textAlign="center">
      <Code>end</Code>
    </Box>

    <Stack gap="200" alignInline="end" backgroundColor="information-minimal">
      <Box backgroundColor="information" p="200" />
      <Box backgroundColor="information" p="200" />
      <Box backgroundColor="information" p="200" />
    </Stack>
  </Box>
</Stack>

API

PlumaStack extends Box

alignBlock  "space-around" | "space-between" | "space-evenly" | "stretch" | "center" | "end" | "flex-end" | "flex-start" | "start" | undefined

Default:start

How space is distributed along the block axis (vertical). This corresponds to justify-content when flex-direction is column. MDN Justify Content

alignInline  "stretch" | "center" | "end" | "flex-end" | "flex-start" | "start" | "baseline" | undefined

Default:stretch

How space is distributed along the inline axis (horizontal). This corresponds to align-items when flex-direction is column. MDN Align Items

On this page

Importing
alignBlock
alignInline
API