PixelForge UI 🎮

A retro-future design system with pixel-perfect components, Game Boy pastels, and dark mode. Built with React, TypeScript, and Tailwind CSS.

🎨 Features

• ✨ Retro-Future Aesthetic — Soft shadows, gentle glows, and pixel-perfect borders
• 🌙 Dark Mode — Full light/dark theme support out of the box
• 🎮 Game Boy Palette — Pastello colors inspired by classic gaming consoles
• ♿ Accessible — WCAG 2.1 compliant components with keyboard navigation
• 📦 Tree-shakeable — Import only what you need
• 🎯 TypeScript — Full type safety
• 🚀 Zero Dependencies — Works with any React app

📦 Installation

npm install @pixelforge/ui

or with yarn:

yarn add @pixelforge/ui

🚀 Quick Start

1. Setup Tailwind CSS

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

2. Configure Tailwind

Update your tailwind.config.js:

import { colors, spacing, shadows } from '@pixelforge/ui'

export default {
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      colors,
      spacing,
      boxShadow: shadows,
    },
  },
}

3. Use Components

import { Button } from '@pixelforge/ui'
import '@pixelforge/ui/dist/index.css'

export default function App() {
  return <Button>Press Start</Button>
}

📚 Design Tokens

All design tokens are exported from the package:

import {
  colors,
  typography,
  spacing,
  shadows,
  borderRadius,
  transitions,
  zIndex,
} from '@pixelforge/ui'

Color Palette

// Primary pastello colors
colors.primary.lime      // #C4F0C8
colors.primary.lavender  // #D4B5E8
colors.primary.sky       // #B8E0F0
colors.primary.peach     // #F0D9C8
colors.primary.mint      // #C8F0E0

// Semantic colors
colors.semantic.success  // #7FD8B8
colors.semantic.warning  // #FFB347
colors.semantic.error    // #FF6B6B
colors.semantic.info     // #B8E0F0

🎮 Components

Available Components

• ✅ Button
• ✅ Input
• ✅ Card
• ✅ Badge
• ✅ Modal
• ✅ Dropdown
• ✅ Tooltip
• ✅ Navbar
• ✅ Sidebar
• ✅ Footer

See the documentation for full usage examples.

🌙 Dark Mode

Dark mode is supported via CSS class. Use a theme switcher in your app:

export function ThemeToggle() {
  const [isDark, setIsDark] = useState(false)

  return (
    <button
      onClick={() => {
        setIsDark(!isDark)
        document.documentElement.classList.toggle('dark')
      }}
    >
      {isDark ? '🌙' : '☀️'}
    </button>
  )
}

🛠️ Development

Clone and install:

git clone https://github.com/yourusername/pixelforge-ui.git
cd pixelforge-ui
npm install

Build

npm run build

Watch Mode

npm run dev

Type Check

npm run type-check

📖 Documentation

Full component documentation is available in the /docs folder.

To run the documentation locally:

npm run docs

Then visit http://localhost:8080

🎨 Customization

All tokens can be overridden in your tailwind.config.js:

export default {
  theme: {
    extend: {
      colors: {
        pixelforge: {
          lime: '#your-custom-color',
        },
      },
    },
  },
}

📄 License

MIT © 2024 PixelForge UI

🤝 Contributing

Contributions are welcome! Please open an issue or submit a pull request.

Made with 🎮 by the PixelForge team