@gxp-dev/uikit

A Vue 3 component library for GXP platform applications, combining shadcn-vue primitives with domain-specific components.

Overview

The UI Kit provides:

• 40+ UI Primitives - Accessible, unstyled components from shadcn-vue (Button, Input, Dialog, Select, etc.)
• Domain Components - Platform-specific components (VideoPlayer, BarcodeScanner, Leaderboard)
• Composables - Reusable logic for media, scanning, animations
• Experience Flow - State-machine orchestrator + 20 prebuilt page components for multi-stage interactive apps
• Platform Theming - CSS variable-based theming compatible with GXP platform
• Full TypeScript Support - Complete type definitions for all components and utilities
• Tree-Shakeable - Import only what you use

Technology Stack

Layer	Technology
Framework	Vue 3 (Composition API)
Language	TypeScript
Primitives	shadcn-vue (Reka UI + Tailwind)
Styling	Tailwind CSS + CSS Variables
Build	Vite (library mode)
Testing	Vitest + Vue Test Utils
Documentation	Storybook 8

Quick Example

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

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

<template>
  <form class="space-y-4">
    <Input
      v-model="email"
      type="email"
      placeholder="Enter your email"
    />
    <Button type="submit">
      Subscribe
    </Button>
  </form>
</template>

Documentation Structure

• Getting Started - Installation and setup
• Components - Component API reference
• Experience Flow - State-machine orchestrator and prebuilt pages
  • Pages reference
  • API adapter
• Theming - Customization and CSS variables
• Migration Guide - Migrating from z-plugin-components
• API Reference - Complete exports reference
• Contributing - Adding and porting components

Related Packages

The UI Kit is part of a larger ecosystem:

Package	Purpose
@gxp-dev/uikit	UI components (this package)
@gxp-dev/api-client	API interfaces and controllers
@gxp-dev/page-templates	Full page templates (optional)

Support

• Interactive Storybook — embedded component playground (also hosted at gramercytech.github.io/gx-uikit)
• Local Storybook — Run pnpm storybook from the repo for the latest dev build
• Issues — Report bugs and request features on GitHub
• Examples — See the /examples directory for integration patterns