PHPackages snowdog/module-alpaca-ui-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. [Utility & Helpers](/categories/utility) 4. / 5. snowdog/module-alpaca-ui-components Abandoned → [snowdog/module-alpaca-components](/?search=snowdog%2Fmodule-alpaca-components)Magento2-module[Utility & Helpers](/categories/utility) snowdog/module-alpaca-ui-components =================================== Components of the Alpaca theme for Magento 2 1.6.0(5y ago)4585510[36 issues](https://github.com/SnowdogApps/magento2-alpaca-components/issues)[2 PRs](https://github.com/SnowdogApps/magento2-alpaca-components/pulls)MITJavaScript Since Oct 9Pushed 4y ago13 watchersCompare [ Source](https://github.com/SnowdogApps/magento2-alpaca-components)[ Packagist](https://packagist.org/packages/snowdog/module-alpaca-ui-components)[ RSS](/packages/snowdog-module-alpaca-ui-components/feed)WikiDiscussions develop Synced 4w ago READMEChangelog (7)DependenciesVersions (33)Used By (0) [![Greenkeeper badge](https://camo.githubusercontent.com/355c8f0ec5a0fa051bb10203052a9a8503eeeaebc50883e3c880b743897e2497/68747470733a2f2f6261646765732e677265656e6b65657065722e696f2f536e6f77646f67417070732f6d6167656e746f322d616c706163612d636f6d706f6e656e74732e737667)](https://greenkeeper.io/)[![Browser Status](https://camo.githubusercontent.com/6fc1a5079d0f55233afbf598895f2fb2098b5de2b8bcef4fe2c4f6680657fb2b/68747470733a2f2f6261646765732e6865726f6b756170702e636f6d2f62726f77736572733f676f6f676c656368726f6d653d36332c36342c36352c36362c36372666697265666f783d35382c3539267361666172693d3131266970686f6e653d31312e3226616e64726f69643d363426696578706c6f72653d3131266d6963726f736f6674656467653d3136)](https://camo.githubusercontent.com/6fc1a5079d0f55233afbf598895f2fb2098b5de2b8bcef4fe2c4f6680657fb2b/68747470733a2f2f6261646765732e6865726f6b756170702e636f6d2f62726f77736572733f676f6f676c656368726f6d653d36332c36342c36352c36362c36372666697265666f783d35382c3539267361666172693d3131266970686f6e653d31312e3226616e64726f69643d363426696578706c6f72653d3131266d6963726f736f6674656467653d3136) ⚠️ This project is deprecated. Please use [Alpaca 2.0](https://github.com/SnowdogApps/magento2-alpaca-theme) instead. ===================================================================================================================== [](#️-this-project-is-deprecated-please-use-alpaca-20-instead) --- Introduction ------------ [](#introduction) Components library of Alpaca [design system](https://www.uxpin.com/studio/blog/design-systems-vs-pattern-libraries-vs-style-guides-whats-difference/) created to speed up the process of working with design on Magento 2 stores, by creating each UI element, module, and view in a simplified, front-end developer friendly, environment. This components liblary is built on top of [Fractal.js](http://fractal.build/guide). Magento 2 experience isn't required to work with this code. Demo / Preview -------------- [](#demo--preview) Installation ------------ [](#installation) - Install dependencies using `yarn` - Run `gulp dev` to start Fractal.js development server - Run `gulp` if you want to generate static files (for example to deploy them) How to create a components library on top of Alpaca --------------------------------------------------- [](#how-to-create-a-components-library-on-top-of-alpaca) It's necessary only to work outside the Magento. 1. Copy-paste `package.json`, `gulpfile.js`, `.eslintignore`, `.eslintrc`, `.sass-lint.yml`, `.stylelintrc`, `.gitignore` files to the new project 2. Create `modules.json` file with an array of paths to parent components libraries. In most cases it will look like this: ``` ["../../snowdog/module-alpaca-components"] ``` 3. Customize or add new files following the same structure as in Alpaca components library 4. Run `gulp dev` Directory structure ------------------- [](#directory-structure) - `components` directory is what you are going to import into the Magento 2 theme. - `docs` and `public` are just for the local environment purposes, you will find there sample images, testing libs, utility styles etc. Core concepts ------------- [](#core-concepts) ### Components architecture [](#components-architecture) Components are divided into 4 groups: 1. Globals - Contains code that other components can use in any place, for example, typography, icons or SASS variables. 2. Elements - Smallest UI parts, for example, buttons - Element can't depend on other elements - Element shouldn't have any layout 3. Modules - More complex UI parts like search form or header - Takes elements or modules and combine them together adding layout and context 4. Views - Takes elements or modules and combine them together adding final layout and context - You should be able to show it to client/PM as a preview of ready to use store - You shouldn't create any new UI elements, everything needs to be reusable. ### Naming [](#naming) - Group name needs to be plural - Component name needs to be singular - Component name shouldn't be related to any project or place in the layout - Bad: `filters` - Good: `dropdown-list` or `collapsible-list` - Avoid using `box`, `block`, `item`, `info`, `text`, `cms`, especialy combined together, for example `info-box` - Avoid naming two components in similar way i.e. `cms-subcategories` and `cms-subcategory` ### Colors [](#colors) - By default alpaca components uses up to 7 step grayscale ### SASS Variables naming [](#sass-variables-naming) Follow BEM-like naming convention i.e. when you component name is `button` and you are creating a variable for a `padding` it should be `$button__padding`. Same as in BEM, you are not allowed to build construction like `$button__icon__padding`, it should be `$button__icon-padding`. Variables related to the pseudo-classes and pseudo-selectors should be treated as a BEM elements `$button__color-hover`. Also, BEM modificators are allowed in variables `$button__padding--secondary`, you can even stack them like this `$button__padding--secondary--dark`. To target variable to specific breakpoint adding `\@breakpoint` at the end of the variable name `$button__padding\@medium`. Always use `small`, `medium`, `large` etc. to describe the breakpoint. Examples of proper variables names: ``` $swatch__option-border $swatch__option-border-color-hover $swatch__option-image-height\@large $swatch__option-size--small $swatch__option-image-width--small $swatch__option-image-width--small\@large ``` Accessibility ------------- [](#accessibility) You can run `gulp a11y` to run dev server with accessibility tests enabled. If on some view there is no a11y message, please go to the component config and comment out `preview: '@docs-only-styles'` ### Health Score 35 — LowBetter than 77% of packages Maintenance4 Infrequent updates — may be unmaintained Popularity27 Limited adoption so far Community25 Small or concentrated contributor base Maturity74 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 ~41 days Recently: every ~110 days Total 27 Last Release 2100d ago Major Versions 0.10.2 → 1.0.02018-10-15 ### Community Maintainers ![](https://www.gravatar.com/avatar/c2399e0548bfe7348208580ab2abe974fcecdcaff45441380864689c981ea606?d=identicon)[snowdog](/maintainers/snowdog) --- Top Contributors [![Aekal](https://avatars.githubusercontent.com/u/7126345?v=4)](https://github.com/Aekal "Aekal (452 commits)")[![szafran89](https://avatars.githubusercontent.com/u/5370251?v=4)](https://github.com/szafran89 "szafran89 (402 commits)")[![Igloczek](https://avatars.githubusercontent.com/u/5119280?v=4)](https://github.com/Igloczek "Igloczek (315 commits)")[![kruchy8](https://avatars.githubusercontent.com/u/12099511?v=4)](https://github.com/kruchy8 "kruchy8 (211 commits)")[![anqaka](https://avatars.githubusercontent.com/u/15080214?v=4)](https://github.com/anqaka "anqaka (187 commits)")[![Januszpl](https://avatars.githubusercontent.com/u/7412776?v=4)](https://github.com/Januszpl "Januszpl (60 commits)")[![talalus](https://avatars.githubusercontent.com/u/3689740?v=4)](https://github.com/talalus "talalus (48 commits)")[![robwozniak](https://avatars.githubusercontent.com/u/30414211?v=4)](https://github.com/robwozniak "robwozniak (27 commits)")[![kjugi](https://avatars.githubusercontent.com/u/11212541?v=4)](https://github.com/kjugi "kjugi (18 commits)")[![greenkeeper[bot]](https://avatars.githubusercontent.com/in/505?v=4)](https://github.com/greenkeeper[bot] "greenkeeper[bot] (18 commits)")[![pawel-snowdog](https://avatars.githubusercontent.com/u/4963538?v=4)](https://github.com/pawel-snowdog "pawel-snowdog (12 commits)")[![bartdominiak](https://avatars.githubusercontent.com/u/18058305?v=4)](https://github.com/bartdominiak "bartdominiak (8 commits)")[![redrohX](https://avatars.githubusercontent.com/u/1741055?v=4)](https://github.com/redrohX "redrohX (6 commits)")[![anthuanvasquez](https://avatars.githubusercontent.com/u/1563625?v=4)](https://github.com/anthuanvasquez "anthuanvasquez (5 commits)")[![saif-m](https://avatars.githubusercontent.com/u/38468256?v=4)](https://github.com/saif-m "saif-m (4 commits)")[![thepanpawel](https://avatars.githubusercontent.com/u/279262195?v=4)](https://github.com/thepanpawel "thepanpawel (3 commits)")[![JKrupinski](https://avatars.githubusercontent.com/u/15692855?v=4)](https://github.com/JKrupinski "JKrupinski (2 commits)")[![itris](https://avatars.githubusercontent.com/u/2884813?v=4)](https://github.com/itris "itris (1 commits)") ### Embed Badge ![Health badge](/badges/snowdog-module-alpaca-ui-components/health.svg) ``` [![Health](https://phpackages.com/badges/snowdog-module-alpaca-ui-components/health.svg)](https://phpackages.com/packages/snowdog-module-alpaca-ui-components) ``` ### Alternatives [leocarmo/circuit-breaker-php Circuit Breaker for PHP 302468.6k3](/packages/leocarmo-circuit-breaker-php)[vipsoft/unzip Unzip library - a ZipArchive wrapper 331.4M](/packages/vipsoft-unzip)[tuncaybahadir/quar A simple QR Code generation tool for your projects with Laravel 10, 11, 12, 13 versions, php 8.2, 8.3, 8.4 and 8.5 8099.0k6](/packages/tuncaybahadir-quar)[lara-zeus/accordion Zeus Accordion is filamentphp layout component to group components 11140.3k3](/packages/lara-zeus-accordion) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)