Box
A foundational layout component for grouping elements.
The Box component is the fundamental building block for Caret-Tui layouts, built on top of Ink's Box. It extends the native functionality with theme-aware borders and background colors.
Usage
import { Box, Text } from 'caret-tui';
const App = () => (
<Box borderStyle="round" variant="primary" paddingX={2} paddingY={1}>
<Text>Hello inside a box!</Text>
</Box>
);Props
Accepts all props from Ink's BoxProps, plus the following custom props:
| Prop | Type | Default | Description |
|---|---|---|---|
backgroundColor | string | - | Custom background color (overrides variant if provided). |
variant | 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'muted' | 'default' | Uses theme colors for the border and background context. |
borderStyle | BorderStyle | - | Predefined border style (e.g. 'single', 'double', 'round', 'bold'). |