isaac179 / puik Goto Github PK

Puik

The PrestaShop UI Kit

Documentation

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.

• Node.js LTS is required.

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

# Yarn
$ yarn add @prestashopcorp/puik

# pnpm
$ pnpm install @prestashopcorp/puik

(back to top)

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()],
    }),
  ],
})

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)

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)

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)

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;
}

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.

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

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

2. Add the classes in your HTML

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

(back to top)

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

(back to top)