Hey friends! I've got some exciting news to share with you all. After 2 years of work, we're finally launching Pillar-UI a brand new design system that's all about making your React apps faster, more accessible, and a whole lot easier to build. I know how frustrating it can be to deal with slow load times. That's why we've built Pillar-UI from the ground up with performance, accessibility, and developer experience in mind. I'm excited to share it with you, and I think you're going to love it!
Performance Deep Dive
So, what makes Pillar-UI's bundle size so remarkably tiny? We're talking about a library that's an impressive 9 times smaller than some of the other popular React design systems out there!
The answer lies in our thoughtful approach to theming and styling. By leveraging the power of CSS, we've avoided relying on CSS-in-JS libraries or large theming providers. This approach has allowed us to keep our JavaScript bundle size to a minimum.
But that's not all. We've also use used power of CSS variables to streamline our design and reduce the bundle size even further. Gone are the days of cumbersome JavaScript conditions and workarounds!
Under the hood, we've implemented a state machine-like structure that eliminates a ton of unnecessary code and conditions. This means our library is not only smaller but also more efficient.
We've also developed a clever naming convention for our class names, making them shorter and more unique to minimize conflicts with your custom class names.
Finally, we've employed techniques like tree shaking to eliminate unnecessary code and optimize our library for faster load times. The result? A design system that's remarkably small, blazingly fast, and optimized for performance.
Accessibility Focus
At Pillar-UI, our focus is not only about performance, but we try our best to make our design system accessible to everyone. That's why we've integrated a range of accessibility features into our design system, including:
- Follow WCAG guidelines out of the box.
- Support RTL languages.
- Support Windows High Contrast Mode.
- We Do our best to make the color contrast ratios of our components accessible.
- Use Reduce Motion to avoid janky animations for users with motion sensitivity issues.
- Support font size adjustment in zoom mode.
- Use Semantic Markup when possible to make the library accessible and lightweight.
- Make it Color-blind Friendly Design
Developer Experience (DX) and Getting Started
Beyond performance and accessibility, we've poured our hearts into making Pillar-UI as simple and enjoyable to use as possible. Let me share a little story with you: I've been there, wrestling with some React design systems, where simple things like styling hundreds of buttons became a nightmare. Imagine every button in your project is sharp, with no border radius and the library default is radius.
You've got two common solutions when you want to make the corner of those button sharp: either you tweak each button individually or create a new component just for that. But honestly, this is time-consuming? That's where our design system shines. We leverage CSS variables to set default styles, making customization a breeze. Here's how you can do it
:root {
--button-rad: 0;
--button-size: 1rem;
--avatar-transform: uppercase;
}
.footer {
--button-rad: 1rem;
}
This means you can easily customize the look across your entire project or just a part of it. Want rounded buttons in your footer? Just tweak --button-rad there, and voila, all buttons in the footer get that rounded love without you having to change each one. And remember, this isn't just about buttons; every component in Pillar-UI has a set of default values you can change once per project. To see these, go to any component documents section, scroll down to the bottom, and you'll find them.
Getting started
Ready to dive in? We've prepared a set of examples to help you get started with Pillar-UI in React, as well as popular frameworks like Next.js and Remix. For more information and to explore these examples, head over to our documentation site.
Pillar-UI: More Than Just a Design System
While Pillar-UI is primarily a design system, it's also a collection of useful packages that can enhance your React development workflow. Here's a brief overview:
Hooks
Pillar-UI includes a set of reusable hooks that can help simplify your code and improve performance. From state management to side effects, our hooks are designed to make your life easier.
Icons
We've curated a collection of high-quality icons that you can use in your Pillar-UI applications. Our icons are carefully crafted to ensure consistency and visual appeal.
Utils
Our utility package includes a range of helpful functions and tools that can aid in tasks such as data formatting, validation, and more. These utilities are designed to save you time and reduce boilerplate code.
By providing these additional packages, we aim to make Pillar-UI a one-stop-shop for your React development needs. Whether you're building a complex enterprise application or a simple web app, Pillar-UI has got you covered.
Roadmap and Future Plans
Pillar-UI isn't just a project; it's a community-driven adventure. We've got exciting plans on the horizon, including:
We're open-source, which means this design system is ours. We hope to work together to improve it. If anyone finds any issues or needs a new feature, please let's discuss it!
Call to Collaboration
I'm inviting you to join us on this exciting journey! Whether you're passionate about fixing bugs, suggesting features, or discussing UI design, your input is invaluable. Let's build something amazing together.
This design system belongs to all of us. We hope to collaborate and improve it together. If you find any issues or need a new feature, let's discuss it!
Join the Pillar Community
Here's how you can get involved:
- GitHub Discussions: Share ideas, ask questions, and get feedback.
- GitHub Issues: Report bugs, suggest features, and track progress.
- Discord Community: Connect with fellow developers, share your wins, and get help when you're stuck.
- Star the Repo: Help others discover Pillar UI and join our community
Remember, this project is about more than just code â it's about building a supportive, inclusive, and fun community. Happy coding!
Top comments (0)