PHPackages app-arena/patterns - 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. app-arena/patterns ActiveProject app-arena/patterns ================== App-Arena Styleguide and pattern library based on patternlab.io 1.2.8(8y ago)06394MITJavaScriptPHP >=5.4 Since Jan 16Pushed 7y ago6 watchersCompare [ Source](https://github.com/apparena/patterns)[ Packagist](https://packagist.org/packages/app-arena/patterns)[ Docs](https://design.app-arena.com)[ RSS](/packages/app-arena-patterns/feed)WikiDiscussions master Synced 2mo ago READMEChangelog (6)Dependencies (4)Versions (67)Used By (0) [App-Arena Patterns](https://brand.app-arena.com/) ================================================== [](#app-arena-patterns) [![npm package](https://camo.githubusercontent.com/4294ff24abbd0e77942bcdfd1c6ffcecdcf112edb11dee5473ce33b1cab5b69f/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f6170706172656e612d7061747465726e732d72656163742e737667)](https://www.npmjs.org/package/apparena-patterns-react)[![PeerDependencies](https://camo.githubusercontent.com/9dc1f59de47dd1d3121eb00c2ee2610da674baa21ea990acded880f5d1bcd96e/68747470733a2f2f696d672e736869656c64732e696f2f64617669642f706565722f6170706172656e612f7061747465726e732e737667)](https://david-dm.org/apparena/patterns#info=peerDependencies&view=list)[![Dependencies](https://camo.githubusercontent.com/e034f0b348152654e99748b1d30b880faad96c230e54ee9476fcc6d37c6539fa/68747470733a2f2f696d672e736869656c64732e696f2f64617669642f6170706172656e612f7061747465726e732e737667)](https://david-dm.org/apparena/patterns)[![DevDependencies](https://camo.githubusercontent.com/4932395c7784aa0d53992ebf83aecef4e807a75349536093bcbb6e76330fe9a1/68747470733a2f2f696d672e736869656c64732e696f2f64617669642f6465762f6170706172656e612f7061747465726e732e737667)](https://david-dm.org/apparena/patterns#info=devDependencies&view=list)[![Coverage Status](https://camo.githubusercontent.com/91947e9ec3a41b239a5c0f2d2a2a1afee2977969c76817d2f56eeb7233dd2a3b/68747470733a2f2f636f766572616c6c732e696f2f7265706f732f6769746875622f6170706172656e612f7061747465726e732f62616467652e7376673f6272616e63683d646576656c6f70)](https://coveralls.io/github/apparena/patterns?branch=develop)[![Build Status](https://camo.githubusercontent.com/98dc83aca3bb7089c68d97d454a1ec73cd54a73c97af77dda83df5e67c64a968/68747470733a2f2f7472617669732d63692e6f72672f6170706172656e612f7061747465726e732e7376673f6272616e63683d6d6173746572)](https://travis-ci.org/apparena/patterns)[![semantic-release](https://camo.githubusercontent.com/5f3b57745af83409bc673dec57e3eb360e1ec53b37ac29f81a319e347fa351c6/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f2532302532302546302539462539332541362546302539462539412538302d73656d616e7469632d2d72656c656173652d6531303037392e737667)](https://github.com/semantic-release/semantic-release) App-Arena Patterns is a set of [React](http://facebook.github.io/react/) components that implement the App-Arena CI. TitleDescription[Pattern demos](https://brand.app-arena.com/#/ui-patterns)Demo of all patterns of this library.[Contributing](docs/contributing.md)Creating and publishing new patterns or editing the Brand portal.[Pattern generator](docs/pattern-generator.md)How the Yeoman pattern generator works and how it can be edited.Getting started --------------- [](#getting-started) App-Arena Patterns are available as [npm package](https://www.npmjs.org/package/apparena-patterns-react). ``` yarn add apparena-patterns-react ``` or ``` npm install apparena-patterns-react ``` to add all components to your app. Usage ----- [](#usage) Here is a quick example to get you started: **./App.js** ``` import React from 'react'; import ReactDOM from 'react-dom'; import MyAwesomeReactComponent from './MyAwesomeReactComponent'; const App = () => ( ); ReactDOM.render( , document.getElementById('app') ); ``` **./MyAwesomeReactComponent.js** ``` import React from 'react'; import {Button} from 'apparena-patterns-react'; const MyAwesomeReactComponent = () => ( Label ); export default MyAwesomeReactComponent; ``` Please refer to each [component's documentation page](https://brand.app-arena.com/#/ui-patterns)to see how they should be imported. Contributing ------------ [](#contributing) If you would like to contribute patterns or add patterns to this library, head over to our [contributing section](/docs/contributing.md). License ------- [](#license) This project is licensed under the terms of the [MIT license](LICENSE.md) ### Health Score 34 — LowBetter than 77% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity15 Limited adoption so far Community20 Small or concentrated contributor base Maturity73 Established project with proven stability Bus Factor3 3 contributors hold 50%+ of commits 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 ~4 days Total 65 Last Release 3130d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/b6ea5faba3708161643afca786db2be1e96eb48f663a7719c793c9d7a6f65fd3?d=identicon)[sbuckpesch](/maintainers/sbuckpesch) --- Top Contributors [![iconsultantsfaktog](https://avatars.githubusercontent.com/u/3873446?v=4)](https://github.com/iconsultantsfaktog "iconsultantsfaktog (44 commits)")[![jonathanmorr](https://avatars.githubusercontent.com/u/16762981?v=4)](https://github.com/jonathanmorr "jonathanmorr (44 commits)")[![dariusbepunkt](https://avatars.githubusercontent.com/u/4473944?v=4)](https://github.com/dariusbepunkt "dariusbepunkt (38 commits)")[![vklein](https://avatars.githubusercontent.com/u/756939?v=4)](https://github.com/vklein "vklein (37 commits)")[![halbach](https://avatars.githubusercontent.com/u/25664137?v=4)](https://github.com/halbach "halbach (11 commits)")[![ebodak](https://avatars.githubusercontent.com/u/22498683?v=4)](https://github.com/ebodak "ebodak (7 commits)")[![teutin](https://avatars.githubusercontent.com/u/20559241?v=4)](https://github.com/teutin "teutin (5 commits)")[![therweg](https://avatars.githubusercontent.com/u/29748317?v=4)](https://github.com/therweg "therweg (4 commits)")[![SiliSun](https://avatars.githubusercontent.com/u/24567981?v=4)](https://github.com/SiliSun "SiliSun (1 commits)")[![cdaringe](https://avatars.githubusercontent.com/u/1003261?v=4)](https://github.com/cdaringe "cdaringe (1 commits)") --- Tags app-arenastyleguide ### Embed Badge ![Health badge](/badges/app-arena-patterns/health.svg) ``` [![Health](https://phpackages.com/badges/app-arena-patterns/health.svg)](https://phpackages.com/packages/app-arena-patterns) ``` ### Alternatives [pattern-lab/core The core functionality for Pattern Lab. 421.4M36](/packages/pattern-lab-core)[pattern-lab/styleguidekit-assets-default The assets for the default StyleguideKit for Pattern Lab. Contains styles and mark-up for Pattern Lab's front-end. 351.4M6](/packages/pattern-lab-styleguidekit-assets-default)[kss-php/kss-php A PHP implementation of KSS: a methodology for documenting CSS and generating styleguides 25142.7k2](/packages/kss-php-kss-php)[sitegeist/fluid-styleguide Living styleguide for Fluid Components 16227.4k1](/packages/sitegeist-fluid-styleguide)[benmanu/silverstripe-simple-styleguide Provides a kitchen sink template useful for theme development. 1244.2k](/packages/benmanu-silverstripe-simple-styleguide)[benmanu/silverstripe-styleguide Generates a styleguide for a SilverStripe theme 108.1k1](/packages/benmanu-silverstripe-styleguide) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)