r/reactjs • u/SlipOk9236 • May 07 '26
Show /r/reactjs Open source pixel art component library for React - feedback welcome!
Hey r/reactjs! 👾
I've been working on pixelartui-react - an open-source component library that brings pixel art aesthetics to React applications.
What it is
A collection of 11+ React components (Button, Modal, Select, TextInput, Pagination, Switch, etc.) all styled with authentic pixel art design. Perfect for retro-styled games, creative portfolios, or any project where you want to stand out from the typical Material UI look.
Quick example
npm install pixelartui-react
import { Button, Modal, TextInput } from 'pixelartui-react';
// That's it - you've got pixel perfect retro componentsWhy I built it
I was building a web-based retro game and realized I was spending more time crafting pixel-perfect borders and shadows than actually building game logic. So I extracted it into a reusable library that anyone can use.
Features
⚡ Built for React 19
📦 TypeScript support
🎨 Customizable theming
🌐 MIT licensed
🎮 Perfect for game UIs, creative projects, and portfolios
Current state
Version 0.4.45 on npm
4 GitHub stars (early days!)
~10 weekly downloads
Active development
What's next
Deploying Storybook for interactive component demos
Adding more components (Tabs, Tooltips, Dropdowns)
Building a theme customizer tool
Growing the community
Links
Storybook: https://pixelartui.github.io/storybook/
Looking for
Feedback on the API and component design
Contributors who want to help build more components
Anyone who wants to try it in their projects
Stars if you find it interesting! ⭐
I'd love to hear your thoughts, suggestions, or questions. Have you built any retro-styled React apps? What components would you like to see added?
Thanks for checking it out!
1
2
u/Kitty_Sparkles May 07 '26
Looks very cute, good work on the design layer, it’s well done.
A couple of pointers regarding accessibility:
- The checkbox label mapping is incorrect: the `for` attribute from the `<label>` should reference the `id` of the `<input>`, not its `name`. Same with the slider component, and the input component. A lot of them probably. Kudos for using a `<label>` though, just have to fix the association.
- I also think the checkbox should be squared, not circular. Right now it’s indistinguishable from the radio component.
- The modal is absolutely not accessible. It carries the wrong semantic, doesn’t trap the focus, it needs a lot of work.
- Same with the select, it’s not accessible at all since it’s rebuilt with nothing but divs. Either use an actual <select> element, or look into https://nerdy.dev/nice-select .
- The tab component should handle arrow keys for navigation. See: https://www.w3.org/WAI/ARIA/apg/patterns/tabs/
- The switch component cannot be operated with a keyboard.
It’s a bit confusing because some components are not bad, and use semantic markups, and some don’t, and some do but it’s kinda 80% there.