PHPackages                             microman/kirby-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. microman/kirby-components

AbandonedArchivedKirby-plugin

microman/kirby-components
=========================

Brings blueprints and snippets to one place.

1.0.1(2y ago)92611proprietaryJavaScript

Since May 19Pushed 2y ago2 watchersCompare

[ Source](https://github.com/plain-solutions-gmbh/kirby-components)[ Packagist](https://packagist.org/packages/microman/kirby-components)[ RSS](/packages/microman-kirby-components/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (2)Dependencies (1)Versions (3)Used By (1)

Kirby Components
================

[](#kirby-components)

Overview
--------

[](#overview)

Do you love to make awesome projects with Kirby CMS? Do you also find it difficult to switch between snippets and blueprints folders?

**This Plugin will change your life!**

[![screenshot](https://raw.githubusercontent.com/youngcut/kirby-components/main/.github/screenshot.gif)](https://raw.githubusercontent.com/youngcut/kirby-components/main/.github/screenshot.gif)

**Watch the [video tutorial](https://www.youtube.com/watch?v=1ycWtWRL1hQ) or check the [example project](https://github.com/youngcut/kirby-components-example)**

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

[](#installation)

**Manually**

[Download](https://github.com/youngcut/kirby-components) and copy the plugin into your plugin folder: `/site/plugins/`

**With Composer**

`composer require microman/kirby-components`

First step
----------

[](#first-step)

1. Create a components folderfolder `site/components`
2. Make a subfolder for your component, e.g. `components/my_component`
3. Create at least one blueprint with the same name as the folder. e.g. `my_component/my_component.yml`
4. Create at least one snippet. e.g. `my_component//my_component.php`

> You can create more snippets and blueprints in your components folder. (called sub components) To access them later, declaring the location `my_component/my_subcomponent`

> You can set label, title and icons in your blueprint. Even tabs and columns, if you like.

Using in your template
----------------------

[](#using-in-your-template)

To output your component, use the `component` helper:

```
component('my_component');
```

Pass values to this component:

```
component('my_component', $page, ['title' => 'This is a different title.']);
```

> The first and the second parameter could be an array or an Kirby object, that contains a content object. Try it out what is working for you.

Using in your panel
-------------------

[](#using-in-your-panel)

### The component field

[](#the-component-field)

```
my_field:
  type: component
  fieldsets: my_component
```

> You can also use Kirby blocks in here: `fieldsets: blocks/heading`

```
$page->my_field()->toComponent();
```

Extend your component like in the example above:

```
$page->my_field()->toComponent(['new_value' => 'My new value']);
```

The variables in the components snippet are accessible with `$content`

```
$content->field_in_component();
```

### The component selector

[](#the-component-selector)

If you add more than one component to the fieldsets, a selector appears:

```
my_field:
  type: component
  fieldsets:
    - my_component
    - my_component/my_subcomponent
    - my_other_component
```

[![plain selector](https://raw.githubusercontent.com/youngcut/kirby-components/main/.github/selector_plain.png)](https://raw.githubusercontent.com/youngcut/kirby-components/main/.github/selector_plain.png)

> By choosing, the fields of the selected component will appear.

> To change the labels in the selector, set the property 'title' of the component.

**Component selector with images**

Adding images to your component folder (with the same name as the component itself)

[![files selector](https://raw.githubusercontent.com/youngcut/kirby-components/main/.github/selector_files.png)](https://raw.githubusercontent.com/youngcut/kirby-components/main/.github/selector_files.png)

These images will shown in the selector and you can be styled with the `selector` property:

```
my_field:
  type: component
  selector:
    columns: 3
    background: var(--color-yellow-200)
    ratio: 3/1
    fit: contain
    gap: 1em
  fieldsets:
    - my_component
    - my_component/my_subcomponent
    - my_other_component
```

[![images selector](https://raw.githubusercontent.com/youngcut/kirby-components/main/.github/selector_images.png)](https://raw.githubusercontent.com/youngcut/kirby-components/main/.github/selector_images.png)

**Images toggles field**

You can use the component selector also standalone:

```
images_toggles:
  type: imagetoggles
  root: location/of/the/images
  ratio: 2/1
  fit: cover
  gap: 1.2em
  options:
    - text: Text1
     value: value1
     image: image1.png
    - text: Text2
     value: value2
     image: image2.png
    - text: Text3
     value: value3
     image: image3.png
```

It follows the same rules as the `toggles`field.

### Output the component field

[](#output-the-component-field)

Use the `toComponent()`method.

```
$page->my_field()->toComponent();
```

Or you can extend the values (with an array or an Kirby object):

```
$page->my_field()->toComponent(['my_component_field' => 'My existing or new value']);
$page->my_field()->toComponent($page->any_section());
```

The `toComponent()` method delivers the selected component.

If you like to use all the available components of the component fields use `toComponents()`:

```
my_field()->toComponents() as $component): ?>

```

The components field
--------------------

[](#the-components-field)

Add more than one component by using the `components` field. It follows the same rules as the Kirby `blocks` field.

```
multiple_components:
  type: components
  fieldset:
    - my_component
    - my_component/my_subcomponent
    - my_other_component
    - blocks/heading
    - blocks/text
    - blocks/list
```

[![components](https://raw.githubusercontent.com/youngcut/kirby-components/main/.github/components.png)](https://raw.githubusercontent.com/youngcut/kirby-components/main/.github/components.png)

Tab injection
-------------

[](#tab-injection)

Add a tabs with components to the component(s) fields.

```
multiple_components:
  type: components
  tabs:
    my_component/my_subcomponent:
      position: after
      label: Injected tab
  fieldset:
    - my_component
```

[![injected_tab](https://raw.githubusercontent.com/youngcut/kirby-components/main/.github/injected_tab.png)](https://raw.githubusercontent.com/youngcut/kirby-components/main/.github/injected_tab.png)

you can also extend your component there:

```
multiple_components:
  type: components
  tabs:
    my_component/my_subcomponent:
      position: after
      label: Injected tab
      fields:
        existing_field:
          label: Another Label
        new_field:
          type: text
  fieldset:
    - my_component
```

License
-------

[](#license)

This is a free trial version of Kirby Components Plugin, which grants you the right to use the plugin for testing purposes. If you wish to use this plugin on one website or if you intend to use it for commercial purposes, you must [purchase a license](https://license.microman.ch/?product=829857).

A license is required for those who wish to use the plugin to generate revenue, including but not limited to: e-commerce websites, affiliate marketing websites, and websites that require payment to access content. Licenses are non-transferable and cannot be shared with other users or websites.

By downloading and using this plugin, you agree to the [terms and conditions of the License Agreement](https://license.microman.ch/license/). Failure to comply with the terms of the License Agreement may result in revocation of your license and legal action.

To purchase a license or learn more about our licensing options, please visit our [website](https://microman.ch) or contact us at [Contact Email](mailto:kirby@micorman.ch). Thank you for your interest in Kirby Components Plugin!

###  Health Score

24

—

LowBetter than 32% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity13

Limited adoption so far

Community11

Small or concentrated contributor base

Maturity45

Maturing project, gaining track record

 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.

###  Release Activity

Cadence

Every ~3 days

Total

2

Last Release

1087d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/2ce34d22100c42ac040481da5ed0d1dc1a858e775500bb290bc8ec956c66bab0?d=identicon)[microman](/maintainers/microman)

---

Top Contributors

[![plain-solutions-gmbh](https://avatars.githubusercontent.com/u/4754476?v=4)](https://github.com/plain-solutions-gmbh "plain-solutions-gmbh (17 commits)")

### Embed Badge

![Health badge](/badges/microman-kirby-components/health.svg)

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

###  Alternatives

[getkirby/cms

The Kirby core

1.5k535.5k352](/packages/getkirby-cms)[distantnative/retour-for-kirby

Manage redirects and track 404s right from the Kirby CMS Panel

14689.4k1](/packages/distantnative-retour-for-kirby)[arnoson/kirby-vite

Vite helper for Kirby CMS

9759.2k3](/packages/arnoson-kirby-vite)[getkirby/staticache

Static site performance on demand

9615.4k](/packages/getkirby-staticache)[fabianmichael/kirby-meta

Your all-in-one powerhouse for any SEO and metadata needs imaginable.

6910.7k1](/packages/fabianmichael-kirby-meta)[thathoff/kirby-oauth

Kirby OAuth 2 Plugin

3823.9k](/packages/thathoff-kirby-oauth)

PHPackages © 2026

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