pex-ui

v1.0.1

Published

4 months ago

PEX Design System - React Components with Dark Glass Design

0High
0Medium
0Low

itsmepex

pex design-system react components ui dark-glass emoji-pulse

🔱 PEX UI - Design System

Version: 1.0.0
Last Updated: 2025-11-18
Status: ✅ Ready to use

🎯 Features

🔱 emoji-pulse Loading Spinner
🎨 Dark Glass Components
🔘 Modern Buttons (Gradient + Glass)
📝 Form Elements
🔔 Notifications
🎯 Badges
📊 Modals
🎨 Utility Classes

📦 Installation

Option 1: Local Import (Monorepo)

// In your React app
import { PexButton, PexCard, PexLoading } from '@pex/ui';
import '@pex/ui/styles';

Option 2: Copy CSS File

<link rel="stylesheet" href="/packages/pex-ui/dist/pex-ui.css">

🚀 Usage

React Components

import { 
  PexButton, 
  PexCard, 
  PexLoading,
  PexInput,
  PexNotification,
  PexBadge,
  PexModal
} from '@pex/ui';
import '@pex/ui/styles';

function App() {
  return (
    <div>
      {/* Loading Spinner */}
      <PexLoading />
      
      {/* Card */}
      <PexCard>
        <h2>Card Title</h2>
        <p>Card content...</p>
      </PexCard>
      
      {/* Buttons */}
      <PexButton variant="primary">Primary Button</PexButton>
      <PexButton variant="secondary">Secondary Button</PexButton>
      <PexButton variant="glass">Glass Button</PexButton>
      
      {/* Input */}
      <PexInput 
        placeholder="Enter text..." 
        value={value}
        onChange={(e) => setValue(e.target.value)}
      />
      
      {/* Notification */}
      <PexNotification type="success">
        Operation successful!
      </PexNotification>
      
      {/* Badge */}
      <PexBadge variant="success">✅ Live</PexBadge>
      
      {/* Modal */}
      <PexModal 
        isOpen={isOpen} 
        onClose={() => setIsOpen(false)}
        title="Modal Title"
      >
        <p>Modal content...</p>
      </PexModal>
    </div>
  );
}

Plain HTML (CSS Only)

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="/packages/pex-ui/dist/pex-ui.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
  <!-- Loading -->
  <div class="pex-loading">🔱</div>
  
  <!-- Card -->
  <div class="pex-card">
    <h2>Card Title</h2>
    <p>Content...</p>
  </div>
  
  <!-- Button -->
  <button class="pex-btn pex-btn-primary">
    Click Me
  </button>
  
  <!-- Input -->
  <input class="pex-input" placeholder="Enter text...">
  
  <!-- Notification -->
  <div class="pex-notification success">
    <span>✅</span>
    <div>Success message!</div>
  </div>
  
  <!-- Badge -->
  <span class="pex-badge pex-badge-success">✅ Live</span>
</body>
</html>

🎨 Design Tokens

:root {
  --pex-green: #10b981;
  --pex-green-dark: #059669;
  --pex-blue: #3b82f6;
  --pex-blue-dark: #2563eb;
  --pex-dark: #1e293b;
  --pex-gray: #64748b;
  
  --pex-glass-bg: rgba(30, 41, 59, 0.5);
  --pex-glass-bg-hover: rgba(30, 41, 59, 0.7);
  --pex-glass-border: rgba(255, 255, 255, 0.1);
}

📚 Components

PexLoading

<PexLoading size="4rem" />

PexCard

<PexCard hover={true}>
  Content
</PexCard>

PexButton

<PexButton variant="primary|secondary|glass" disabled={false}>
  Button Text
</PexButton>

PexInput

<PexInput 
  type="text" 
  placeholder="Placeholder"
  value={value}
  onChange={handler}
/>

PexNotification

<PexNotification type="success|error|info|warning" icon="🎉">
  Message
</PexNotification>

PexBadge

<PexBadge variant="success|info|warning">
  Badge Text
</PexBadge>

PexModal

<PexModal 
  isOpen={true} 
  onClose={handler}
  title="Modal Title"
>
  Content
</PexModal>

🎯 Examples

See /packages/pex-ui/examples/ for full examples.

📝 License

🔱 PEX UI v1.0.0 - Precision, Efficiency, eXcellence