🚀 Nira UI Installation Guide

Nira UI is a lightweight Tailwind CSS plugin that gives you access to prebuilt, customizable UI components including buttons, cards, alerts, and more all without requiring extra JavaScript.

Whether you’re working in a modern framework or a plain HTML file, installing Nira UI is quick and effortless.

Method 1: Install Nira UI via NPM (Recommended)

This is the recommended method for most projects using Tailwind CSS with build tools like Vite, Next.js, or React.

Before installing, make sure you have: Node.js (v16 or higher) and Tailwind CSS installed.

Step 1: Install Nira UI via NPM

Run the following command in your project directory:

npm i nira-ui

Add Nira UI as a Tailwind Plugin

Import Tailwind and enable the Nira UI plugin in your main CSS file(app.css, main.css, or similar):

@import "tailwindcss";
@plugin "nira-ui/plugin.js";

That’s it 🎉 you can now use Nira UI class names like button card, and more in your project.

Example:

Method 2: Use Nira UI from a CDN (No Installation)

If you’re not using Node.js or just want to test Nira UI quickly, you can load it directly from a CDN in any HTML file.

Add the following inside your head tag:


<link href="https://cdn.jsdelivr.net/gh/thaboyaluya/nira-ui@master/dist/nira.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

Now you can instantly use Nira UI classes in your HTML no setup required!

Next Steps

🎨 Explore the Component Library — start building beautiful UIs faster

🌗 Try Different Themes — customize your project’s look and feel