About RetroUI

A NeoBrutalism styled React + TailwindCSS UI library for building bold, modern web apps.

l

Published by

logging-studio

Visit View Profile

README.md

View on GitHub

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)

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.
For Next.js, in your layout.tsx file add: import '@/lib/pixel-retroui-setup.js';

Manual Setup

Install the package:
```
npm i pixel-retroui@latest
```

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.

Fork the repository
Create your feature branch
Commit your changes
Push to the branch
Open a pull request (make it as detailed as possible :))

Support

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 ☕

RetroUI