---
title: RichText
description: 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.
api_version: 2025-07
api_name: hydrogen-react
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
---

# Rich​Textcomponent

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
  ({ node, }: { node: { type: "heading"; level: number; children?: ReactNode[]; }; }) => ReactNode
  ```

* link

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

  ```ts
  ({ node, }: { node: { type: "link"; url: string; title?: string; target?: string; children?: ReactNode[]; }; }) => ReactNode
  ```

* list

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

  ```ts
  ({ node, }: { node: { type: "list"; listType: "unordered" | "ordered"; children?: ReactNode[]; }; }) => ReactNode
  ```

* listItem

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

  ```ts
  ({ node, }: { node: { type: "list-item"; children?: ReactNode[]; }; }) => ReactNode
  ```

* paragraph

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

  ```ts
  ({ node, }: { node: { type: "paragraph"; children?: ReactNode[]; }; }) => ReactNode
  ```

* root

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

  ```ts
  ({ node, }: { node: { type: "root"; children?: ReactNode[]; }; }) => ReactNode
  ```

* text

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

  ```ts
  ({ node, }: { node: { type: "text"; italic?: boolean; bold?: boolean; value?: string; }; }) => ReactNode
  ```

```ts
{
  /** The root node of the rich text. Defaults to `<div>` */
  root?: typeof Root;
  /** Customize the headings. Each heading has a `level` property from 1-6. Defaults to `<h1>` to `<h6>` */
  heading?: typeof Heading;
  /** Customize paragraphs. Defaults to `<p>` */
  paragraph?: typeof Paragraph;
  /** Customize how text nodes. They can either be bold or italic. Defaults to `<em>`, `<strong>` or text. */
  text?: typeof Text;
  /** Customize links. Defaults to a React Router `<Link>` component in Hydrogen and a `<a>` in Hydrogen React. */
  link?: typeof RichTextLink;
  /** Customize lists. They can be either ordered or unordered. Defaults to `<ol>` or `<ul>` */
  list?: typeof List;
  /** Customize list items. Defaults to `<li>`. */
  listItem?: typeof ListItem;
}
```

### 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>;
          },
        }}
      />
    );
  }
  ```