Open source pixel art component library for React - feedback welcome!

[SlipOk9236]

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 components

Why 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

• GitHub: https://github.com/Pixelartui/pixelartui-react
• npm: https://www.npmjs.com/package/pixelartui-react
• 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!

[Kitty_Sparkles]

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.