PHPackages                             bjnstnkvc/mail-components - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. bjnstnkvc/mail-components

ActivePackage

bjnstnkvc/mail-components
=========================

Simple Laravel Mail components

1.1.5(1y ago)52801MITPHP

Since Oct 1Pushed 1y ago1 watchersCompare

[ Source](https://github.com/BJNSTNKVC/laravel-mail-components)[ Packagist](https://packagist.org/packages/bjnstnkvc/mail-components)[ RSS](/packages/bjnstnkvc-mail-components/feed)WikiDiscussions master Synced 1mo ago

READMEChangelog (7)Dependencies (4)Versions (8)Used By (0)

Laravel Mail Components Library
===============================

[](#laravel-mail-components-library)

A collection of pre-made simple Laravel Blade mail components.

Installation & setup
------------------------

[](#installation--setup)

You can install the package via composer:

```
composer require bjnstnkvc/mail-components

```

The package will automatically register its service provider.

Usage
-----

[](#usage)

### Config

[](#config)

Publish the components' config file with:

```
php artisan vendor:publish --provider="Bjnstnkvc\MailComponents\MailComponentsServiceProvider" --tag=mail-config

```

This will publish a file called `mail_components.php` in your config-directory.

### Styles

[](#styles)

Publish the components' css file with:

```
php artisan vendor:publish --provider="Bjnstnkvc\MailComponents\MailComponentsServiceProvider" --tag=mail-styles

```

This will publish a `mail-components.css` to `resources/views/vendor/mail/html/themes` directory.

### Theme

[](#theme)

If you like to render an email via [Markdown](https://laravel.com/docs/9.x/mail#markdown-mailables), you'll need to set Mailable `theme` property to `mail-components`.

```
/**
 * Create a new message instance.
 */
public function __construct()
{
    $this->theme = 'mail-components';
}
```

or set `theme` property to `mail-components` in your `config/mail.php` file:

```
    'markdown' => [
        'theme' => 'mail-components',

        'paths' => [
            resource_path('views/vendor/mail'),
        ],
    ],
```

### Mail Components

[](#mail-components)

In order to use the Mail components, use standard Blade Component syntax from the [docs](https://laravel.com/docs/9.x/blade#rendering-components). By the default, the Mail components can be used with the `mail` prefix.

#### Layout

[](#layout)

Layout component is a base of every mail. Besides creating a boilerplate table that will hold mail content, it also handles media queries for responsiveness.

List of all properties Layout component accepts is as follows:

PropertyDescriptionbackgroundLayout Background color (accepts all [color values](https://www.w3schools.com/cssref/css_colors_legal.asp)).titleLayout title.fontLayout font url.font-familyLayout font familyis-markdownDetermine whether the email is Markdown formatted or not. If set to true, all classes except media queries from style tag will be omitted from the email.In order to render the component, use the following syntax:

```

    ...

```

If you'd like to add additional content to the `` tag of the layout, use the following syntax:

```

        ...

```

#### Header

[](#header)

List of all properties Header component accepts is as follows:

PropertyDescriptionapp-urlHeader logo app url (defaults to `APP_URL` property from `.env`).logoHeader logo (accepts image url or asset path as an argument).widthHeader logo width.heightHeader logo height.show-logoDetermine whether to show Header Logo (defaults to `true`).In order to render the component, use the following syntax:

```

```

If you'd like to add additional content to the header, use the following syntax:

```

    ...

```

#### Footer

[](#footer)

List of all properties Footer component accepts is as follows:

PropertyDescriptionemailFooter Email address.countryFooter country.stateFooter state.cityFooter city.addressFooter street address.zipFooter zip code.phoneFooter phone number.showDetermine whether to display the Footer (defaults to `true`).show-copyrightDetermine whether to display the Footer copyright (defaults to `true`).In order to render the component, use the following syntax:

```

```

If you'd like to add additional content to the header, use the following syntax:

```

    ...

```

#### Content

[](#content)

Content component creates a boilerplate HTML structure suitable for any injected content outside of other Mail components.

List of all properties Footer component accepts is as follows:

PropertyDescriptionbackgroundContent Background color.In order to render the component, use the following syntax:

```

    ...

```

#### Grid

[](#grid)

Grid component creates a boilerplate HTML structure suitable for any injected 'grid-like' content. It can create up to 4 grid columns that are fully responsive.

List of all properties Grid component accepts is as follows:

PropertyDescriptionbackgroundGrid Background color.columnsNumber of Grid Columns (defaults to `1`).spacingGrid Grid spacing (options: `top`, `bottom`, `top, bottom`).oneGrid Column first Slot.twoGrid Column second Slot.threeGrid Column third Slot.fourGrid Column fourth Slot.In order to render a Grid component with different number of columns, simply add `columns` property to the component followed by number of columns.

```

    ...

```

If your columns are containing simple text, you can pass them as a property as well using the following syntax:

```

```

[![Grid Component content as a Property](docs/images/Grid%201.png)](docs/images/Grid%201.png)

However, if you'd like to inject more complex HTML, use the standard [Blade Slot syntax](https://laravel.com/docs/9.x/blade#slots):

```

        Column 1 Title
        Column 1 paragraph

        Column 2 Title
        Column 2 paragraph

```

[![Grid Component content as a Slot](docs/images/Grid%202.png)](docs/images/Grid%202.png)

#### Hero

[](#hero)

Hero component creates a boilerplate HTML structure suitable for any injected 'hero-like' content.

List of all properties Hero component accepts is as follows:

PropertyDescriptionbackgroundHero section background Image.heightHero section height (default is `400`).titleHero section Title.subtitleHero section Subtitle.buttonHero section button.button-urlHero section button url.In order to render a Hero component use the following syntax:

```

```

[![Hero Component content as a property](docs/images/Hero%201.png)](docs/images/Hero%201.png)

However, if you'd like to inject more complex syntax, use the standard [Blade Slot syntax](https://laravel.com/docs/9.x/blade#slots):

```

        Title

            Item 1
            Item 2
            Item 3

        Button

```

[![Hero Component content as a Slot](docs/images/Hero%202.png)](docs/images/Hero%202.png)

#### Subcopy

[](#subcopy)

List of all properties Subcopy component accepts is as follows:

PropertyDescriptionbackgroundSubcopy Background color.In order to render the component, use the following syntax:

```

    ...

```

#### Table

[](#table)

List of all properties Table component accepts is as follows:

PropertyDescriptionbackgroundTable background color.header-backgroundTable Header background color.row-indexDetermine whether to show table row index column.modelTable Eloquent model.columnsTable headers.headersTable columns.Table component comes with three ways in which you can populate the table with data:

###### String

[](#string)

```

```

###### Array

[](#array)

```
$headers = ['First Name', 'Last Name', 'Email'];
$columns = [
    ['John', 'Doe', 'john.doe@example.com'],
    ['Jane', 'Doe', 'jane.doe@example.com'],
];
```

```

```

In both cases, following table would be generated:

[![Hero Component content as a Slot](docs/images/Table%201.png)](docs/images/Table%201.png)

###### Model

[](#model)

Let's say we have users table with the following data:

idfirst\_namelast\_nameemailemail\_verified\_atcreated\_atupdated\_atrole\_id1JohnDoe2022-09-01 12:00:002022-09-30 22:00:002022-09-01 12:00:0022JaneDoe2022-09-01 10:00:002022-09-30 23:00:002022-09-01 12:00:003passed from the controller:

```
return view('welcome', [
    'users' => User::all();
]);
```

In order to use it with Table component, following syntax is used:

```

```

will generate following table:

[![Table content using string or an array](docs/images/Table%202.png)](docs/images/Table%202.png)

Table generated with model will create a header for each property of the model. For example, if we'd pass following data:

```
return view('welcome', [
    'users' => User::get([
        'first_name',
        'last_name',
        'email',
        'email_verified_at as verified_at'
    ]);
]);
```

to the same blade from the example above, we'll ge the following output:

[![Table content using model](docs/images/Table%203.png)](docs/images/Table%203.png)

Table component comes with an option to render the content with Row Index cell by adding `row-index` property and setting it to `true`.

```

```

Component above will render following table:

[![Table content with row index](docs/images/Table%204.png)](docs/images/Table%204.png)

#### Image

[](#image)

List of all properties Image component accepts is as follows:

PropertyDescriptionsrcImage source.altImage Alternative text description.widthImage width (defaults to `auto`).heightImage height (defaults to `auto`).is-responsiveDetermine whether the Image is Responsive (defaults to `false`).as-sectionDetermine whether to display Image as a section (defaults to `true`).In order to render the component, use the following syntax:

```

```

By default, rendered image will not take more than it's width, no matter the screen size. If you add `is-responsive`property, and set it to `true`, image will take full screen width on smaller size screens.

[![Image responsiveness](docs/images/Image.gif)](docs/images/Image.gif)

Image component by default is rendered as a mail section, meaning `img` tag is wrapped within [Mail Content component](#content) which will result in an image taking its own table row.

In case you'd like to include an image as a part of another component or simply render it as it is, add `is-section`property and set it to `false`.

#### Button

[](#button)

List of all properties Button component accepts is as follows:

PropertyDescriptionurlButton link.titleButton title.widthButton width (defaults to `200`).heightButton height (defaults to `40`).colorButton color (defaults to `black`).In order to render the component, use the following syntax:

```

```

If your Button is containing simple text/title, you can pass is as a property using the following syntax:

```

```

However, if you'd like to inject more complex HTML, use the standard [Blade Slot syntax](https://laravel.com/docs/9.x/blade#slots):

```

    Button

```

#### New Line

[](#new-line)

List of all properties New Line component accepts is as follows:

PropertyDescriptionheightNew Line Break height.asTableDetermine whether the component should be rendered as a table.backgroundNew Line Break background color.In order to render the component, use the following syntax:

```

```

Examples
--------

[](#examples)

#### Verify Email

[](#verify-email)

Let's say we want to create a Verification Email that gets sent when the user successfully registers.

First, we'll create a Mail class using following artisan command:

```
php artisan make:mail VerificationMail

```

Command above will create a `VerificationMail.php` Mail class with the same name in `app\Mail` directory.

Next step would be to attach data that we'll use to the class.

```
class VerificationMail extends Mailable
{
    /**
     * Create a new message instance.
     */
    public function __construct(public User $user, public string $email, public string $token)
    {
        //
    }

    /**
     * Get the message envelope.
     */
    public function envelope(): Envelope
    {
        return new Envelope(
            from   : new Address('example@example.com', 'Example'),
            subject: 'Verify Email',
        );
    }

    /**
     * Get the message content definition.
     */
    public function content(): Content
    {
        return new Content(
            view: 'mail.verification-mail',
        );
    }
}
```

Next step would be to create a [view](https://laravel.com/docs/9.x/mail#configuring-the-view). For this example, we'll create `verify-email.blade.php` file in `resources/views/emails` directory.

Finally, we'll use Mail Components to create an HTML for aforementioned email.

Let's start with creating our basic Layout with Header and Footer. Blade syntax below:

```

```

will render following HTML:

[![Verify Email Example 1](docs/images/Example%201.png)](docs/images/Example%201.png)

Next, we'll add email content:

```

        Hello, {{ $user->first_name }}!

        Please click the button below to verify your email address.

        Verify Email Address

        If you did not create an account, no further action is required.

```

which will generate following HTML:

[![Verify Email Example 2](docs/images/Example%202.png)](docs/images/Example%202.png)

We'll add a Subcopy with verification link as a string in case the user has trouble verifying an email via button.

```

        Hello, User!

        Please click the button below to verify your email address.

        Verify Email Address

        If you did not create an account, no further action is required.

        If you're having trouble clicking the "Verify Email Address" button, copy and paste the URL below into your web browser:
        {{ route('verify.email', ['user' => $user, 'token' => $token]) }}

```

now, our email looks as follows:

[![Verify Email Example 3](docs/images/Example%203.png)](docs/images/Example%203.png)

Customisation
-------------

[](#customisation)

### Config

[](#config-1)

- **prefix** - *Mail Components prefix, defaults to 'mail' (E.g. ).*
- **separator** - *Mail Components separator, defaults to '::' (E.g. x-mail::button).*
- **layout** - *Array containing Mail Components Layout settings.*

    - **font\_link** - *Font link that the Mail Components will use. ( E.g. [https://fonts.googleapis.com/css2?family=Roboto&display=swap](https://fonts.googleapis.com/css2?family=Roboto&display=swap)).*
    - **font\_family** - *Font family name (E.g. Roboto).*
    - **background** - *Layout Component background color.*
- **header** - *Array containing Mail Components Header settings.*

    - **show** - *Determines whether the Header Mail Component will be visible (defaults to `true`).*
    - **logo** - *Header logo (url or path to the asset).*
    - **width** - *Header logo width (if none passed, it'll take logo image width).*
    - **height** - *Header logo height (if none passed, it'll take logo image width).*
- **footer** - *Array containing Mail Components Footer settings.*

    - **show** - *Determines whether the Footer Mail Component will be visible (defaults to `true`).*
    - **show\_copyright** - *Determines whether the Footer Mail Component copyright line will be visible (defaults to `true`).*
    - **address** - *Street address of your business.*
    - **city** - *City of your business.*
    - **state** - *State of your business.*
    - **zip** - *Zip code of your business.*
    - **phone** - *Phone number of your business.*
- **content** - *Array containing Mail Components Content settings.*

    - **background** - *Content Component background color.*
- **grid** - *Array containing Mail Components Grid settings.*

    - **background** - *Grid Component background color.*
    - **spacing** - *Renders spacing between Grid and other components ( options: `none`, `top`, `bottom`, `top, bottom`).*
- **hero** - *Array containing Mail Components Hero settings.*

    - **background** - *Hero Component background color.*
    - **height** - *Hero Component height.*
- **subcopy** - *Array containing Mail Components Subcopy settings.*

    - **background** - *Subcopy Component background color.*
- **table** - *Array containing Mail Components Table settings.*

    - **row\_index** - *Determines whether the Table component will be rendered with Row index column.*
    - **background** - *Table Component background color.*
    - **header\_background** - *Table Component header background color.*
- **image** - *Array containing Mail Components Image settings.*

    - **is\_responsive** - *Determines whether the Image component will be responsive.*
    - **as\_section** - *Determines whether the Image component will be rendered as a section or as plain image.*
- **button** - *Array containing Mail Components Button settings.*

    - **width** - *Button width (defaults to `200`).*
    - **height** - *Button height (defaults to `40`).*
    - **color** - *Button color (defaults to `black`).*
- **new\_line** - *Array containing Mail Components New Line settings.*

    - **height** - *New Line height (defaults to `16`).*
    - **as\_table** - *Determine whether the component should be rendered as a table (defaults to `false`).*
    - **background** - *New Line background color*

> **Note:** You might need to clear config cache using `php artisan cache:clear` command after you make changes to `.env` file.

### Publishing

[](#publishing)

You can publish all components class and view using artisan the following command:

```
php artisan components:publish

```

Optionally, you can pass component name as an argument, which will publish only those components.

```
php artisan components:publish Header Footer Table

```

From this point on, you can change the published component class and view to your liking.

### Restoring

[](#restoring)

If by any chance you'd like to restore the components default settings, use the following artisan command:

```
php artisan components:restore

```

Optionally, you can pass component name as an argument, which will restore only those components.

```
php artisan components:restore Header Footer Table

```

Additionally, if you'd like to remove previously published components class and views, you can attach `--delete` option:

```
php artisan components:restore --delete

```

or

```
php artisan components:restore Header Footer Table --delete

```

> **Note:** You might need to clear config cache using `php artisan cache:clear` command after you publish or restore the components.

License
-------

[](#license)

The MIT License (MIT). Please see [License File](LICENSE) for more information.

###  Health Score

32

—

LowBetter than 72% of packages

Maintenance38

Infrequent updates — may be unmaintained

Popularity19

Limited adoption so far

Community10

Small or concentrated contributor base

Maturity51

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 66.7% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~131 days

Recently: every ~160 days

Total

7

Last Release

537d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/e1a22943d2873bc75c7c184757126426c07ce85e323bd80d5ed60cfd8c223c59?d=identicon)[BJNSTNKVC](/maintainers/BJNSTNKVC)

---

Top Contributors

[![BJNSTNKVC](https://avatars.githubusercontent.com/u/104220595?v=4)](https://github.com/BJNSTNKVC "BJNSTNKVC (8 commits)")[![Korko](https://avatars.githubusercontent.com/u/43628?v=4)](https://github.com/Korko "Korko (4 commits)")

---

Tags

laravel

### Embed Badge

![Health badge](/badges/bjnstnkvc-mail-components/health.svg)

```
[![Health](https://phpackages.com/badges/bjnstnkvc-mail-components/health.svg)](https://phpackages.com/packages/bjnstnkvc-mail-components)
```

###  Alternatives

[barryvdh/laravel-ide-helper

Laravel IDE Helper, generates correct PHPDocs for all Facade classes, to improve auto-completion.

14.9k123.0M687](/packages/barryvdh-laravel-ide-helper)[laravel/ui

Laravel UI utilities and presets.

2.7k134.9M601](/packages/laravel-ui)[tightenco/jigsaw

Simple static sites with Laravel's Blade.

2.2k438.5k29](/packages/tightenco-jigsaw)[roots/acorn

Framework for Roots WordPress projects built with Laravel components.

9682.1M97](/packages/roots-acorn)[laravel/folio

Page based routing for Laravel.

608453.9k27](/packages/laravel-folio)[orchestra/canvas

Code Generators for Laravel Applications and Packages

21017.2M158](/packages/orchestra-canvas)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)