Skip to main content
Version: v1 (Current)

Installation

Requirements​

  • Node.js 18 or higher
  • Vue 3.4 or higher
  • Package Manager npm, yarn, or pnpm

Install the Package​

# npm
npm install @gxp-dev/uikit

# yarn
yarn add @gxp-dev/uikit

# pnpm
pnpm add @gxp-dev/uikit

Peer Dependencies​

The UI Kit requires Vue 3 as a peer dependency. It should already be installed in your project:

{
  "dependencies": {
    "vue": "^3.4.0"
  }
}

Import Styles​

Add the library styles to your application entry point:

// main.ts
import { createApp } from 'vue'
import App from './App.vue'

// Import UI Kit styles
import '@gxp-dev/uikit/styles'

createApp(App).mount('#app')

This imports:

  • Tailwind CSS base styles
  • Component styles
  • Default GXP platform theme

Style Import Options​

Includes everything - Tailwind, components, and default theme:

import '@gxp-dev/uikit/styles'

Base Styles Only​

For custom theming, import base styles without the default theme:

import '@gxp-dev/uikit/styles/base'
import './my-custom-theme.css'  // Your CSS variables

Specific Theme​

Import a specific theme file:

import '@gxp-dev/uikit/styles/base'
import '@gxp-dev/uikit/styles/themes/default.css'

Tailwind Configuration (Optional)​

If your application uses Tailwind CSS and you want to extend the library styles:

// tailwind.config.js
module.exports = {
  content: [
    './src/**/*.{vue,ts,tsx}',
    // Include UI Kit components for class detection
    './node_modules/@gxp-dev/uikit/**/*.js'
  ],
  theme: {
    extend: {
      // Your customizations
    }
  }
}

TypeScript Configuration​

The package includes TypeScript declarations. No additional configuration needed.

For strict type checking, ensure your tsconfig.json includes:

{
  "compilerOptions": {
    "moduleResolution": "bundler",
    "types": ["vite/client"]
  }
}

Verify Installation​

Create a simple test component:

<script setup lang="ts">
import { Button } from '@gxp-dev/uikit'
</script>

<template>
  <Button>Hello UI Kit!</Button>
</template>

If the button renders with styling, you're all set!

Troubleshooting​

Styles Not Appearing​

  1. Ensure @gxp-dev/uikit/styles is imported in your entry file
  2. Check that the import comes before your app styles (if overriding)
  3. Verify the import path has no typos

TypeScript Errors​

  1. Restart your IDE/TypeScript server
  2. Run npm install again to ensure types are downloaded
  3. Check node_modules/@gxp-dev/uikit/dist/index.d.ts exists

Build Errors​

The UI Kit uses ES modules. Ensure your bundler is configured for ESM:

// vite.config.ts
export default defineConfig({
  optimizeDeps: {
    include: ['@gxp-dev/uikit']
  }
})

Next Steps​