@prestashopcorp/puik

Puik

The PrestaShop UI Kit

Documentation

About The Project

Puik is a component library that aims to provide a complete set of reusable components based on the PrestaShop Design System for all the PrestaShop ecosystem.

Using the VueJS components

Prerequisites

• Node.js LTS is required.

Installation

For the moment this package is only available through Github packages
To install it you must configure a .npmrc file in your project

@prestashopcorp:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=YOUR_GITHUB_TOKEN

You can create a github token by going in the Github Developer settings
Your token must have the read:packages rights

# chose your favorite package manager
# NPM
$ npm install @prestashopcorp/puik --save

# Yarn
$ yarn add @prestashopcorp/puik

# pnpm
$ pnpm install @prestashopcorp/puik

(back to top)

Usage

Auto import (recommended)

First you need to install unplugin-vue-components

$ npm install -D unplugin-vue-components

# Yarn
$ yarn add unplugin-vue-components -D

# pnpm
$ pnpm install unplugin-vue-components -D

Then add the code below in your vite.config file

import { defineConfig } from 'vite'
import Components from 'unplugin-vue-components/vite'
import { PuikResolver } from '@prestashopcorp/puik'

export default defineConfig({
  plugins: [
    // ...
    Components({
      resolvers: [PuikResolver()],
    }),
  ],
})

On demand import

Import the vue component and the component css directly into your vue file

<script setup>
import '@prestashopcorp/puik/es/components/button/style/css'
import { PuikButton } from '@prestashopcorp/puik'
</script>

<template>
  <puik-button>Example button</puik-button>
</template>

(back to top)

Full import

If you don't care about bundle size you can full import the library by following these instructions

Import the vue library and the css directly into your main.js / main.ts

import { createApp } from 'vue'
import Puik from '@prestashopcorp/puik'
import '@prestashopcorp/puik/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(Puik)
app.mount('#app')

(back to top)

Using the CSS components

If you don't use VueJS for your application, you can use the CSS only version of our components. It includes all the styles used in the VueJs component library.

Usage

1. Include the CSS in your HTML by using the CDN

<link
  rel="stylesheet"
  href="https://unpkg.com/@prestashopcorp/puik/dist/index.css"
/>

1. Add the classes in your HTML

<button class="puik-button">Example button</button>

(back to top)

Contributing

Please make sure to read the Contributing Guide before making a pull request

(back to top)