# Layout Patterns
Common layout recipes for terminal user interfaces.
## Full-Screen App
Fill the entire terminal:
```tsx
function App() {
return (
{/* Content fills terminal */}
)
}
```
## Header/Content/Footer
Classic app layout:
```tsx
function AppLayout() {
return (
{/* Header - fixed height */}
Header
{/* Content - fills remaining space */}
Main Content
{/* Footer - fixed height */}
Status: Ready
)
}
```
## Sidebar Layout
```tsx
function SidebarLayout() {
return (
{/* Sidebar - fixed width */}
Sidebar
{/* Main - fills remaining space */}
Main Content
)
}
```
## Resizable Sidebar
Responsive based on terminal width:
```tsx
function ResponsiveSidebar() {
const dims = useTerminalDimensions() // React: useTerminalDimensions()
const showSidebar = dims.width > 60
const sidebarWidth = Math.min(30, Math.floor(dims.width * 0.3))
return (
{showSidebar && (
Sidebar
)}
Main
)
}
```
## Centered Content
### Horizontally Centered
```tsx
Centered horizontally
```
### Vertically Centered
```tsx
Centered vertically
```
### Both Axes
```tsx
Centered both ways
```
## Modal/Dialog
Centered overlay:
```tsx
function Modal({ children, visible }) {
if (!visible) return null
return (
{children}
)
}
```
## Grid Layout
Using flexWrap:
```tsx
function Grid({ items, columns = 3 }) {
const itemWidth = `${Math.floor(100 / columns)}%`
return (
{items.map((item, i) => (
{item}
))}
)
}
```
## Split Panels
### Horizontal Split
```tsx
function HorizontalSplit({ ratio = 0.5 }) {
return (
Left Panel
Right Panel
)
}
```
### Vertical Split
```tsx
function VerticalSplit({ ratio = 0.5 }) {
return (
Top Panel
Bottom Panel
)
}
```
## Form Layout
Label + Input pairs:
```tsx
function FormField({ label, children }) {
return (
{label}:
{children}
)
}
function LoginForm() {
return (
Login
)
}
```
## Navigation Tabs
```tsx
function TabBar({ tabs, activeIndex, onSelect }) {
return (
{tabs.map((tab, i) => (
onSelect(i)}
>
{tab}
))}
)
}
```
## Sticky Footer
Footer always at bottom:
```tsx
function StickyFooterLayout() {
return (
{/* Content area */}
{/* Your content here */}
Content that might be short
{/* Footer pushed to bottom */}
Press ? for help | q to quit
)
}
```
## Absolute Positioning Overlay
Tooltip or popup:
```tsx
function Tooltip({ x, y, children }) {
return (
{children}
)
}
```
## Responsive Breakpoints
Different layouts based on terminal size:
```tsx
function ResponsiveApp() {
const { width, height } = useTerminalDimensions()
// Define breakpoints
const isSmall = width < 60
const isMedium = width >= 60 && width < 100
const isLarge = width >= 100
if (isSmall) {
// Mobile-like: stacked layout
return (
)
}
if (isMedium) {
// Tablet-like: sidebar + content
return (
)
}
// Large: full layout
return (
)
}
```
## Equal Height Columns
```tsx
function EqualColumns() {
return (
Short content
Longer content that
spans multiple lines
and takes up space
Medium content
)
}
```
## Spacing Utilities
Consistent spacing patterns:
```tsx
// Spacer component
function Spacer({ size = 1 }) {
return
}
// Divider component
function Divider() {
return
}
// Usage
Section 1
Section 2
```