Installation

Installation

Install pixel-ui using your preferred package manager:

npm install @joacod/pixel-ui

Peer Dependencies

pixel-ui requires the following peer dependencies:

npm install react react-dom

That's it! Tailwind CSS and Base UI are already bundled with the library, no additional configuration needed.

Setup

Import Pixel UI Styles

In your app's main CSS file (e.g., app/globals.css or src/index.css):

@import '@joacod/pixel-ui/components';

/* Pixel UI Font (optional, but recommended for the full retro experience) */
@import '@joacod/pixel-ui/font';

What's Included

Components Import:

• ✅ Design tokens - NES-inspired 8-bit color palette, 8px grid spacing, pixel font configuration
• ✅ Tailwind utilities - Pre-built utility classes for layout and styling
• ✅ Base utilities - Pixel-art helpers like .pixel-border, .pixel-render, .pixel-text
• ✅ Component styles - Ready-to-use styles for Button, Input, Checkbox, and all other components

Font Import (optional):

• 🎨 Authentic pixel-art font that gives your UI the classic 8-bit look
• If you skip this, components will use your system's default font

:root {
  --font-family-pixel: 'Your Font', monospace;
}

Usage

You can now import and use pixel-ui components:

import { Button } from '@joacod/pixel-ui'

export default function App() {
  return (
    <Button variant="primary" size="md">
      Click me!
    </Button>
  )
}

TypeScript Support

pixel-ui is written in TypeScript and includes type definitions out of the box. No additional setup is required.

Troubleshooting

Styles not applying

If your styles aren't working, check:

1. CSS import is present - Verify @import '@joacod/pixel-ui/components' is in your main CSS file
2. Build process - Restart your dev server after adding the CSS import

TypeScript errors with peer dependencies

Ensure you have all peer dependencies installed:

npm install react react-dom