PHPackages                             bdbch/statamic-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. bdbch/statamic-components

ActiveLibrary

bdbch/statamic-components
=========================

03PHP

Since Jun 28Pushed 4y ago1 watchersCompare

[ Source](https://github.com/bdbch/statamic-components-modifier)[ Packagist](https://packagist.org/packages/bdbch/statamic-components)[ RSS](/packages/bdbch-statamic-components/feed)WikiDiscussions master Synced 1w ago

READMEChangelogDependenciesVersions (1)Used By (0)

components-modifier
===================

[](#components-modifier)

> A simple components loader & renderer for Statamic

Installation
============

[](#installation)

Install this plugin via running `composer require bdbch/statamic-components`. This will install the plugin into your Statamic project. After that, make sure to enable the plugin in the Statamic Control Panel.

Usage
=====

[](#usage)

Step 1:
-------

[](#step-1)

You will need to setup components for example as a fieldset to make it reusable for different types of content.

Step 2:
-------

[](#step-2)

Create a replicator field with whatever name you want. This is the replicator field from our example

```
fields:
  -
    handle: page_components
    field:
      collapse: true
      sets:
        // your replicator sets will be added here
      display: Components
      type: replicator
      icon: replicator
      listable: hidden
```

Step 3:
-------

[](#step-3)

Create sets in your replicator containing fields. The set name will be used for the folder structure so keep this in mind.

For this example I will create a component with a wysiwyg block & a image upload. This could be our yaml after this step:

```
fields:
  -
    handle: page_components
    field:
      collapse: true
      sets:
        textblock_with_image:
          display: 'Textblock with Image'
          fields:
            -
              handle: content
              field:
                always_show_set_button: false
                buttons:
                  - h2
                  - h3
                  - bold
                  - italic
                  - unorderedlist
                  - orderedlist
                  - removeformat
                  - quote
                  - anchor
                  - image
                  - table
                save_html: false
                toolbar_mode: fixed
                link_noopener: false
                link_noreferrer: false
                target_blank: false
                reading_time: false
                fullscreen: true
                allow_source: true
                enable_input_rules: true
                enable_paste_rules: true
                display: Content
                type: bard
                icon: bard
                listable: hidden
                validate:
                  - required
            -
              handle: image
              field:
                mode: list
                container: assets
                restrict: false
                allow_uploads: true
                max_files: 1
                display: Image
                type: assets
                icon: assets
                listable: hidden
                validate:
                  - required
                  - image
      display: Components
      type: replicator
      icon: replicator
      listable: hidden
```

Step 4:
-------

[](#step-4)

Now we need to create the antlers template. **This currently only supports antlers, if you need a different rendering solution please create an issue or submit your pullrequest**.

To create a template, create a `components` folder in your `/resources/views` directory. Inside `/resources/views/components` you now have to create a folder called the same as your set name, for this example `textblock_with_image`. The final path would be `/resources/views/textblock_with_image`. Inside this directory, create an `index.antlers.html`. This template will now be loaded whenever this set type is used.

Inside this template, all fields from your set will be available to use.

Step 5:
-------

[](#step-5)

Now render your components at any place you want via using `{{ page_components | components }}`. This will render the replicator field `page_components` with the specified antlers template.

Plans
=====

[](#plans)

- Rendering via Blade
- Allow nested component directories for nested components

###  Health Score

16

—

LowBetter than 5% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity3

Limited adoption so far

Community7

Small or concentrated contributor base

Maturity29

Early-stage or recently created project

 Bus Factor1

Top contributor holds 100% 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.

### Community

Maintainers

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

---

Top Contributors

[![bdbch](https://avatars.githubusercontent.com/u/6538827?v=4)](https://github.com/bdbch "bdbch (1 commits)")

### Embed Badge

![Health badge](/badges/bdbch-statamic-components/health.svg)

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

PHPackages © 2026

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