Text Style

Terminal elements accept fg, bg, and a numeric attributes bitmask in their style prop. The textStyle() helper lets you use boolean flags instead.

Text Style


 bold          textStyle({ bold: true })
 dim           textStyle({ dim: true })
 italic        textStyle({ italic: true })
 underline     textStyle({ underline: true })
 inverse       textStyle({ inverse: true })

 fg color      textStyle({ fg: theme.primary })
 bg color      textStyle({ fg: theme.foreground, bg: theme.secondary })

 combined      textStyle({ fg: theme.accent, bold: true, underline: true })

Usage

import { textStyle } from "@/components/ui/text-style"

<text style={textStyle({ fg: "#FF71CE", bold: true })}>Bold pink</text>

Combine with useTheme() for themed styles:

import { useTheme } from "@/components/ui/theme"
import { textStyle } from "@/components/ui/text-style"

function MyComponent() {
  const theme = useTheme()
  return <text style={textStyle({ fg: theme.primary, bold: true })}>Themed text</text>
}

Direct Text Styling

Apply textStyle() directly on the <text> element when the entire line shares one style. No <span> wrappers needed. This is the simplest way to style text.

Direct Text Styling


 Single style applied to the entire text element

<text style={textStyle({ fg: theme.primary, bold: true })}>
  Single style applied to the entire text element
</text>

Use <span> elements inside <text> when different parts of the same line need different styles. Each <span> can have its own color, weight, and decoration, but they must always be wrapped in a parent <text> element.

Mixed Span Styling


 Server running on port 3000
 Error: connection refused (retry in 5s)
 ▸ Deploy to production

<text>
  <span style={textStyle({ fg: theme.primary, bold: true })}>Server </span>
  <span style={textStyle({ fg: theme.success })}>running </span>
  <span style={textStyle({ fg: theme.muted, dim: true })}>on port 3000</span>
</text>

Options

Option	Type	Description
`fg`	`string`	Foreground (text) color
`bg`	`string`	Background color
`bold`	`boolean`	Bold text
`dim`	`boolean`	Dimmed text (reduced brightness)
`italic`	`boolean`	Italic text
`underline`	`boolean`	Underlined text
`inverse`	`boolean`	Swap foreground and background

Terminals have three weight levels: dim, normal, and bold. There is no CSS font-weight scale.

Usage

Direct Text Styling

Mixed Span Styling

Options

On this page