@snowdog/alpaca-ui

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 git@github.com:SnowdogApps/alpaca-ui.git
cd alpaca-ui
yarn
yarn dev

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