Setup

Get started with RetroUI in just a few simple steps.

Initialize

Start by creating a new project. The setup requires a NextJS/ ReactJS app with Typescript & Tailwind.

For NextJS:

npx create-next-app@latest my-app --typescript --tailwindcss

For ReactJS:

npx create-react-app my-app --template typescript

to add tailwind, you can follow these docs.

Installation

Install RetroUI using npm:

npm i pixel-retroui@latest

Configuration

1. Importing Styles

Add the following import to your main CSS file.

globals.css in Next.js and index.css in React

@import 'pixel-retroui/dist/index.css';

Basic Usage

Now you can use the components in your React application:

import React from 'react';
import { Button } from 'pixel-retroui';


function App() {
  return (
    <div>
      <h1 className="text-2xl font-minecraft mb-4">Welcome to My Retro App</h1>
      <Button>Click me!</Button>
    </div>
  );
}


export default App;

Customization

RetroUI components can be customized using props and TailwindCSS classes. Here's an example of customizing a button:

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

Troubleshooting

You might wana add "use client"; on top of your page.
Ensure the paths to the font files are correct and that you've imported the CSS file.

Use font-minecraft to add minecraft font to your text.

Make sure you've imported the library's CSS file and that it's not being overridden by other styles.
Ensure that you have added important: true in tailwind.config.ts.

Next Steps

Need more help? Feel free to open an issue on GitHub or drop a dm on Twitter.