# 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.
### Example code

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

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

```

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

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

```


## Props

### RichTextPropsForDocs

### as
An HTML tag or React Component to be rendered as the base element wrapper. The default is `div`.
### components
Customize how rich text components are rendered
### data
The JSON string that correspond to the Storefront API's [RichText format](https://shopify.dev/docs/apps/custom-data/metafields/types#rich-text-formatting).
### plain
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>`
### link
Customize links. Defaults to a React Router `<Link>` component in Hydrogen and a `<a>` in Hydrogen React.
### list
Customize lists. They can be either ordered or unordered. Defaults to `<ol>` or `<ul>`
### listItem
Customize list items. Defaults to `<li>`.
### paragraph
Customize paragraphs. Defaults to `<p>`
### root
The root node of the rich text. Defaults to `<div>`
### text
Customize how text nodes. They can either be bold or italic. Defaults to `<em>`, `<strong>` or text.