# gt-next: General Translation Next.js SDK: Var
URL: https://generaltranslation.com/en-GB/docs/next/api/components/var.mdx
---
title: Var
description: API reference for the Var component
---

{/* AUTO-GENERATED: Do not edit directly. Edit the template in content/docs-templates/ instead. */}


## Overview

The `<Var>` component is used to render content that should not be translated.
This is useful for rendering variables, code snippets, or other content that should not be translated.
This is also useful for rendering content that should be kept private, such as API keys or personal information.

```jsx
<Var>{user.name}</Var>
```

The `<Var>` component is always used inside a `<T>` component.
Think of it as a catch-all for dynamic values that do not fit into the categories of `<Currency>`, `<DateTime>`, or `<Num>`.


## Reference

### Props

<TypeTable
  type={{
      "children?": {
          type: 'JSX.Element',
          optional: true,
          default: 'undefined',
      },
      "name?": {
          type: 'string',
          optional: true,
          default: 'undefined',
      },
      "value?": {
          type: 'string',
          optional: true,
          default: 'undefined',
      },
  }}
/>

### Description

| Prop       | Description                                                                              |
| ---------- | ---------------------------------------------------------------------------------------- |
| `children` | The content to render inside the component. If provided, it takes precedence over value. |
| `value`    | Optional default value to display if children is not provided. Can be a string.          |

### Returns

`JSX.Element` containing content that should not be translated.

***

## Examples

### Basic example

The `<Var>` component must be used inside a `<T>` component.

```jsx title="Address.jsx" copy
import { T, Var } from 'gt-next'

export default function Example(user) {
  return (
    <T>
      Translate this text!
      Your name is: <Var>{user.name}</Var> // [!code highlight]
      <Var><p>Do not translate this text</p></Var> // [!code highlight]
    </T>
  );
}
```

***


## Notes

* Variable Components are essential for preserving untranslatable, dynamic content in translations.
* Always use Variable Components within a `<T>` component.
* Components like `<Num>`, `<Currency>`, and `<DateTime>` provide localisation features to ensure accurate formatting.

## Next steps

* For a more in-depth discussion and usage examples for the `<Var>` component and other variable components such as `<Currency>`, `<DateTime>`, and `<Num>`, see the [Using Variable Components](/docs/next/guides/variables) documentation.