What is NiraUI?

Getting Started with NiraUI: Build Beautiful Interfaces in Minutes

If you’ve ever built a project with Tailwind CSS, you already know how powerful and flexible it is. But let’s be honest writing utility classes for every button, card, or modal from scratch can get repetitive fast.

That’s where NiraUI comes in.

NiraUI is a Tailwind CSS plugin packed with pre-built, responsive, and fully customizable UI components. Instead of starting from zero, you can drop in a NiraUI component, tweak it with Tailwind utilities, and launch your website or app in record time.

In this guide, you’ll learn :

  • ✅ How to install and set up NiraUI
  • ✅ How to use your first component
  • ✅ How to customize components with Tailwind utilities
  • ✅ Why NiraUI is perfect for modern developers

Installation Guide

Before you start, make sure you have:

  • ✅ Node.js installed.
  • ✅ Tailwind CSS project set up.

Step 1: Install NiraUI via NPM

Run this command inside your project folder:

npm i nira-ui

Step 2: Add NiraUI to Your CSS

Import Tailwind CSS and register NiraUI as a 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 NiraUI class names like button, card, and many more right out of the box.

Using NiraUI from a CDN (No Installation Required)

Don’t want to set up Node.js or Tailwind locally? No problem you can load NiraUI directly from a CDN:

This is perfect for quick prototypes, CodePen demos, or lightweight static sites.

Using Your First NiraUI Component

Let’s start with a simple button:

And that’s it — you’ve just used your first NiraUI component.

Customizing NiraUI Components

Because NiraUI is built entirely on Tailwind CSS utilities, you have full creative control over your design.

Want rounded buttons, color tweaks, or a unique layout? Just use Tailwind classes:

Want animations? Add your favorite Tailwind transitions or your own custom CSS animations.

With NiraUI, you get the best of both worlds predesigned components that save time, and full Tailwind flexibility when you need to make them your own.