Introduction

Madhuranjan UI is a modern TailwindCSS component library built for speed, flexibility, and theme adaptability. Whether you're working with HTML, React, or any frontend framework, our fully responsive and accessible components help you launch beautiful websites effortlessly.

Designed for light and dark themes with custom color support (violet & blue), every component is production ready. Every Component or Section is built with pure TailwindCSS no JavaScript frameworks, no dependencies, just clean, copy-paste-ready code that works everywhere.

Every single component, UI block, and section in Madhuranjan UI is and always will be 100% free. No subscriptions, no paywalls, no nonsense. We’re committed to helping developers build faster with beautifully modern and professional UI and we’re just getting started. New components and sections will continue to be added regularly, all at no cost, forever :).

Getting started

Built with pure Tailwind CSS. Just install Tailwind, copy any component, and start building Follow the Offical Tailwind CSS installation guide.

Installation

npm install -D tailwindcss
npx tailwindcss init -p

This installs Tailwind and sets up the basic configuration files. You can customize them to match your project.

Font

We use Inter as the default font throughout the component library for its clean, modern appearance. You can easily include it in your project using the Google Fonts CDN.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">

Once included, update your Tailwind config to use Inter as your default font:

extend: {
  fontFamily: {
    inter: ["Inter", "sans-serif"],
  },
},