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