PHPackages                             flashbackzoo/silverstripe-pattern-library - 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. [Utility & Helpers](/categories/utility)
4. /
5. flashbackzoo/silverstripe-pattern-library

ActiveSilverstripe-vendormodule[Utility & Helpers](/categories/utility)

flashbackzoo/silverstripe-pattern-library
=========================================

Framework agnostic pattern library generator for Silverstripe

12222PHP

Since Sep 4Pushed 1y ago1 watchersCompare

[ Source](https://github.com/flashbackzoo/silverstripe-pattern-library)[ Packagist](https://packagist.org/packages/flashbackzoo/silverstripe-pattern-library)[ RSS](/packages/flashbackzoo-silverstripe-pattern-library/feed)WikiDiscussions main Synced 1mo ago

READMEChangelogDependenciesVersions (1)Used By (0)

Silverstripe Pattern Library
============================

[](#silverstripe-pattern-library)

Framework agnostic pattern library generator for Silverstripe.

Getting started
---------------

[](#getting-started)

Install the module

```
composer require flashbackzoo/silverstripe-pattern-library

```

Assuming you have a Vue3 component like this

**themes/app/src/ExampleComponent.vue**

```

import { defineComponent } from '@vue/composition-api';

export default defineComponent({
  props: {
    content: {
      type: String,
      required: true,
    },
  },
});

    {{ content }}

```

And a Silverstripe template for your component like this

**themes/app/templates/Includes/ExampleComponent.ss**

```

    $Title

```

You can add some config like this

**app/\_config/pattern-library.yml**

```
---
Name: app-pattern-library
After:
  - '#flashbackzoo-pattern-library'
---
Flashbackzoo\SilverstripePatternLibrary\PatternLibrary:
  engine: Flashbackzoo\SilverstripePatternLibrary\Engine\StorybookV6
  adapter: Flashbackzoo\SilverstripePatternLibrary\Adapter\StorybookVue3
  static_dir: ./themes/app/dist
  output: ./stories
  patterns:
    - ./app/pattern-library/example-component.yml
```

**app/pattern-library/example-component.yml**

```
ExampleComponent:
  title: Components/ExampleComponent
  component:
    name: ExampleComponent
    element: example-component
    path: ../themes/app/src/ExampleComponent.vue
  template:
    name: Includes\ExampleComponent
    data:
      Title: Hello world!
      Content:
        XML: args.content
  args:
    content: >
      'This is my component.'
```

Run the build task

```
/dev/tasks/Flashbackzoo-SilverstripePatternLibrary-GeneratePatternLibraryTask?flush=1

```

This should generate a story in your output directory like

**stories/ExampleComponent.stories.js**

```
import ExampleComponent from '../themes/app/src/ExampleComponent.vue';

export default {
  title: 'ExampleComponent',
  component: ExampleComponent,
};

const Template = (args) => ({
  components: {
    'example-component': ExampleComponent,
  },
  setup() {
    return { args };
  },
  template: `

      Hello world!

  `,
});

export const Primary = Template.bind({});
Primary.args = {
  content: 'This is my component.',
};
```

Not all components require JavaScript, for example footers are often just Silverstripe templates, without any complex interactions. You can generate patterns for "Silverstripe only" components too.

**app/pattern-library/footer.yml**

```
Footer:
  title: Components/Footer
  template:
    name: Includes\Footer
    data:
      Columns:
        - Menu:
            MenuTitle: Column 1
            MenuItems:
              - Title: Example link 1
                Link: '#'
              - Title: Example link 2
                Link: '#'
        - Menu:
            MenuTitle: Column 2
            MenuItems:
              - Title: Example link 3
                Link: '#'
              - Title: Example link 4
                Link: '#'
```

The module supports having a mix of generated and manually created stories in your project. This means you can gradually convert your existing stories to generates ones. And you can still write manual stories if required.

###  Health Score

18

—

LowBetter than 8% of packages

Maintenance28

Infrequent updates — may be unmaintained

Popularity16

Limited adoption so far

Community9

Small or concentrated contributor base

Maturity17

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/73d7553a86dcf47a933f6227a30cb38ff83e11310a6a42d24b68db650433e5d9?d=identicon)[flashbackzoo](/maintainers/flashbackzoo)

---

Top Contributors

[![flashbackzoo](https://avatars.githubusercontent.com/u/878176?v=4)](https://github.com/flashbackzoo "flashbackzoo (37 commits)")

### Embed Badge

![Health badge](/badges/flashbackzoo-silverstripe-pattern-library/health.svg)

```
[![Health](https://phpackages.com/badges/flashbackzoo-silverstripe-pattern-library/health.svg)](https://phpackages.com/packages/flashbackzoo-silverstripe-pattern-library)
```

PHPackages © 2026

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