# Center

Centers children horizontally and vertically

## Installation

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

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

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

```tsx
/* @jsxImportSource @opentui/react */
import type { ReactNode } from "react";

export interface CenterProps {
  children: ReactNode;
  axis?: "both" | "horizontal" | "vertical";
}

export const Center = ({ children, axis = "both" }: CenterProps) => {
  const justifyContent =
    axis === "both" || axis === "horizontal" ? "center" : undefined;
  const alignItems =
    axis === "both" || axis === "vertical" ? "center" : undefined;

  return (
    <box
      flexGrow={1}
      justifyContent={justifyContent as "center" | undefined}
      alignItems={alignItems as "center" | undefined}
    >
      {children}
    </box>
  );
};
```

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

## Usage

```tsx
import { Center } from "@/components/ui/center";
```

```tsx
<Center>
  <Text>Centered content</Text>
</Center>
```

## API Reference

### Center

| Prop       | Type                                   | Default    |
| ---------- | -------------------------------------- | ---------- |
| `children` | `ReactNode`                            | `required` |
| `axis`     | `"both" \| "horizontal" \| "vertical"` | `"both"`   |