# React Email Components

> Copy-paste components for emails built with React and TypeScript. Each category page is available as markdown by appending `.md` to its URL.

## Headers

Components for creating headers with different menu layouts and social icons.

Markdown: https://react.email/components/headers.md

- Header with centered menu
- Header with side menu
- Header with social icons

## Footers

Footer components with various column layouts.

Markdown: https://react.email/components/footers.md

- Footer with one column
- Footer with two columns

## Container

Container components for wrapping content with different layout options.

Markdown: https://react.email/components/container.md

- Simple container

## Section

Section components for dividing content into distinct sections with rows and columns.

Markdown: https://react.email/components/section.md

- Simple section
- Section with rows and columns

## Grid

Grid components for arranging content in rows and columns.

Markdown: https://react.email/components/grid.md

- One row, two columns
- One row, three columns

## Divider

Divider components to separate content in rows or columns.

Markdown: https://react.email/components/divider.md

- Simple divider
- Divider between rows and columns

## Heading

Heading components for displaying titles and subtitles with different spacing options.

Markdown: https://react.email/components/heading.md

- Simple heading
- Multiple headings

## Text

Text components for displaying text with simple and styled formatting.

Markdown: https://react.email/components/text.md

- Simple text
- Text with styling

## Link

Link components for creating simple and styled links.

Markdown: https://react.email/components/link.md

- Simple link
- Link inline with text

## Buttons

A collection of button components to use in various parts of your application.

Markdown: https://react.email/components/buttons.md

- Single button
- Two buttons
- Download buttons

## Image

Image components for displaying images with various styling options.

Markdown: https://react.email/components/image.md

- Simple image
- Rounded image
- Image with varying sizes

## Avatars

Components for displaying user avatars with different styles and sizes.

Markdown: https://react.email/components/avatars.md

- Avatars group stacked
- Avatars with text
- Circular avatars
- Rounded avatars

## Gallery

Gallery components for displaying images in grids and columns.

Markdown: https://react.email/components/gallery.md

- Four images in a grid
- Three columns with images
- Images on horizontal grid
- Images on vertical grid

## List

List components for displaying ordered and unordered lists with different styles.

Markdown: https://react.email/components/list.md

- Simple List
- List with image on left

## Code Inline

Inline code components for displaying small code snippets within text.

Markdown: https://react.email/components/code-inline.md

- Simple Code Inline
- Code Inline with different colors

## Code Block

Code block components with options for themes, line numbers, and customization.

Markdown: https://react.email/components/code-block.md

- Code Block without theme
- Code Block with predefined theme
- Code Block with custom theme
- Code Block with line numbers

## Markdown

Markdown components for displaying markdown content with custom styles.

Markdown: https://react.email/components/markdown.md

- Simple markdown
- Markdown with container styles
- Markdown with custom styles

## Articles

Components for creating various types of articles, including layouts with images and cards.

Markdown: https://react.email/components/articles.md

- Article with image
- Article with image on right
- Article with image as background
- Article with two cards
- Article with single author
- Article with multiple authors

## Features

Feature components for showcasing key features with headers, lists, and columns.

Markdown: https://react.email/components/features.md

- Header and list items
- Header and numbered list items
- Header and four paragraphs
- Header, four paragraphs and two columns
- Header and three centered paragraphs

## Stats

Stats components for displaying statistics.

Markdown: https://react.email/components/stats.md

- Stats simple
- Stats stepped

## Testimonials

Testimonials components for displaying testimonials.

Markdown: https://react.email/components/testimonials.md

- Testimonial simple centered
- Testimonial with large avatar

## Feedback

Feedback components for collecting user feedback with forms and ratings.

Markdown: https://react.email/components/feedback.md

- Simple rating survey
- Survey section
- Customer reviews

## Pricing

Pricing components for displaying pricing tables and comparison charts.

Markdown: https://react.email/components/pricing.md

- Simple pricing table
- Two tiers with emphasized tier

## Ecommerce

Components designed for eCommerce layouts, including product displays and card grids.

Markdown: https://react.email/components/ecommerce.md

- One product
- One product with image on the left
- Title + three cards in a row
- Title + four cards
- Checkout

## Marketing

Marketing components for creating surveys and checkout forms.

Markdown: https://react.email/components/marketing.md

- Bento Grid