I Built my own UI Library on Top of shadcn/ui

#webdev #javascript #opensource #beginners

🎨 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"
/>