@mpinnovations/ui-kit
v0.0.23
Published
MPI shared components
Downloads
153
Readme
UI-Kit MPinnovations
Shared UI components based on AntDesign + TailwindCSS.
Dependencies
This module is dependent on (it's on peerDependencies):
Quick Setup
- Add
@mpinnovations/ui-kit
dependency to your project
pnpm add -D @mpinnovations/ui-kit
- Add
@mpinnovations/ui-kit
to themodules
section ofnuxt.config.ts
, custom config could be passed inuiKitMpi
property as shown below:
export default defineNuxtConfig({
modules: [
'@mpinnovations/ui-kit'
],
// ui-kit configuration
uiKitMpi: {
theme: {
colorPrimary: '#9139ae',
borderRadius: 6,
fontFamily: 'Roboto',
colorInfo: '#9139ae'
twColors: {
'custom-blue': '#1e40af',
'custom-red': '#ef4444',
}.
twScreens: {
'sm': '640px',
'md': '768px',
}
},
},
})
theme.fontFamily
is applied to a Tailwind config as well. You can apply this font globally using font-main
class on a root container. twColors
is for extending default color palette.
- This module provides two components:
<AntdSpa>
&<AntdSsr>
, it must be used as wrapper inapp.vue
at the top level in order to utilize theme configuration variables:
<AntdSsr>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</AntdSsr>
// or in case of SPA
<AntdSpa>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</AntdSpa>
- VSCode config for taiwind intellisense:
{
"files.associations": {
"*.css": "tailwindcss"
},
"editor.quickSuggestions": {
"strings": true
},
"tailwindCSS.experimental.configFile": "./.nuxt/tailwind.config.cjs"
}
You're good to go! ✨
Development
Node version must be >= 18
# Install dependencies
pnpm i
# Generate type stubs
pnpm dev:prepare
# Develop with the playground
pnpm dev
# Build the playground
pnpm dev:build
# Run ESLint
pnpm lint
# Run Vitest
pnpm test
pnpm test:watch
# Release new version
pnpm release