This content originally appeared on DEV Community and was authored by Akshay Yadav
🎨 What is Rangoli?
Rangoli is a modern React UI library built on top of shadcn/ui.
It brings you ready-to-use components that combine the beauty of shadcn with real-world functionality.
Try out - Rangoli UI(leave a ⭐ star please)
🧠 Why I Built It?
While working on multiple React projects, I kept rebuilding the same interactive and layout components again and again.
For example:
- A password input with toggle visibility 🔒👁️
- A pricing card with plan features and CTA buttons 💳
- A testimonial card to display client feedback 💬
- A pricing section with monthly/yearly toggle 💰
- A password reset form with validation and success states 🔒
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.
💡 Example: Pricing Card Component
<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"
/>
🤝 Contribute to Rangoli
Rangoli is open-source and growing fast!
If you love building elegant UI components, and star us ⭐
Contribute to rangoli docs
Contribute to rangoli live components
Contribute to rangoli landing page
This content originally appeared on DEV Community and was authored by Akshay Yadav
Akshay Yadav | Sciencx (2025-10-30T18:49:59+00:00) I Built my own UI Library on Top of shadcn/ui. Retrieved from https://www.scien.cx/2025/10/30/i-built-my-own-ui-library-on-top-of-shadcn-ui/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.