Caret-Tui

Pane

A structured container block, ideal for split layouts.

Pane is a wrapper around Box specifically designed for creating distinct sections within a larger grid or flex layout. It comes with built-in title support and optional borders.

Usage

import { Pane, Text } from 'caret-tui';

const App = () => (
  <Pane title="Logs" width="50%" height={10}>
    <Text>System initializing...</Text>
  </Pane>
);

Props

PropTypeDefaultDescription
titlestring-An optional title embedded in the top border.
widthstring | number"100%"The width of the pane.
heightstring | number-The height of the pane.
showBorderbooleantrueWhether to display the outer border.
childrenReact.ReactNode-The content inside the pane.

On this page