Most modern UI component libraries come as complete ecosystems—multiple npm packages, custom design systems, proprietary APIs, and extensive documentation to learn. They rebuild everything from scratch using divs and spans, adding layers of abstraction for events, accessibility, and styling. While this gives them complete control, it also means shipping hundreds of kilobytes of JavaScript to recreate what browsers already provide.
No Frills UI takes a different approach: use what the browser already gives you.
Instead of div soup with custom event handlers and accessibility bolt-ons, we build components
from actual <button>, <input> and <select> elements. This means you get
native keyboard navigation, form behavior, and accessibility features out of the box—no extra code needed.
Why No Frills UI?
Smaller bundles, cleaner DOM: Our components are styled with Emotion, but the underlying structure is real HTML. No div soup, no bloated abstractions. You're looking at kilobytes, not hundreds of kilobytes.
Native APIs you already know: Instead of learning proprietary component APIs across multiple npm packages, you can use standard HTML props and browser features. A button is a button. An input is an input. If you know HTML, you already know 90% of the API.
Better semantics by default: Real HTML elements mean better SEO, better accessibility baseline, and a DOM that actually makes sense when you inspect it. Your screen reader users (and your future self debugging in DevTools) will thank you.
Simple theming: Everything's themed through CSS variables. No complex theme providers, no JavaScript runtime overhead. Just set your colors at the root and you're done.
Fast to get started: No boilerplate, no configuration, no learning curve. Import a component and use it. Perfect for POCs, hackathons, and small projects.
What's the Catch?
Let's be real about what this library is and isn't:
This is a learning project, not a production library. I built No Frills UI to experiment with native-first component design and to sharpen my React/TypeScript skills. It's grown into a proper component library with 20+ components, automated releases, and comprehensive Storybook documentation, but I work on this in my spare time for learning—not as a production-grade library.
Platform inconsistencies: Some native elements like <option> can't be fully styled, so their
appearance will vary across browsers and operating systems. If you need pixel-perfect design control,
you'll want a library that builds everything from scratch.
Small community: There's no Discord server, no Stack Overflow answers, no battle-tested solutions to edge cases. You're pretty much on your own if you hit issues.
When Should You Use This?
Perfect for:
- Quick POCs and prototypes where you need UI fast
- Hackathon projects and weekend hacks
- Small personal projects and experiments
- Learning how to build React component libraries
- Bootstrapping an idea before investing in a full UI system
Not suitable for:
- Production applications
- Enterprise projects requiring support
- Teams that need stable, battle-tested components
- Anything your business depends on
If you need production-ready components, use established libraries with active maintenance and community support. But if you're hacking on a side project, need components for a quick demo, or want to explore a simpler approach to React UIs, give No Frills UI a try!
And hey, if you're also learning and want to contribute, pull requests are welcome. We're all learning here! 🚀
Older Versions
We archive the documentation generated for all versions on our GitHub Pages.