# Vuemail — Full Component Catalog

> A collection of high-quality, unstyled components for creating beautiful emails using Vue and TypeScript.

Vuemail is an open-source library that lets developers build emails with Vue components instead of raw HTML tables. Components are copy-paste ready and work with any email provider.

## Installation

```
npx create-vuemail@latest
```

## Primitives

Core building blocks, all exported by the `@vuemaildev/vuemail` npm package:

- Body — <Body> wrapper
- Button — <Button> with link support
- Column — <Column> for table-based layouts
- Container — <Container> with max-width centering
- Font — <Font> for web font loading
- Head — <Head> with meta tags
- Heading — <Heading> (h1-h6)
- Hr — <Hr> horizontal rule
- Html — <Html> root element
- Img — <Img> with dimensions
- Link — <Link> anchor tag
- Markdown — <Markdown> renderer
- Preview — <Preview> preheader text
- Row — <Row> for table rows
- Section — <Section> table wrapper
- Tailwind — <Tailwind> CSS utility support
- Text — <Text> paragraph

## Component Categories

### Headers

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

URL: https://vuemail.dev/components/headers
Markdown: https://vuemail.dev/components/headers.md

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

### Footers

Footer components with various column layouts.

URL: https://vuemail.dev/components/footers
Markdown: https://vuemail.dev/components/footers.md

- Footer with one column
- Footer with two columns

### Container

Container components for wrapping content with different layout options.

URL: https://vuemail.dev/components/container
Markdown: https://vuemail.dev/components/container.md

- Simple container

### Section

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

URL: https://vuemail.dev/components/section
Markdown: https://vuemail.dev/components/section.md

- Simple section
- Section with rows and columns

### Grid

Grid components for arranging content in rows and columns.

URL: https://vuemail.dev/components/grid
Markdown: https://vuemail.dev/components/grid.md

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

### Divider

Divider components to separate content in rows or columns.

URL: https://vuemail.dev/components/divider
Markdown: https://vuemail.dev/components/divider.md

- Simple divider
- Divider between rows and columns

### Heading

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

URL: https://vuemail.dev/components/heading
Markdown: https://vuemail.dev/components/heading.md

- Simple heading
- Multiple headings

### Text

Text components for displaying text with simple and styled formatting.

URL: https://vuemail.dev/components/text
Markdown: https://vuemail.dev/components/text.md

- Simple text
- Text with styling

### Link

Link components for creating simple and styled links.

URL: https://vuemail.dev/components/link
Markdown: https://vuemail.dev/components/link.md

- Simple link
- Link inline with text

### Buttons

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

URL: https://vuemail.dev/components/buttons
Markdown: https://vuemail.dev/components/buttons.md

- Single button
- Two buttons
- Download buttons

### Image

Image components for displaying images with various styling options.

URL: https://vuemail.dev/components/image
Markdown: https://vuemail.dev/components/image.md

- Simple image
- Rounded image
- Image with varying sizes

### Avatars

Components for displaying user avatars with different styles and sizes.

URL: https://vuemail.dev/components/avatars
Markdown: https://vuemail.dev/components/avatars.md

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

### Gallery

Gallery components for displaying images in grids and columns.

URL: https://vuemail.dev/components/gallery
Markdown: https://vuemail.dev/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.

URL: https://vuemail.dev/components/list
Markdown: https://vuemail.dev/components/list.md

- Simple List
- List with image on left

### Code Inline

Inline code components for displaying small code snippets within text.

URL: https://vuemail.dev/components/code-inline
Markdown: https://vuemail.dev/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.

URL: https://vuemail.dev/components/code-block
Markdown: https://vuemail.dev/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.

URL: https://vuemail.dev/components/markdown
Markdown: https://vuemail.dev/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.

URL: https://vuemail.dev/components/articles
Markdown: https://vuemail.dev/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.

URL: https://vuemail.dev/components/features
Markdown: https://vuemail.dev/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.

URL: https://vuemail.dev/components/stats
Markdown: https://vuemail.dev/components/stats.md

- Stats simple
- Stats stepped

### Testimonials

Testimonials components for displaying testimonials.

URL: https://vuemail.dev/components/testimonials
Markdown: https://vuemail.dev/components/testimonials.md

- Testimonial simple centered
- Testimonial with large avatar

### Feedback

Feedback components for collecting user feedback with forms and ratings.

URL: https://vuemail.dev/components/feedback
Markdown: https://vuemail.dev/components/feedback.md

- Simple rating survey
- Survey section
- Customer reviews

### Pricing

Pricing components for displaying pricing tables and comparison charts.

URL: https://vuemail.dev/components/pricing
Markdown: https://vuemail.dev/components/pricing.md

- Simple pricing table
- Two tiers with emphasized tier

### Ecommerce

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

URL: https://vuemail.dev/components/ecommerce
Markdown: https://vuemail.dev/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.

URL: https://vuemail.dev/components/marketing
Markdown: https://vuemail.dev/components/marketing.md

- Bento Grid

## Integrations

Works with any email sending service:

- Resend (https://vuemail.dev/docs/integrations/resend)
- SendGrid (https://vuemail.dev/docs/integrations/sendgrid)
- AWS SES (https://vuemail.dev/docs/integrations/aws-ses)
- Postmark (https://vuemail.dev/docs/integrations/postmark)
- Nodemailer (https://vuemail.dev/docs/integrations/nodemailer)

## Links

- Documentation: https://vuemail.dev/docs
- GitHub: https://github.com/psycarlo/vuemail
- npm: https://www.npmjs.com/package/@vuemaildev/vuemail
- Templates: https://vuemail.dev/templates
- Editor: https://vuemail.dev/editor