Alpaca UI

Highly customizable library of responsive UI components crafted for e-commerce. It is based on Vue.js and Alpaca design system.

⚠️ This library is currently in an early stage. Expect things to be broken or APIs to change as this project matures. DO NOT USE IT IN PRODUCTION!

Features

• High customization and performance
• Possibility to override global variables
• Possibility to override components from partials (HTML/JS/SCSS)
• Semantic and accessible code output
• Ready to use with Vue CLI, Vue Storefornt and Nuxt.js

Getting Started

Installation

Add Alpaca UI to your project by using Yarn

yarn add @snowdog/alpaca-ui

or NPM

npm install @snowdog/alpaca-ui

Usage

Import component in your app using named imports:

import { AButton } from '@snowdog/alpaca-ui'

<template>
  <a-button>
    Alpaca button
  </a-button>
</template>

<script>
import { AButton } from '@snowdog/alpaca-ui'

export default {
  name: 'MyComponent',
  components: AButton
}
</script>

If you need more flexibility you can take the source:

<template src="@snowdog/alpaca-ui/src/atoms/button/Button.html" />

<script>
import AButton from '@snowdog/alpaca-ui/src/atoms/button/Button.js'

export default {
  mixins: [AButton]
}
</script>

<style src="@snowdog/alpaca-ui/src/atoms/button/Button.scss" lang="scss" />

For now, to see all possible cases/modifiers, you should clone and run repo as in Development point, or check .stories.js file in component.

Browser support

Recent versions of Firefox, Chrome, Edge, Opera, Safari and IE11+.

Contributing

Read our contributing guide and let's build a better components together. We welcome all contributions. Please read our CONTRIBUTING.md first. You can submit any ideas as GitHub issues.

Development

git clone [email protected]:SnowdogApps/alpaca-ui.git
cd alpaca-ui
yarn
yarn dev

Open your browser, visit http://127.0.0.1:6006 and have fun.

License

Code released under MIT license. Copyright (c), SNOW.DOG.