Style

Unified style object for all Glyph elements.

Combines CSS-like flexbox layout, positioning, paint (colors, borders), and text formatting into a single flat object.

Every property supports responsive values — pass a plain value for a static style or a breakpoint object to adapt to the terminal width:

<Box
  style={{
    flexDirection: { base: "column", md: "row" },
    padding: { base: 0, sm: 1, lg: 2 },
    gap: 1, // plain values still work
  }}
/>

Properties

Property	Type	Description
alignItems?	Responsive<"center" | "flex-start" | "flex-end" | "stretch">	Alignment along the cross axis.
bg?	Responsive<Color>	Background color.
bold?	Responsive<boolean>	Render text in bold.
border?	Responsive<BorderStyle>	Border drawing style.
borderColor?	Responsive<Color>	Border color (requires border to be set).
bottom?	Responsive<DimensionValue>	Bottom offset for absolute positioning.
clip?	Responsive<boolean>	Clip overflowing children (used internally by ScrollView).
color?	Responsive<Color>	Text (foreground) color. Inherited by children.
dim?	Responsive<boolean>	Render text in dim/faint.
flexBasis?	Responsive<DimensionValue>	Initial main-axis size before flex grow/shrink. Overrides width/height for flex calculations.
flexDirection?	Responsive<"row" | "column">	Direction of the main axis. Default "column".
flexGrow?	Responsive<number>	How much this element grows to fill available space (default 0).
flexShrink?	Responsive<number>	How much this element shrinks when space is tight (default 1).
flexWrap?	Responsive<"wrap" | "nowrap">	Whether children wrap to the next line.
gap?	Responsive<number>	Gap between children (cells). Works with both row and column directions.
height?	Responsive<DimensionValue>	Height in cells or percentage of parent.
inset?	Responsive<DimensionValue>	Shorthand for top/right/bottom/left simultaneously.
italic?	Responsive<boolean>	Render text in italic.
justifyContent?	Responsive<"center" | "flex-start" | "flex-end" | "space-between" | "space-around">	Alignment along the main axis.
left?	Responsive<DimensionValue>	Left offset for absolute positioning.
maxHeight?	Responsive<number>	Maximum height in cells.
maxWidth?	Responsive<number>	Maximum width in cells.
minHeight?	Responsive<number>	Minimum height in cells.
minWidth?	Responsive<number>	Minimum width in cells.
padding?	Responsive<number>	Padding on all four sides (cells).
paddingBottom?	Responsive<number>	Bottom padding.
paddingLeft?	Responsive<number>	Left padding.
paddingRight?	Responsive<number>	Right padding.
paddingTop?	Responsive<number>	Top padding.
paddingX?	Responsive<number>	Horizontal padding (left + right).
paddingY?	Responsive<number>	Vertical padding (top + bottom).
pointerEvents?	Responsive<"none" | "auto">	Controls whether this element blocks mouse/focus events.
position?	Responsive<"relative" | "absolute">	Positioning mode. "absolute" elements are taken out of flow.
right?	Responsive<DimensionValue>	Right offset for absolute positioning.
strikethrough?	Responsive<boolean>	Render text with strikethrough (ANSI SGR 9). Supported by most modern terminals.
textAlign?	Responsive<TextAlign>	Horizontal text alignment within the container.
top?	Responsive<DimensionValue>	Top offset for absolute positioning.
underline?	Responsive<boolean>	Render text with underline.
width?	Responsive<DimensionValue>	Width in cells or percentage of parent.
wrap?	Responsive<WrapMode>	Text wrapping mode.
zIndex?	Responsive<number>	Stack order for overlapping elements. Higher = on top.

---

ResolvedStyle

type ResolvedStyle = { [K in keyof Style]: [NonNullable<Style[K]>] extends [Responsive<infer T>] ? T | undefined : Style[K] };

Style with all Responsive values resolved to their concrete types.

Produced by the responsive resolution pass and consumed by the internal layout (Yoga) and paint systems. You normally don’t need this type directly — use Style instead.

---

Responsive

type Responsive<T> = T | { [K in Breakpoint]?: T };

A style value that can change depending on terminal width.

Accepts either a plain value (backward-compatible) or an object keyed by Breakpoint names.

Type Parameters

Type Parameter
T

Example

// Plain value — works exactly like before
padding: 1

// Responsive — different values at different terminal widths
padding: { base: 0, sm: 1, lg: 2 }

---

Breakpoint

type Breakpoint = "base" | "sm" | "md" | "lg" | "xl";

Named terminal breakpoint.

Breakpoints are mobile-first (like Tailwind / Chakra) — the largest matching breakpoint wins.

Name	Columns	Typical use case
base	0 +	Always applies (default)
sm	40 +	Split pane / small terminal
md	80 +	Standard 80-col terminal
lg	120 +	Wide terminal
xl	160 +	Ultra-wide

Example

<Box style={{ flexDirection: { base: "column", md: "row" } }} />

---

NamedColor

type NamedColor =
  | "black"
  | "red"
  | "green"
  | "yellow"
  | "blue"
  | "magenta"
  | "cyan"
  | "white"
  | "blackBright"
  | "redBright"
  | "greenBright"
  | "yellowBright"
  | "blueBright"
  | "magentaBright"
  | "cyanBright"
  | "whiteBright";

Named ANSI terminal color.

---

HexColor

type HexColor = `#${string}`;

Hex color string (e.g. "#ff00ff").

---

RGBColor

type RGBColor = {
  b: number;
  g: number;
  r: number;
};

RGB color as an object with 0-255 channels.

Properties

Property	Type
b	number
g	number
r	number

---

DimensionValue

type DimensionValue = number | `${number}%`;

Dimension value in terminal cells or a percentage string.

• number — absolute cells
• "50%" — percentage of parent

---

BorderStyle

type BorderStyle = "none" | "single" | "double" | "round" | "ascii";

Border drawing style for Style.border.

---

WrapMode

type WrapMode = "wrap" | "truncate" | "ellipsis" | "none";

Text wrapping mode for Style.wrap.

• "wrap" — soft-wrap at container edge
• "truncate" — cut off silently
• "ellipsis" — cut off with …
• "none" — no wrapping

---

TextAlign

type TextAlign = "left" | "center" | "right";

Horizontal text alignment.