@pixonui/react

🚀 Key Philosophies

• Native-First: We prefer native browser APIs (like <dialog>, IntersectionObserver, and ValidityState) over heavy JavaScript polyfills.
• Zero Dependencies: We don't use Radix or other headless libraries. Every component is built from scratch for maximum control and minimum bundle size.
• Ultra-Performance: Optimized for 120fps interactions using CSS variables for mouse tracking and content-visibility for large datasets.
• Full Theme Support: Native support for Light and Dark modes with theme-aware patterns and glassmorphism.

📦 Installation

npm install @pixonui/react

🔧 Configuration

Add the package to your tailwind.config.js content array:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/@pixonui/react/dist/**/*.{js,mjs}"
  ],
  theme: {
    extend: {
      // PixonUI looks best with a dark background
      colors: {
        background: '#0A0A0A',
      }
    },
  },
  plugins: [require("tailwindcss-animate")],
}

🛠️ Usage Examples

Native Dialog (Modal)

import { Dialog, DialogHeader, DialogTitle, Button } from '@pixonui/react';

function MyModal() {
  const [open, setOpen] = React.useState(false);
  
  return (
    <>
      <Button onClick={() => setOpen(true)}>Open Dialog</Button>
      <Dialog isOpen={open} onClose={() => setOpen(false)}>
        <DialogHeader>
          <DialogTitle>Native Dialog</DialogTitle>
        </DialogHeader>
        <p>This uses the native HTML5 &lt;dialog&gt; tag!</p>
      </Dialog>
    </>
  );
}

Advanced Motion

import { Reveal, Magnetic, NumberTicker } from '@pixonui/react';

function Hero() {
  return (
    <div>
      <Reveal direction="up">
        <h1>Welcome to the Future</h1>
      </Reveal>
      
      <Magnetic>
        <button>I follow your mouse</button>
      </Magnetic>
      
      <p>
        Users joined: <NumberTicker value={10000} />
      </p>
    </div>
  );
}

📄 License

MIT