@gxp-dev/uikit

Vue 3 UI component library for GXP platform applications.

Installation

npm install @gxp-dev/uikit

Setup

1. Import Styles

Import the library styles in your application entry point:

// main.ts
import '@gxp-dev/uikit/styles'

This includes the default GXP theme. For custom theming, see the Theming section.

2. Configure Tailwind (Optional)

If you want to extend the library styles with Tailwind in your application:

// tailwind.config.js
module.exports = {
  content: [
    './src/**/*.{vue,ts}',
    './node_modules/@gxp-dev/uikit/**/*.js'
  ]
}

Usage

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

<template>
  <div>
    <Input v-model="text" placeholder="Enter text" />
    <Button variant="default">Submit</Button>
  </div>
</template>

Components

Button

A versatile button component with multiple variants and sizes.

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

<template>
  <!-- Variants -->
  <Button variant="default">Primary</Button>
  <Button variant="secondary">Secondary</Button>
  <Button variant="destructive">Destructive</Button>
  <Button variant="outline">Outline</Button>
  <Button variant="ghost">Ghost</Button>
  <Button variant="link">Link</Button>

  <!-- Sizes -->
  <Button size="sm">Small</Button>
  <Button size="default">Default</Button>
  <Button size="lg">Large</Button>
  <Button size="icon">Icon</Button>
</template>

Props:

• variant: 'default' | 'secondary' | 'destructive' | 'outline' | 'ghost' | 'link'
• size: 'default' | 'sm' | 'lg' | 'icon' | 'icon-sm' | 'icon-lg'
• as: Render as a different element (default: 'button')
• asChild: Merge props onto child element

Input

A text input component with v-model support.

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

const text = ref('')
</script>

<template>
  <Input v-model="text" placeholder="Enter text" />
  <Input type="email" placeholder="Email address" />
  <Input disabled placeholder="Disabled input" />
</template>

Props:

• modelValue: Bound value (v-model)
• defaultValue: Initial value when uncontrolled
• All standard HTML input attributes

Theming

The library uses CSS variables for theming, compatible with the GXP platform theming system.

Using the Default Theme

The default import includes the GXP theme:

import '@gxp-dev/uikit/styles'

Custom Theming

For custom themes, import only the base styles and define your own CSS variables:

// Import base styles without theme
import '@gxp-dev/uikit/styles/base'

Then define the CSS variables in your application:

:root {
  /* Core Platform Variables */
  --page_background_color: #ffffff;
  --page_text_color: #222222;
  --input_field_background_color: #f5f5f5;
  --input_field_text_color: #222222;
  --input_field_border_color: #cccccc;

  /* Primary Button */
  --primary_button_background_color: #0066cc;
  --primary_button_text_color: #ffffff;
  --primary_button_border_color: #0066cc;

  /* Secondary Button */
  --secondary_button_background_color: #f5f5f5;
  --secondary_button_text_color: #222222;
  --secondary_button_border_color: #cccccc;

  /* Shadcn/Tailwind mappings (auto-derived from above) */
  --background: var(--page_background_color);
  --foreground: var(--page_text_color);
  --primary: var(--primary_button_background_color);
  --primary-foreground: var(--primary_button_text_color);
  --secondary: var(--secondary_button_background_color);
  --secondary-foreground: var(--secondary_button_text_color);
  --border: var(--input_field_border_color);
  --input: var(--input_field_background_color);
  --ring: var(--primary_button_border_color);
  --radius: 0.5rem;
}

Utilities

cn()

A utility function for merging Tailwind CSS classes:

import { cn } from '@gxp-dev/uikit'

const classes = cn(
  'base-class',
  condition && 'conditional-class',
  'override-class'
)

Development

# Install dependencies
npm install

# Start dev server
npm run dev

# Run tests
npm run test

# Run tests with coverage
npm run test:coverage

# Build library
npm run build

# Start Storybook
npm run storybook

# Build Storybook
npm run storybook:build

Exports

// Components
export { Button, buttonVariants } from '@gxp-dev/uikit'
export { Input } from '@gxp-dev/uikit'

// Types
export type { ButtonVariants } from '@gxp-dev/uikit'

// Utilities
export { cn } from '@gxp-dev/uikit'

Requirements

• Vue 3.4+
• Node.js 18+

License

MIT