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/puikFirst 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 -DThen 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>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')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.
- Include the CSS in your HTML by using the CDN
<link
rel="stylesheet"
href="https://unpkg.com/@prestashopcorp/puik/dist/index.css"
/>- Add the classes in your HTML
<button class="puik-button">Example button</button>Please make sure to read the Contributing Guide before making a pull request
![renovate[bot] avatar](https://avatars.githubusercontent.com/in/2740?v=4 "renovate[bot]")
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent