The latest articles on Forem by Akshay Yadav (@akshaywritescode). https://forem.com/akshaywritescode https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3590006%2Fbb79141e-4bdf-487b-bc51-bdd1f0e8944d.jpeg https://forem.com/akshaywritescode en Akshay Yadav Thu, 30 Oct 2025 18:49:59 +0000 https://forem.com/akshaywritescode/i-built-my-own-ui-library-on-top-of-shadcnui-2d05 https://forem.com/akshaywritescode/i-built-my-own-ui-library-on-top-of-shadcnui-2d05 <h1> 🎨 What is Rangoli? </h1> <p>Rangoli is a modern React UI library built on top of shadcn/ui.<br> It brings you ready-to-use components that combine the beauty of shadcn with real-world functionality.</p> <p><a href="https://www.rangoliui.me" rel="noopener noreferrer">Try out - Rangoli UI(leave a ⭐ star please)</a></p> <h1> 🧠 Why I Built It? </h1> <p>While working on multiple React projects, I kept rebuilding the same interactive and layout components again and again.</p> <p>For example:</p> <ul> <li>A password input with toggle visibility 🔒👁️</li> <li>A pricing card with plan features and CTA buttons 💳</li> <li>A testimonial card to display client feedback 💬</li> <li>A pricing section with monthly/yearly toggle 💰</li> <li>A password reset form with validation and success states 🔒</li> </ul> <p>Instead of re-creating these repeatedly, I decided to build a collection of polished, reusable versions, open source, easy to use, and fully themeable, That’s how Rangoli started.</p> <h1> 💡 Example: Pricing Card Component </h1> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>&lt;PricingCard planTitle="Basic" planDescription="Create interactive forms that connect to your workflow" price={["24", "242"]} isMonthly={true} /*can change dynamically */ features={[ "100 responses/mo included", "1 user", "Unlimited forms", "Unlimited questions", ]} seeAllFeatureLink="/basic-features" /&gt; </code></pre> </div> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fgbccv4a1whp4jt9bvfmx.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fgbccv4a1whp4jt9bvfmx.png" alt=" " width="637" height="735"></a></p> <h1> 🤝 Contribute to Rangoli </h1> <p>Rangoli is open-source and growing fast!<br> If you love building elegant UI components, and star us ⭐</p> <p><a href="https://github.com/akshaywritescode/rangoli-docs" rel="noopener noreferrer">Contribute to rangoli docs</a><br> <a href="https://github.com/akshaywritescode/rangoli-live-components" rel="noopener noreferrer">Contribute to rangoli live components</a><br> <a href="https://github.com/akshaywritescode/rangoli-landing-page" rel="noopener noreferrer">Contribute to rangoli landing page</a></p> webdev javascript beginners opensource