# Columns

Multi-column layout with configurable widths

## Installation

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

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

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

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

export interface ColumnsProps {
  children: ReactNode;
  gap?: number;
  align?: "top" | "center" | "bottom";
}

const ALIGN_MAP: Record<
  NonNullable<ColumnsProps["align"]>,
  "flex-start" | "center" | "flex-end"
> = {
  bottom: "flex-end",
  center: "center",
  top: "flex-start",
};

export const Columns = ({ children, gap = 0, align = "top" }: ColumnsProps) => {
  const items = React.Children.toArray(children);

  return (
    <Box flexDirection="row" gap={gap} alignItems={ALIGN_MAP[align]}>
      {items.map((child, index) => (
        <Box key={index} flexGrow={1} flexDirection="column">
          {child}
        </Box>
      ))}
    </Box>
  );
};
```

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

## Usage

```tsx
import { Columns } from "@/components/ui/columns";
```

```tsx
<Columns gap={2} align="center">
  <Text>Left</Text>
  <Text>Right</Text>
</Columns>
```

## API Reference

### Columns

| Prop       | Type                            | Default    |
| ---------- | ------------------------------- | ---------- |
| `children` | `ReactNode`                     | `required` |
| `gap`      | `number`                        | `0`        |
| `align`    | `"top" \| "center" \| "bottom"` | `"top"`    |