PHPackages                             trendyminds/molecule - 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. [Templating & Views](/categories/templating)
4. /
5. trendyminds/molecule

ActiveCraft-plugin[Templating & Views](/categories/templating)

trendyminds/molecule
====================

Grab Twig components, CSS and JS files outside the primary template folder

1.2.0(7y ago)2010.7k—8.3%3MITPHP

Since Oct 10Pushed 7y ago3 watchersCompare

[ Source](https://github.com/trendyminds/molecule)[ Packagist](https://packagist.org/packages/trendyminds/molecule)[ RSS](/packages/trendyminds-molecule/feed)WikiDiscussions master Synced 1mo ago

READMEChangelog (4)Dependencies (1)Versions (5)Used By (0)

[![Molecule logo](resources/img/logo.svg)](resources/img/logo.svg) Molecule
===========================================================================

[](#-molecule)

[![Your component structure and Craft CMS in harmony](resources/img/banner.png)](resources/img/banner.png)

Why Molecule?
-------------

[](#why-molecule)

Molecule allows you to grab Twig components from outside the template folder. This is useful if you want to keep your Twig partials, CSS, React/Vue files, etc in a single component folder. Now all of your components are nicely organized in individual folder structures!

```
├── components/
│   ├── ButtonPrimary/
│   │   ├── index.css
│   │   ├── index.jsx
│   │   ├── index.twig
│   │   └── README.md
│   ├── Gallery/
│   ├── Hero/
│   └── VideoEmbed/
└── public/
    ├── cpresources/
    ├── index.php
    └── .htaccess

```

Example use
-----------

[](#example-use)

Setup your `ButtonPrimary/index.twig` partial:

```

  {{label}}

```

Then include in your Twig templates using the following syntax:

```
{{craft.molecule.get("ButtonPrimary", {
    url: "https://google.com",
    label: "Visit Google.com",
    newWindow: true
  })
}}
```

You can even include components in other components!

**/components/Hero/index.twig**

```

  {{craft.molecule.get("ButtonPrimary", {
      url: "#",
      label: "Learn more"
    })
  }}

```

Icon Components
---------------

[](#icon-components)

If you have an `Icon/` component there's an additional `craft.molecule.icon()` helper you can use to output the SVG directly into your templates.

```
├── components/
│   ├── Icon/
│   │   ├── images/
│   │   │    ├── arrow.svg
│   │   │    ├── play-button.svg
│   │   │    └── twitter.svg
│   │   ├── index.css
│   │   └── index.jsx
│   ├── Gallery/
└── public/
    ├── cpresources/
    ├── index.php
    └── .htaccess

```

```
{{craft.molecule.icon("twitter", { class: "custom_class" })}}
```

will compile to:

```

```

Testimonials
------------

[](#testimonials)

### Matt Rothenberg @mattrothenberg

[](#matt-rothenberg-mattrothenberg)

> @aaronbushnell @CraftCMS I went all in 😜.
>
> Feels so nice to be able to "compose" components in a React-y way, too.
>
> [![AspectRatioBox component from Matt Rothenberg](resources/img/testimonials/01.png)](resources/img/testimonials/01.png)

Requirements
------------

[](#requirements)

This plugin requires Craft CMS 3.0.0-beta.23 or later.

Installation
------------

[](#installation)

To install the plugin, follow these instructions.

1. Open your terminal and go to your Craft project:

    ```
     cd /path/to/project

    ```
2. Then tell Composer to load the plugin:

    ```
     composer require trendyminds/molecule

    ```
3. In the Control Panel, go to Settings → Plugins and click the “Install” button for Molecule.
4. Configure the path to your components directory within Molecule's settings

Credits
-------

[](#credits)

Icon by [Aaron Humphreys](https://dribbble.com/AarhCreative) — [Dribbble post](https://dribbble.com/shots/3506937-Free-iOS-App-Icons)

###  Health Score

36

—

LowBetter than 82% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity31

Limited adoption so far

Community12

Small or concentrated contributor base

Maturity65

Established project with proven stability

 Bus Factor1

Top contributor holds 92.3% 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 ~52 days

Total

4

Last Release

2621d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/51ee860b8a11c81c32b2d0bf9f90e23067fcf3cf72476bfab89913bf0e1ea3b3?d=identicon)[trendyminds](/maintainers/trendyminds)

---

Top Contributors

[![aaronbushnell](https://avatars.githubusercontent.com/u/315202?v=4)](https://github.com/aaronbushnell "aaronbushnell (24 commits)")[![coryzibell](https://avatars.githubusercontent.com/u/7986014?v=4)](https://github.com/coryzibell "coryzibell (2 commits)")

---

Tags

craftcraft3craftcmscraftcms-plugincmsCraftcraftcmscraft-pluginmolecule

### Embed Badge

![Health badge](/badges/trendyminds-molecule/health.svg)

```
[![Health](https://phpackages.com/badges/trendyminds-molecule/health.svg)](https://phpackages.com/packages/trendyminds-molecule)
```

###  Alternatives

[lewisjenkins/craft-dynamic-fields

Populate Craft fields with dynamic data using the power of Twig.

14667.0k](/packages/lewisjenkins-craft-dynamic-fields)[nystudio107/craft-minify

A simple plugin that allows you to minify blocks of HTML, CSS, and JS inline in Craft CMS templates.

37461.2k29](/packages/nystudio107-craft-minify)[jalendport/craft-preparse

A fieldtype that parses Twig when an element is saved and saves the result as plain text.

1086.4k](/packages/jalendport-craft-preparse)[craftpulse/craft-colour-swatches

Let clients choose from a predefined set of colours and utilise associated colour codes and class names in your templates.

3530.8k2](/packages/craftpulse-craft-colour-swatches)[verbb/footnotes

Adds a footnotes feature to CKEditor fields and Twig templates.

213.3k](/packages/verbb-footnotes)

PHPackages © 2026

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