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.

🚧 Please note there are significant changes from version 1 to version 2. For more informations, please refer to the release-notes-v2

(back to top)

About the repository

This monorepo contains the following libraries:

• @prestashopcorp/puik-components a Vue 3 components library
• @prestashopcorp/puik-web-components a Web components library
• @prestashopcorp/puik-resolver a component resolver for our Vue 3 components library
• @prestashopcorp/puik-theme a CSS library containing all the classes used in our components
• @prestashopcorp/puik-tailwind-preset a Tailwind Css preset that contains all the design tokens used to create the components

Installation

ℹ️ This README only covers the Vue components library usage if you need more information about the usage of the other packages please refer to their README

Prerequisites

• Node.js LTS is required.
• Vue 3

Vue components only

# @prestashopcorp/puik-resolver is optional but strongly recommended
# NPM
$ npm install @prestashopcorp/puik-components @prestashopcorp/puik-resolver --save

# Yarn
$ yarn add @prestashopcorp/puik-components @prestashopcorp/puik-resolver

# pnpm
$ pnpm install @prestashopcorp/puik-components @prestashopcorp/puik-resolver

(back to top)

Usage

Auto import (recommended)

First you need to install unplugin-vue-components & unplugin-auto-import

$ npm install -D unplugin-vue-components unplugin-auto-import

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

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

Then add the code below in your vite.config file

ℹ️ if you don't use Vite follow this link

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

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

ℹ️ If you are using the puik global package you can import PuikResolver directly from @prestashopcorp/puik

On demand import

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

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

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

(back to top)

Contributing

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

(back to top)