---
title: RichText
description: The RichText component renders a metafield of type rich_text_field.
api_version: 2026-04
source_url:
  html: 'https://shopify.dev/docs/api/hydrogen-react/latest/components/richtext'
  md: 'https://shopify.dev/docs/api/hydrogen-react/latest/components/richtext.md'
api_name: hydrogen-react
---

# RichText

The `RichText` component renders a metafield of type `rich_text_field`. By default the rendered output uses semantic HTML tags. Customize how nodes are rendered with the `components` prop.

#### Props

* **data**

  **string**

  **required**

  The JSON string that correspond to the Storefront API's [RichText format](https://shopify.dev/docs/apps/custom-data/metafields/types#rich-text-formatting).

* **as**

  **ComponentGeneric**

  An HTML tag or React Component to be rendered as the base element wrapper. The default is `div`.

* **components**

  **CustomComponents**

  Customize how rich text components are rendered

* **plain**

  **boolean**

  Remove rich text formatting and render plain text

### CustomComponents

* heading

  Customize the headings. Each heading has a \`level\` property from 1-6. Defaults to \`\<h1>\` to \`\<h6>\`

  ```ts
  typeof Heading
  ```

* link

  Customize links. Defaults to a React Router \`\<Link>\` component in Hydrogen and a \`\<a>\` in Hydrogen React.

  ```ts
  typeof RichTextLink
  ```

* list

  Customize lists. They can be either ordered or unordered. Defaults to \`\<ol>\` or \`\<ul>\`

  ```ts
  typeof List
  ```

* listItem

  Customize list items. Defaults to \`\<li>\`.

  ```ts
  typeof ListItem
  ```

* paragraph

  Customize paragraphs. Defaults to \`\<p>\`

  ```ts
  typeof Paragraph
  ```

* root

  The root node of the rich text. Defaults to \`\<div>\`

  ```ts
  typeof Root
  ```

* text

  Customize how text nodes. They can either be bold or italic. Defaults to \`\<em>\`, \`\<strong>\` or text.

  ```ts
  typeof Text
  ```

Examples

### Examples

* #### Example code

  ##### Description

  I am the default example

  ##### JavaScript

  ```jsx
  import {RichText} from '@shopify/hydrogen-react';

  export function MainRichText({metaFieldData}) {
    return (
      <RichText
        data={metaFieldData}
        components={{
          paragraph({node}) {
            return <p className="customClass">{node.children}</p>;
          },
        }}
      />
    );
  }
  ```

  ##### TypeScript

  ```tsx
  import {RichText} from '@shopify/hydrogen-react';

  export function MainRichText({metaFieldData}: {metaFieldData: string}) {
    return (
      <RichText
        data={metaFieldData}
        components={{
          paragraph({node}) {
            return <p className="customClass">{node.children}</p>;
          },
        }}
      />
    );
  }
  ```

***