Stack

Vertical spacing primitive.

stable

Preview

Code

tsx

import { Stack } from "@/components/ui/stack";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";

export function Example() {
  return (
    <Stack gap="3">
      <Input placeholder="First name" />
      <Input placeholder="Last name" />
      <Input placeholder="Email" type="email" />
      <Button>Continue</Button>
    </Stack>
  );
}

Props

Prop	Type	Default	Description
gap	`"0" \| "1" \| "2" \| "3" \| "4" \| "6" \| "8" \| "12"`	"4"	Vertical spacing between children (Tailwind scale).
align	`"start" \| "center" \| "end" \| "stretch"`	"stretch"	Cross-axis alignment.
className	`string`	—	Additional Tailwind classes, merged with the component's defaults via `cn()`.

Layout primitive: equal-gap vertical column. Forwards `ref`.

All components also accept standard HTML attributes for their root element (e.g. `id`, `aria-*`, `data-*`, event handlers) and forward `ref` where applicable.

Source

The full implementation of components/ui/stack.tsx is below — copy it into your project and own it. Some components import the cn helper from lib/utils or other primitives; copy those too.

tsx

import { cn } from "@/lib/utils";
import { type VariantProps, cva } from "class-variance-authority";
import { type HTMLAttributes, forwardRef } from "react";

const stackVariants = cva("flex flex-col", {
  variants: {
    gap: {
      "0": "gap-0",
      "1": "gap-1",
      "2": "gap-2",
      "3": "gap-3",
      "4": "gap-4",
      "6": "gap-6",
      "8": "gap-8",
      "12": "gap-12",
    },
    align: {
      start: "items-start",
      center: "items-center",
      end: "items-end",
      stretch: "items-stretch",
    },
  },
  defaultVariants: { gap: "4", align: "stretch" },
});

export interface StackProps
  extends HTMLAttributes<HTMLDivElement>,
    VariantProps<typeof stackVariants> {}

export const Stack = forwardRef<HTMLDivElement, StackProps>(
  ({ className, gap, align, ...props }, ref) => (
    <div ref={ref} className={cn(stackVariants({ gap, align }), className)} {...props} />
  ),
);
Stack.displayName = "Stack";

JavaFX

Ships in the PRIZM JavaFX library for thick-client C3 apps as PrizmStack (extends VBox). Run the gallery to see it natively.

java

import design.prizm.fx.controls.PrizmStack;

PrizmStack()
PrizmStack(PrizmGap gap)
PrizmStack(PrizmGap gap, Node... children)

Prop	Type	Default	Description
PrizmGap	`enum { NONE, XXS, XS, SM, MD, LG, XL, XXL }`	MD	Gap between children, in px (0/4/8/12/16/24/32/48). Mirrors the web Stack gap scale.
setGap	`(PrizmGap) → void`	—	Set the gap from the PRIZM spacing scale (wraps VBox.setSpacing).

Thin subclass of VBox — children stacked vertically with a PRIZM-scale gap. Defaults to gap MD (16px) and fillWidth (stretch). Use the inherited setAlignment / setFillWidth for other alignments. Pure layout, no paint. Mirrors components/ui/stack.tsx.