Ink Layout and Styling
You are an expert in creating beautiful terminal layouts with Ink using Flexbox-based positioning and styling.
Box Component - Layout Foundation
The Box component is the primary layout primitive, using Flexbox properties.
Flexbox Direction
// Vertical stack (default)
<Box flexDirection="column">
<Text>First</Text>
<Text>Second</Text>
</Box>
// Horizontal row
<Box flexDirection="row">
<Text>Left</Text>
<Text>Right</Text>
</Box>
// Reverse order
<Box flexDirection="column-reverse">
<Text>Bottom (renders on top)</Text>
<Text>Top (renders on bottom)</Text>
</Box>Spacing and Padding
// Margin around element
<Box margin={1}>
<Text>Content with margin</Text>
</Box>
// Directional margins
<Box marginTop={1} marginLeft={2} marginRight={2} marginBottom={1}>
<Text>Custom margins</Text>
</Box>
// Padding inside element
<Box padding={1}>
<Text>Content with padding</Text>
</Box>
// Directional padding
<Box paddingX={2} paddingY={1}>
<Text>Horizontal and vertical padding</Text>
</Box>Alignment and Justification
// Align items on cross axis
<Box alignItems="center">
<Text>Centered</Text>
</Box>
<Box alignItems="flex-start">
<Text>Top aligned</Text>
</Box>
<Box alignItems="flex-end">
<Text>Bottom aligned</Text>
</Box>
// Justify content on main axis
<Box justifyContent="center">
<Text>Centered horizontally</Text>
</Box>
<Box justifyContent="space-between">
<Text>Left</Text>
<Text>Right</Text>
</Box>
<Box justifyContent="space-around">
<Text>Item 1</Text>
<Text>Item 2</Text>
<Text>Item 3</Text>
</Box>Dimensions
// Fixed width
<Box width={50}>
<Text>Fixed width content</Text>
</Box>
// Percentage width
<Box width="50%">
<Text>Half width</Text>
</Box>
// Fixed height
<Box height={10}>
<Text>Fixed height</Text>
</Box>
// Min/max dimensions
<Box minWidth={20} maxWidth={80}>
<Text>Constrained width</Text>
</Box>Borders
// Simple border
<Box borderStyle="single">
<Text>Bordered content</Text>
</Box>
// Border styles: single, double, round, bold, singleDouble, doubleSingle, classic
<Box borderStyle="round" borderColor="cyan">
<Text>Rounded border</Text>
</Box>
// Custom border color
<Box borderStyle="double" borderColor="green">
<Text>Green double border</Text>
</Box>Text Component - Styling Text
Colors
// Foreground colors
<Text color="red">Error message</Text>
<Text color="green">Success message</Text>
<Text color="yellow">Warning message</Text>
<Text color="blue">Info message</Text>
<Text color="cyan">Highlight</Text>
<Text color="magenta">Special</Text>
// Background colors
<Text backgroundColor="red" color="white">
Alert!
</Text>
// Hex colors
<Text color="#FF5733">Custom color</Text>Text Formatting
// Bold
<Text bold>Important text</Text>
// Italic
<Text italic>Emphasized text</Text>
// Underline
<Text underline>Underlined text</Text>
// Strikethrough
<Text strikethrough>Removed text</Text>
// Dim
<Text dimColor>Subtle text</Text>
// Inverse
<Text inverse>Inverted colors</Text>
// Combinations
<Text bold color="cyan" underline>
Multiple styles
</Text>Text Wrapping
// Wrap text to fit width
<Box width={40}>
<Text wrap="wrap">
This is a long text that will wrap to fit within the 40 character width.
</Text>
</Box>
// Truncate text
<Box width={20}>
<Text wrap="truncate">This text will be truncated</Text>
</Box>
// Truncate with custom ellipsis
<Box width={20}>
<Text wrap="truncate-end">This text will be truncated...</Text>
</Box>Layout Patterns
Card Layout
const Card: React.FC<{ title: string; children: React.ReactNode }> = ({ title, children }) => (
<Box borderStyle="round" borderColor="cyan" padding={1} flexDirection="column">
<Box marginBottom={1}>
<Text bold color="cyan">
{title}
</Text>
</Box>
<Box>{children}</Box>
</Box>
);Split Layout
const SplitLayout: React.FC<{ left: React.ReactNode; right: React.ReactNode }> = ({
left,
right,
}) => (
<Box>
<Box width="50%" borderStyle="single" padding={1}>
{left}
</Box>
<Box width="50%" borderStyle="single" padding={1}>
{right}
</Box>
</Box>
);Header/Content/Footer
const Layout: React.FC<{
header: React.ReactNode;
content: React.ReactNode;
footer: React.ReactNode;
}> = ({ header, content, footer }) => (
<Box flexDirection="column" height="100%">
<Box borderStyle="single" borderColor="cyan" padding={1}>
{header}
</Box>
<Box flexGrow={1} padding={1}>
{content}
</Box>
<Box borderStyle="single" borderColor="gray" padding={1}>
{footer}
</Box>
</Box>
);Grid Layout
const Grid: React.FC<{ items: React.ReactNode[]; columns: number }> = ({ items, columns }) => {
const rows: React.ReactNode[][] = [];
for (let i = 0; i < items.length; i += columns) {
rows.push(items.slice(i, i + columns));
}
return (
<Box flexDirection="column">
{rows.map((row, i) => (
<Box key={i}>
{row.map((item, j) => (
<Box key={j} width={`${100 / columns}%`} padding={1}>
{item}
</Box>
))}
</Box>
))}
</Box>
);
};Responsive Layout
import { useStdout } from 'ink';
const ResponsiveLayout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
const { stdout } = useStdout();
const isNarrow = stdout.columns < 80;
return (
<Box flexDirection={isNarrow ? 'column' : 'row'} width="100%">
{children}
</Box>
);
};Utility Components
Spacer
// Push elements apart
<Box>
<Text>Left</Text>
<Spacer />
<Text>Right</Text>
</Box>Newline
<Box flexDirection="column">
<Text>First line</Text>
<Newline />
<Text>After blank line</Text>
</Box>Best Practices
- Use Box for layout: Don't use Text for layout, use Box
- Flexbox thinking: Think in terms of Flexbox properties
- Consistent spacing: Use consistent margin/padding values
- Color sparingly: Don't overuse colors, use them for emphasis
- Test terminals: Test on different terminal sizes and emulators
Common Layout Patterns
Full-width header
<Box width="100%" borderStyle="single" padding={1}>
<Text bold>Application Title</Text>
</Box>Centered modal
<Box justifyContent="center" alignItems="center" height="100%">
<Box borderStyle="round" padding={2} borderColor="cyan">
<Text>Modal content</Text>
</Box>
</Box>Sidebar layout
<Box>
<Box width={20} borderStyle="single" padding={1}>
<Text>Sidebar</Text>
</Box>
<Box flexGrow={1} padding={1}>
<Text>Main content</Text>
</Box>
</Box>