The Playful React UI Library with pixel-art aesthetics

Documentation • NPM Package • Report Bug

---

🌟 Why xpui?

xpui is a React UI library designed for developers who want to add a unique, game-inspired aesthetic to their applications. Perfect for:

• 🎮 Gaming platforms and educational apps
• 🎯 AcadXP ecosystem projects
• 🎨 Creative projects that need a distinct retro look
• 🚀 Modern apps with a nostalgic twist

Built with modern web technologies and best practices, xpui combines the charm of pixel-art design with the power of React, TypeScript, and Tailwind CSS.

✨ Features

• 🎨 Pixel-art styling - Retro aesthetic with modern functionality
• 🎯 TypeScript - Full type safety
• 🎪 Tailwind CSS - Utility-first styling with tailwind-variants
• 🧩 Flexible - Customizable with className overrides
• ♿ Accessible - Built with accessibility in mind
• 📦 Lightweight - Minimal dependencies

📦 Installation

npm install @acadxp/xpui
# or
pnpm add @acadxp/xpui
# or
yarn add @acadxp/xpui

Peer Dependencies

npm install react react-dom tailwindcss @tailwindcss/vite

🚀 Quick Start

1. Import styles in your app

import"@acadxp/xpui/styles";

2. Use components

import{Button}from"@acadxp/xpui";functionApp(){return(<Buttonvariant="primary"size="lg"onClick={()=>alert("Clicked!")}>
Click Me!
</Button>);}

📚 Components

Button

A pixel-art styled button component with multiple variants and sizes.

import{Button}from"@acadxp/xpui";// Variants<Buttonvariant="primary">Primary</Button><Buttonvariant="secondary">Secondary</Button><Buttonvariant="success">Success</Button><Buttonvariant="danger">Danger</Button><Buttonvariant="outline">Outline</Button>// Sizes<Buttonsize="sm">Small</Button><Buttonsize="md">Medium</Button><Buttonsize="lg">Large</Button>// Pixelated font<Buttonpixelated>Retro Font</Button><Buttonpixelated={false}>NormalFont</Button>// Custom styling<ButtonclassName="bg-purple-500 hover:bg-purple-600">
Custom
</Button>// Disabled<Buttondisabled>Disabled</Button>

Props

Prop	Type	Default	Description
variant	'primary' | 'secondary' | 'success' | 'danger' | 'outline'	'primary'	Button color variant
size	'sm' | 'md' | 'lg'	'md'	Button size
pixelated	boolean	true	Use monospace font for retro look
disabled	boolean	false	Disable the button
className	string	-	Additional CSS classes
All HTML button attributes	-	-	onClick, type, etc.

🛠️ Utilities

cn (Class Name Utility)

Merge and conditionally apply CSS classes.

import{cn}from"@acadxp/xpui";<ButtonclassName={cn("custom-class",isActive&&"active-class")}>
Button
</Button>;

🎨 Customization

All components support className overrides for full customization:

<Buttonvariant="primary"className="rounded-full shadow-2xl border-4">
Custom Styled
</Button>

📖 More Components Coming Soon

• 🎯 Input
• 🎪 Card
• 🎨 Badge
• 📦 Modal
• 🎭 Tooltip
• 🎪 Dropdown
• And more...

🛠️ Development

Want to contribute or run locally?

# Clone the repository
git clone https://github.com/acadxp/xpui.git
cd xpui
# Install dependencies
pnpm install
# Start Storybook for development
pnpm dev
# Build the library
pnpm build
# Run tests
pnpm test

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📄 License

MIT © DripCode-Studio

---

🔗 Links

• NPM Package
• GitHub Repository
• Report Issues
• AcadXP Platform

---

Made with ❤️ by the DripCode Studio

⭐ Star us on GitHub if you find this project helpful!