npm install @pixonui/react

@pixonui/react

Modern. Decoupled. Glassmorphic. Native-First.

The core React component library for PixonUI, built for performance and aesthetics.

🚀 Key Philosophies

- Native-First: We prefer native browser APIs (like , 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

bash

npm install @pixonui/react





🔧 Configuration



Add the package to your

tailwind.config.js

 content array:

js

/* @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



$3

tsx

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



function MyModal() {

  const [open, setOpen] = React.useState(false);

  

  return (

    <>

      

       setOpen(false)}>

        

          Native Dialog

        

        This uses the native HTML5 <dialog> tag!

      

    

  );

}

$3

tsx

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



function Hero() {

  return (

    

      

        Welcome to the Future

      

      

      

        

      

      

      

        Users joined: 

      

    

  );

}

📄 License

MIT