@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

# 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 & 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

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

export default defineConfig({
  plugins: [
    // ...
    Components({
      resolvers: [PuikResolver()],
    }),
    AutoImport({
      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)

Dark Mode

We are using the Tailwind Dark Mode.

To use it you just have to write the css dark rules with dark:<oneRule> in your css. (I recommand to put your light and dark styles on two lines for greater readability)

Exemple

Here we are saying the button background will be blue in light mode and green in dark mode

.my-button {
  @apply bg-blue;
  @apply dark:bg-green;
}

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)