<p>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!</p>
<h2>Performance Deep Dive</h2>
<p>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!</p>
<p>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.</p>
<p>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!</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<h2>Accessibility Focus</h2>
<p>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:</p>
<ul>
<li>Follow WCAG guidelines out of the box.</li>
<li>Support RTL languages.</li>
<li>Support Windows High Contrast Mode.</li>
<li>We Do our best to make the color contrast ratios of our components accessible.</li>
<li>Use Reduce Motion to avoid janky animations for users with motion sensitivity issues.</li>
<li>Support font size adjustment in zoom mode.</li>
<li>Use Semantic Markup when possible to make the library accessible and lightweight.</li>
<li>Make it Color-blind Friendly Design</li>
</ul>
<h2>Developer Experience (DX) and Getting Started</h2>
<p>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.</p>
<p>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</p>
<pre><code class="language-css"><span class="hljs-selector-pseudo">:root</span> {
  <span class="hljs-attr">--button-rad</span>: <span class="hljs-number">0</span>;
  <span class="hljs-attr">--button-size</span>: <span class="hljs-number">1rem</span>;
  <span class="hljs-attr">--avatar-transform</span>: uppercase;
}

<span class="hljs-selector-class">.footer</span> {
  <span class="hljs-attr">--button-rad</span>: <span class="hljs-number">1rem</span>;
}
</code></pre>
<p>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.</p>
<h3>Getting started</h3>
<p>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. <a href="https://www.pillar-ui.com/docs/getting-started/next" target="_blank" rel="noopener nofollow">For more information and to explore these examples, head over to our documentation site</a>.</p>
<h2>Pillar-UI: More Than Just a Design System</h2>
<p>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:</p>
<h3>Hooks</h3>
<p>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.</p>
<h3>Icons</h3>
<p>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.</p>
<h3>Utils</h3>
<p>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.</p>
<p>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.</p>
<h2>Roadmap and Future Plans</h2>
<p>Pillar-UI isn’t just a project; it’s a community-driven adventure. We’ve got exciting plans on the horizon, including:</p>
<p>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!</p>
<h2>Call to Collaboration</h2>
<p>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.</p>
<p>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!</p>
<h3>Join the Pillar Community</h3>
<p>Here’s how you can get involved:</p>
<ul>
<li><a href="https://github.com/HamzaAmar/pillar-ui/discussions" target="_blank" rel="noopener nofollow">GitHub Discussions</a>: Share ideas, ask questions, and get feedback.</li>
<li><a href="https://github.com/HamzaAmar/pillar-ui/issues" target="_blank" rel="noopener nofollow">GitHub Issues</a>: Report bugs, suggest features, and track progress.</li>
<li><a href="https://discord.gg/KawwtFJG" target="_blank" rel="noopener nofollow">Discord Community</a>: Connect with fellow developers, share your wins, and get help when you’re stuck.</li>
<li><a href="https://github.com/HamzaAmar/pillar-ui" target="_blank" rel="noopener nofollow">Star the Repo</a>: Help others discover Pillar UI and join our community</li>
</ul>
<p>Remember, this project is about more than just code – it’s about building a supportive, inclusive, and fun community. Happy coding!</p>

The official daily.dev web development community. Led by thought leaders and webdev experts. Join the Squad!

WebDev

Pillar-UI is a new design system for React apps, focused on performance, accessibility, and developer experience. Built from the ground up, it is significantly smaller and faster than many existing alternatives by leveraging CSS and minimizing JavaScript dependencies. Key features include adherence to WCAG guidelines, RTL support, high contrast mode, and customizable default styles using CSS variables. It also offers reusable hooks, icons, and utility functions to simplify development. The project is open-source and community-driven, inviting collaboration and contribution from developers.

Introducing Pillar-UI: A New React Design System

<p>Libraries maintained by a single developer usually don’t survive long. When I choose a library, bundle size is not my priority. I ask myself: Will this be abandoned in five years ?</p>


<p>Meh.
The genius of MUI is it is comprised of building blocks upon building blocks, all exported for you to use. bundle-size is not so important if things are well tree-shaken and pre-loaded and nowadays people have pretty fast internet connect (~5MB/s download speed has been standard for years).</p>
<p>But for me the most important is the abundant of basic building blocks which allow me to create new components that better fit me but still look and feel like MUI, so the whole app is not a mess of randomly installed components.</p>
<p>For example, just the other day I had to add a very customized date-picker and MUI did not have what I need so I built it using MUI building blocks, and it looks just like any other MUI component.</p>
<p>That is real power of a UI framework, and not a bunch of basic components to use as they are given to you and that’s it.
That might be OK for basic websites but not for us who build complex SaaS apps.</p>


<p><img src="https://media.daily.dev/image/upload/s--wuYfPVkf--/f_auto/v1738018571/ugc/content_6b8c33f6-80e1-4f10-961a-eed7dd4d9d75" alt="image"></p>
<p>These call-to-action buttons don’t work</p>


<p>I’m impressed with that, not because this library is better than others, but the way you built it just by your-self and you share it for everyone. I think even your library be famous or not, it actually show for the world about your skill. Good jobs and good luck.</p>


<p>Good work <a href="https://app.daily.dev/hamzamiloudamar" data-mention-id="jU1Hpq5uksNwGjHEzHDRE" data-mention-username="hamzamiloudamar">@hamzamiloudamar</a> ! Library looks neat and robust.</p>
<p>Would love to learn more on how you have implemented state machine like structure architecture ? Are you referring to usage of CSS variables or something else?</p>
