Text Stable WINMACLNX

Renders text. The only component that can contain string literals.

Text auto-sizes to its content by default — you rarely need to set an explicit width. It wraps when the available space is constrained and expands to a single line when given unlimited room, matching the CSS default behavior.

Import

import { Text } from 'veloxkit'

Basic usage

<Text style={{ fontSize: 16, color: '#F0F0F2' }}>Hello, world!</Text>

Mixed content (expressions + strings)

Text flattens all children to a single string before rendering, so mixing string literals and expressions works as expected:

<Text>{count} items</Text>
<Text>= {result}</Text>
<Text>Hello, {name}!</Text>

Nested text (inline styles)

Text components can be nested for inline styling:

<Text style={{ fontSize: 16 }}>
  Hello,{' '}
  <Text style={{ fontWeight: 700, color: '#00A878' }}>VeloxKit</Text>
  !
</Text>

Props

Prop	Type	Default	Description
`style`	`TextStyle`	`{}`	Typography and layout styles
`numberOfLines`	`number`	`undefined`	Cap layout height to N lines and clip overflow
`ellipsizeMode`	`'tail' \| 'head' \| 'middle' \| 'clip'`	`'tail'`	Where to truncate
`selectable`	`boolean`	`false`	Allow text selection
`onPress`	`() => void`	—	Tap handler (use `Pressable` for complex interactions)
`accessibilityRole`	`string`	`'text'`	—

Style properties

<Text style={{
  fontSize: 24,
  fontWeight: '700',         // '100'–'900' or 'bold', 'normal'
  fontStyle: 'italic',
  fontFamily: 'JetBrains Mono',   // must be loaded via veloxkit.config.ts
  color: '#F0F0F2',
  lineHeight: 32,             // absolute px, not a multiplier
  letterSpacing: -0.5,
  textAlign: 'center',        // 'left' (default), 'right', 'center', 'justify'
  textDecorationLine: 'underline',
  textTransform: 'uppercase',
}} />

Custom fonts

export default defineConfig({
  fonts: [
    { family: 'JetBrains Mono', path: './assets/fonts/JetBrainsMono-Regular.ttf' },
    { family: 'JetBrains Mono', path: './assets/fonts/JetBrainsMono-Bold.ttf', weight: 700 },
  ],
})

Then use them in style.fontFamily.

Line clamping

<Text numberOfLines={2} ellipsizeMode="tail">
  This is a very long string that will be truncated after two lines with an
  ellipsis at the tail end of the text.
</Text>

Selectable text

<Text selectable style={{ fontFamily: 'monospace' }}>
  npx veloxkit-cli create my-app
</Text>

measureText(text, fontSize, maxWidth?)

Measures how much space a string would occupy before rendering it. Useful for sizing containers, computing column widths in tables, or positioning overlays.

import { measureText } from 'veloxkit'
 
const { width, height } = measureText('Hello, world!', 16)
const { width: w } = measureText('Long label…', 14, 200)  // wrap at 200px

Returns { width: number, height: number } in logical pixels. The measurement uses the same text shaper as the renderer, so results are accurate even for multi-line content.

View Pressable