praxis-vue-ui

praxis-vue-ui

A modern, enterprise-ready Vue 3 UI component suite built with Tailwind CSS and TanStack Table.
Designed for data-intensive dashboards, mission-critical admin panels, and fluid design systems.

Explore Monorepo »   •   Report Bug   •   Request Feature

✨ Key Features

• ⚡ 55+ Production Components: Forms, tables, overlays, layout, trees, and navigation primitives.
• 📋 Schema-Driven Forms (PxSchemaForm): Render full dynamic forms with validation using Zod and VeeValidate.
• 📊 Enterprise Data Table (PxDataTable): Built on TanStack Table v9 with sorting, filtering, selection, skeletons, and empty states.
• 🎨 Adaptive Design System: Full Light/Dark mode support using CSS variables and Tailwind CSS.
• 🧩 First-class TypeScript Support: Full typing with auto-completion and prop validation.
• 🚀 Framework Ready: Works seamlessly in Vite, Nuxt 3, and modern build tools.

📦 Installation

# npm
npm install praxis-vue-ui vee-validate

# pnpm
pnpm add praxis-vue-ui vee-validate

# yarn
yarn add praxis-vue-ui vee-validate

# bun
bun add praxis-vue-ui vee-validate

🚀 Quick Start

1. Setup in Vite / Vue 3

// main.ts
import { createApp } from 'vue'
import 'praxis-vue-ui/dist/praxis-vue.css' // Component styles
import App from './App.vue'

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

2. Setup in Nuxt 3

// nuxt.config.ts
export default defineNuxtConfig({
  css: [
    'praxis-vue-ui/dist/praxis-vue.css'
  ],
  build: {
    transpile: ['praxis-vue-ui']
  }
})

💡 Usage Example

<script setup lang="ts">
import { ref } from 'vue'
import { PxDataTable, PxAvatar, PxBadge } from 'praxis-vue-ui'

const columns = [
  { key: 'name', label: 'User' },
  { key: 'role', label: 'Role' },
  { key: 'status', label: 'Status' }
]

const users = ref([
  { id: 1, name: 'Alex Morgan', role: 'Engineering Lead', status: 'Active' },
  { id: 2, name: 'Sofia Chen', role: 'Product Designer', status: 'In Review' }
])
</script>

<template>
  <div class="p-6">
    <PxDataTable :columns="columns" :data="users">
      <template #cell-name="{ row }">
        <div class="flex items-center gap-3">
          <PxAvatar :name="row.name" size="sm" />
          <span class="font-medium text-slate-800 dark:text-slate-100">{{ row.name }}</span>
        </div>
      </template>

      <template #cell-status="{ row }">
        <PxBadge :variant="row.status === 'Active' ? 'success' : 'warning'">
          {{ row.status }}
        </PxBadge>
      </template>
    </PxDataTable>
  </div>
</template>

🎨 Tailwind CSS Integration

To inherit the exact design tokens and theme variables, add our preset to your tailwind.config.js:

// tailwind.config.js
module.exports = {
  content: [
    './index.html',
    './src/**/*.{vue,js,ts,jsx,tsx}',
    './node_modules/praxis-vue-ui/dist/**/*.{js,vue}'
  ],
  presets: [
    require('praxis-vue-ui/tailwind.preset.js')
  ],
  theme: {
    extend: {}
  }
}

CSS Variables Customization

Override core theme colors effortlessly:

:root {
  --ui-primary: #6366f1;       /* Brand Primary */
  --ui-primary-hover: #4f46e5; /* Primary Hover */
  --ui-bg: #fafafa;            /* App Background */
}

.dark {
  --ui-primary: #818cf8;
  --ui-bg: #090d16;
}

🧩 Component Suite Overview

📄 License

MIT © Luis Kern