Index
Setup
Get started with RetroUI in just a few simple steps.
1
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.
2
Installation
Install RetroUI using npm:
npm i pixel-retroui@latest
3
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
Next Steps
- Explore our Components to see what's available
- Visit our GitHub repository for the latest updates and to report issues
Need more help? Feel free to open an issue on GitHub or drop a dm on Twitter.