🎉 🚀 NiraUI provides reusable Tailwind CSS UI components and themes so you can design and ship websites faster.
NiraUI is a component library built with Tailwind CSS v4. It offers ready-to-use UI elements, utilities, and themes that speed up the process of building modern, responsive, and accessible websites.
You can install it through NPM or load it directly from a CDN.
Make sure you have Node.js and Tailwind CSS set up in your project.
-
Install NiraUI:
npm i nira-ui
-
Add the Nira-UI plugin to your CSS file:
@import "tailwindcss"; @plugin "nira-ui/plugin.js";
If you don’t want to set up Node.js or Tailwind locally, you can include NiraUI directly from a CDN:
<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>Browse the components gallery, copy the code you need, and paste it into your project.
Once installed, you can start using NiraUI components immediately by including them in your HTML or JSX files. Example usage:
<button class="button button-primary">Click Me</button>For full examples and customization options, check the documentation.
Here’s a minimal HTML project you can use to test NiraUI quickly (via CDN):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>NiraUI Quick Start</title>
<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>
</head>
<body class="p-6 flex flex-col items-center gap-4">
<h1 class="text-3xl font-bold text-blue-600">🚀 Hello from NiraUI!</h1>
<button class="button button-primary">Click Me</button>
<button class="button button-secondary">Secondary Button</button>
<div class="card w-80 p-4">
<h2 class="text-xl font-semibold">Card Example</h2>
<p class="text-gray-600">This is a reusable NiraUI card component.</p>
</div>
<script type="text/javascript" defer data-plerdy_code='1'>
var _protocol="https:"==document.location.protocol?"https://":"http://";
_site_hash_code = "67a0aec847ab7f84aa1f5f2eb8b5595b",_suid=68950, plerdyScript=document.createElement("script");
plerdyScript.setAttribute("defer",""),plerdyScript.dataset.plerdymainscript="plerdymainscript",
plerdyScript.src="https://a.plerdy.com/public/js/click/main.js?v="+Math.random();
var plerdymainscript=document.querySelector("[data-plerdymainscript='plerdymainscript']");
plerdymainscript&&plerdymainscript.parentNode.removeChild(plerdymainscript);
try{document.head.appendChild(plerdyScript)}catch(t){console.log(t,"unable add script tag")}
</script></body>
</html>Simply save this as index.html and open it in your browser to see NiraUI in action. 🎉
- Prebuilt, customizable Tailwind CSS components
- Install via NPM or load via CDN
- Simple plugin integration with Tailwind CSS v4
- Copy-paste ready components for rapid prototyping
Full documentation, component previews, and examples are available here:
👉 NiraUI Docs
This project is licensed under the MIT License.