> For the complete documentation index, see [llms.txt](https://developer.firmhouse.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://developer.firmhouse.com/sdks/headless-react/components/translated.md).

# Translated

The `Translated` component is a component that allows you to translate text in your components. You can use this component to provide translations for your components.

### Props <a href="#props-4" id="props-4"></a>

#### value `string` <a href="#value-string" id="value-string"></a>

The translation key that is used to look up the translation in the translations object.

#### options `Record<string, string | number>?` <a href="#options-recordstring-string--number" id="options-recordstring-string--number"></a>

An object that contains the options that are used to format the translation. This prop is optional, and it defaults to an empty object.

### Example <a href="#example-2" id="example-2"></a>

```jsx
<FirmhouseCartProvider translations={{
  en: {
    orderSummary: {
      tax: "Tax: {amount}",
    },
  },
}} ...>
  <Translated value="orderSummary.tax" options={{amount: 100}}  />
</FirmhouseCartProvider>
```