Pixel RetroUI

RetroUI is a pixelated UI component library for React and Next.js applications with a retro gaming aesthetic.

Features

• Pixelated, retro gaming-inspired components
• Seamless integration with React and Next.js
• TypeScript support
• Tailwind CSS compatible

Quick Start

Setup

CLI Setup (Recommended)

1. In your terminal:

   npx pixel-retroui

   Follow the instructions in the CLI. It will automatically install dependencies, configure your project, and create necessary setup files.

2. For Next.js, in your layout.tsx file add: import '@/lib/pixel-retroui-setup.js';

Manual Setup

1. Install the package:

   npm i pixel-retroui@latest

2. Add to your CSS file:

   @import 'pixel-retroui/dist/index.css';
   /* For Minecraft font */
   @import 'pixel-retroui/dist/fonts.css';

Basic Usage

Simply import and use:

import { Button, Card } from 'pixel-retroui';

function App() {
  return (
    <div>
      <h1 className="font-minecraft">Retro App</h1>
      <Card className="p-4 mb-4">
        <p>This is a pixel-styled card</p>
      </Card>
      <Button>Click me!</Button>
    </div>
  );
}

Components

Pixel RetroUI includes the following components:

Component	Description
Accordion	Collapsible content sections
Bubble	Speech/thought bubble elements
Button	Customizable buttons with pixel styling
Card	Container for content with pixel borders
Dropdown	Selectable dropdown menus
Input	Text input fields
Popup	Modal dialogs and notifications
ProgressBar	Visual progress indicators
TextArea	Multi-line text input fields

Visit our components page for detailed documentation and examples.

Customization

Components can be customized using props and Tailwind CSS classes:

<Button 
  bg="#c381b5" 
  textColor="#fefcd0"
  shadow="#fefcd0"
  className="px-6 py-2"
>
  Custom Button
</Button>

Troubleshooting

Common issues:

• Fonts not loading: Ensure you've imported pixel-retroui/dist/fonts.css
• Components not styled: Check you've imported pixel-retroui/dist/index.css
• Tailwind conflicts: Add important: true in your tailwind.config.js

Contributing

We welcome contributions! See our contribution guidelines for details.

1. Fork the repository
2. Create your feature branch
3. Commit your changes
4. Push to the branch
5. Open a pull request (make it as detailed as possible :))

Support

• GitHub Issues
• Documentation repo

License

This project is licensed under the BSD 3-Clause License - see the LICENSE file for details.

---

If you find this library useful, consider buying me a coffee ☕