Back to React Email

Heading

apps/docs/components/heading.mdx

0.0.151.6 KB
Original Source

import Support from '/snippets/support.mdx'

Install

Install component from your command line.

<CodeGroup>
sh
npm install @react-email/components -E

# or get the individual package

npm install @react-email/heading -E
sh
yarn add @react-email/components -E

# or get the individual package

yarn add @react-email/heading -E
sh
pnpm add @react-email/components -E

# or get the individual package

pnpm add @react-email/heading -E
</CodeGroup>

Getting started

Add the component to your email template. Include styles where needed.

jsx
import { Heading } from "@react-email/components";

const Email = () => {
  return <Heading as="h2">Lorem ipsum</Heading>;
};

Props

<ResponseField name="as" type="string" default="h1"> Render component as `h1`, `h2`, `h3`, `h4`, `h5` or `h6`. </ResponseField> <ResponseField name="m" type="string"> A shortcut for `margin` CSS property. </ResponseField> <ResponseField name="mx" type="string"> A shortcut for `margin-left` and `margin-right` CSS properties. </ResponseField> <ResponseField name="my" type="string"> A shortcut for `margin-top` and `margin-bottom` CSS properties. </ResponseField> <ResponseField name="mt" type="string"> A shortcut for `margin-top` CSS property. </ResponseField> <ResponseField name="mr" type="string"> A shortcut for `margin-right` CSS property. </ResponseField> <ResponseField name="mb" type="string"> A shortcut for `margin-bottom` CSS property. </ResponseField> <ResponseField name="ml" type="string"> A shortcut for `margin-left` CSS property. </ResponseField> <Support/>