Stack

Usage

import { Stack, Button } from "@devvy-ui/react";

<Stack direction="row" wrap gap="0.75rem"><Button>Save</Button><Button variant="outline">Cancel</Button></Stack>

API reference

Native HTML attributes, className, style and a forwarded ref are supported. Component-specific props:

Prop	Type	Default	Description
direction	row \| column	column	Layout axis.
gap / align / justify	CSS gap / alignment	1rem / stretch / start	Spacing and child alignment.
wrap	boolean	false	Allow items to wrap.

Source ownership

Run npx @devvy-ui/cli init once in your React project, then add the source:

npx @devvy-ui/cli add stack

Make the source yours.

Start from the canonical implementation used by the package and registry. Change the code, keep the MIT notice, and build the behavior your project needs.

Stack.tsxREACT / TSX

import { forwardRef, type CSSProperties, type HTMLAttributes } from 'react';
import { cx } from '../lib/cx';
export interface StackProps extends HTMLAttributes<HTMLDivElement> {
  direction?: 'row' | 'column';
  gap?: CSSProperties['gap'];
  align?: 'start' | 'center' | 'end' | 'stretch';
  justify?: 'start' | 'center' | 'end' | 'between';
  wrap?: boolean;
}
export const Stack = forwardRef<HTMLDivElement, StackProps>(function Stack(
  {
    direction = 'column',
    gap = '1rem',
    align = 'stretch',
    justify = 'start',
    wrap = false,
    style,
    className,
    ...props
  },
  ref,
) {
  return (
    <div
      {...props}
      ref={ref}
      className={cx('dvy-stack', className)}
      data-direction={direction}
      style={{
        gap,
        alignItems: align === 'start' ? 'flex-start' : align === 'end' ? 'flex-end' : align,
        justifyContent:
          justify === 'between'
            ? 'space-between'
            : justify === 'start'
              ? 'flex-start'
              : justify === 'end'
                ? 'flex-end'
                : justify,
        flexWrap: wrap ? 'wrap' : 'nowrap',
        ...style,
      }}
    />
  );
});

Edit your own copy. Downloaded source uses your changes; the component preview above uses the shipped version. Run the source installer first to include shared helpers.

Search DEVVY UI

Space to compose.

Usage

API reference

Source ownership

Make the source yours.

Stack

Interactive preview

Space to compose.

Usage

API reference

Accessibility & behavior

Platform Behavior & Guidelines

Source ownership

Make the source yours.