# Stack

Vertical/horizontal stack with gap

## Installation

  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>

```bash
npx shadcn@latest add @termcn/stack
```

<Step>Copy and paste the following code into your project.</Step>

```tsx
import { Box } from "ink";
import type { ReactNode } from "react";

export interface StackProps {
  direction?: "vertical" | "horizontal";
  gap?: number;
  children: ReactNode;
  width?: number | string;
  height?: number | string;
  alignItems?: "flex-start" | "center" | "flex-end";
  justifyContent?:
    | "flex-start"
    | "center"
    | "flex-end"
    | "space-between"
    | "space-around";
}

export const Stack = ({
  direction = "vertical",
  gap = 0,
  children,
  width,
  height,
  alignItems,
  justifyContent,
}: StackProps) => (
  <Box
    flexDirection={direction === "vertical" ? "column" : "row"}
    gap={gap}
    width={width as number}
    height={height as number}
    alignItems={alignItems}
    justifyContent={justifyContent}
  >
    {children}
  </Box>
);
```

<Step>Update the import paths to match your project setup.</Step>

## Usage

```tsx
import { Stack } from "@/components/ui/stack";
```

```tsx
<Stack direction="vertical" gap={1}>
  <Text>First</Text>
  <Text>Second</Text>
  <Text>Third</Text>
</Stack>
```

## API Reference

### Stack

| Prop             | Type                                                                          | Default      |
| ---------------- | ----------------------------------------------------------------------------- | ------------ |
| `direction`      | `"vertical" \| "horizontal"`                                                  | `"vertical"` |
| `gap`            | `number`                                                                      | `0`          |
| `children`       | `ReactNode`                                                                   | `required`   |
| `width`          | `number \| string`                                                            | -            |
| `height`         | `number \| string`                                                            | -            |
| `alignItems`     | `"flex-start" \| "center" \| "flex-end"`                                      | -            |
| `justifyContent` | `"flex-start" \| "center" \| "flex-end" \| "space-between" \| "space-around"` | -            |