What is Nira UI?

Getting Started with Nira UI: 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 writing utility classes for every button, card, or modal from scratch can become repetitive and slow.

That’s where Nira UI comes in.

Nira UI is a Tailwind CSS plugin that provides a growing library of pre-built, responsive, and customizable UI components. Instead of reinventing the wheel, you can drop in a Nira UI component Nira UI component, style it with Tailwind utilities, and ship your website or app faster.

In this guide, you’ll learn :

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

Installation Guide

Before installing Nira UI, make sure you have:

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

Step 1: Install Nira UI via NPM

Run this command in your project directory:

npm i nira-ui

Step 2: Add Nira UI to Your app.css

Import Tailwind CSS and add Nira UI as a plugin inside 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.

Nira UI CDN (No Installation)

Don’t want to install Node.js or set up Tailwind locally? You can load Nira UI directly from a CDN:

Perfect for quick prototypes or simple static sites.

Using Your First Nira UI Component

Let’s start with a Button:

Customizing Nira UI Components

Nira UI components are built with Tailwind CSS utilities under the hood. This means you can customize everything to match your brand.

Want animations? Just add Tailwind classes or your own CSS animations.