# Panel

Titled bordered panel

## Installation

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

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

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

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

import { useTheme } from "@/components/ui/theme-provider";

export interface PanelProps {
  title?: string;
  titleColor?: string;
  borderColor?: string;
  borderStyle?:
    | "single"
    | "double"
    | "round"
    | "bold"
    | "singleDouble"
    | "doubleSingle"
    | "classic";
  bordered?: boolean;
  width?: number;
  height?: number;
  paddingX?: number;
  paddingY?: number;
  children?: ReactNode;
}

export const Panel = ({
  title,
  titleColor,
  borderColor,
  borderStyle,
  bordered = true,
  width,
  height,
  paddingX = 1,
  paddingY = 0,
  children,
}: PanelProps) => {
  const theme = useTheme();

  const inner = (
    <>
      {title ? (
        <box
          paddingLeft={paddingX}
          paddingRight={paddingX}
          borderStyle="single"
          borderColor={borderColor ?? theme.colors.border}
        >
          <text fg={titleColor ?? theme.colors.primary}>
            <b>{title}</b>
          </text>
        </box>
      ) : null}
      <box
        flexDirection="column"
        paddingLeft={paddingX}
        paddingRight={paddingX}
        paddingTop={paddingY}
        paddingBottom={paddingY}
      >
        {children}
      </box>
    </>
  );

  if (!bordered) {
    return <box flexDirection="column">{inner}</box>;
  }

  return (
    <box
      flexDirection="column"
      borderStyle={borderStyle ?? theme.border.style}
      borderColor={borderColor ?? theme.colors.border}
    >
      {inner}
    </box>
  );
};
```

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

## Usage

```tsx
import { Panel } from "@/components/ui/panel";
```

```tsx
<Panel title="System Status" borderStyle="round" width={40}>
  <Text>All services operational</Text>
</Panel>
```

## API Reference

### Panel

| Prop          | Type                                                                                         | Default |
| ------------- | -------------------------------------------------------------------------------------------- | ------- |
| `title`       | `string`                                                                                     | -       |
| `titleColor`  | `string`                                                                                     | -       |
| `borderColor` | `string`                                                                                     | -       |
| `borderStyle` | `"single" \| "double" \| "round" \| "bold" \| "singleDouble" \| "doubleSingle" \| "classic"` | -       |
| `bordered`    | `boolean`                                                                                    | `true`  |
| `width`       | `number`                                                                                     | -       |
| `height`      | `number`                                                                                     | -       |
| `paddingX`    | `number`                                                                                     | `1`     |
| `paddingY`    | `number`                                                                                     | `0`     |
| `children`    | `ReactNode`                                                                                  | -       |