> ## Documentation Index
> Fetch the complete documentation index at: https://docs.napps.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Text

`text` renders text content. Its `children` value is required by the JSX type contract and can be
text or nested `text` nodes. Nested text nodes are combined into one inline string, so you can give
different words different styles. Styles do not inherit from a parent; set the style you need on
each nested `text` node.

## Properties

| Property   | Accepted value        | Description                                    |
| ---------- | --------------------- | ---------------------------------------------- |
| `children` | `ReactNode \| string` | Text content to render.                        |
| `style`    | `StyleProperties`     | Typography, color, spacing, and layout values. |
| `key`      | `string \| number`    | React key for dynamic children.                |
| `class`    | `string`              | Registered style name for this node only.      |

## Example

```tsx theme={null}
<text
  class="product-card-title"
  style={{
    color: "#101828",
    fontSize: 18,
    fontWeight: 700,
    maxLines: 2,
    textDecoration: "none"
  }}
>
  Lightweight everyday jacket
</text>
```

## Nested text

Use nested `text` nodes for inline emphasis, labels, or links represented by text styles:

```tsx theme={null}
<text style={{ color: "#475467", fontSize: 16 }}>
  Order total: {" "}
  <text style={{ color: "#101828", fontWeight: 700 }}>
    €49.00
  </text>
</text>
```

Only `text` descendants participate in the rendered string. Other node types inside `text`, such
as `box`, `row`, `column`, `img`, or `button`, are ignored. Use a `row`, `column`, or `box` when
you need to place non-text content alongside text.

Use `maxLines` and `minLines` when the surrounding layout needs predictable text height.