Build Modern, Responsive Websites Faster with Nira UI
Nira UI is a Tailwind CSS plugin that helps you design responsive websites quickly. Get access to prebuilt Tailwind CSS components, 10+ Tailwind themes, and fully customizable UI elements no JavaScript required.
What is Nira UI ?
Nira UI is a Tailwind CSS component library that gives developers clean, meaningful class names for common UI patterns.
Instead of writing long Tailwind utility classes, you can use simple, intuitive classes like button, card, or alert.
Why Developers ❤️ Nira UI?
Prebuilt, reusable, and fully customizable Tailwind components that speed up development.
Fast Setup
Install Nira UI once and start building. You don’t need to configure extra files or import JavaScript bundles.
Customizable
Powered by Tailwind CSS utilities , Nira UI lets you modify everything colors, spacing, typography, and layouts.
Take Tailwind CSS to the Next Level
Nira UI simplifies development with intuitive class names for common UI components.
Instead of long HTML utility chains, you can just use:
button,
card,
progress
and many more.
Button
Card
Nira Card
A simple card built with Nira UI.
Progress
10+ Beautiful Themes
Switch instantly between Light, Dark, Retro, Sunset, Midnight, Lofi and more or create your own theme.
🌞 Light
Nira UI is amazing
All of our components
🌚 Dark
Nira UI is amazing
All of our components
🎵 Lofi
Nira UI is amazing
All of our components
🎮 Retro
Nira UI is amazing
All of our components
🌅 Sunset
Nira UI is amazing
All of our components
🌌 Midnight
Nira UI is amazing
All of our components
Highly Customizable
Powered by Tailwind CSS utility classes, Nira UI gives you full control. Change colors, spacing, typography, or entire layouts with just a few class tweaks.
Button Component
No More Ugly HTML
Write fewer class names. Use component class names and modify them with Tailwind CSS utilities.
❌ Just TailwindCSS
✅ After TailwindCSS + Nira UI
Pure CSS. Works everywhere.
Nira UI is framework-agnostic, meaning it works seamlessly in:
Install Nira UI
Install Nira UI in Your Tailwind Projectnpm i nira-ui@import "tailwindcss";
@plugin "nira-ui/plugin.js";No framework left behind
Works with all popular frameworks and build tools plug it in and go:
Nira UI Components
Nira UI includes a growing set of essential Tailwind CSS UI components, all built with accessibility and flexibility in mind.
Accordion
Accordion is used for showing and hiding content but only one item can stay open at a time.
Alert
Alert informs users about important events.
Avatar
Avatars are used to show a thumbnail representation of an individual or business in the interface.
Badge
Badges are used to inform the user of the status of specific data.
Breadcrumbs
Breadcrumbs helps users to navigate through the website.
Button
Buttons allow the user to take actions or make choices.
Button Group
Button Group component is used to trigger actions.
Card
Cards are used to group and display content in a way that is easily readable.
Checkbox
Checkboxes are used to select or deselect a value.
Divider
Divider will be used to separate content vertically or horizontally.
Dot
Dot is a really small icon to visually show the current status of an element, like online, offline, error, etc.
Drawer
Drawer is a grid layout that can show/hide a sidebar on the left or right side of the page.
Install Nira UI in 3 Steps
Add Nira UI to your Tailwind project in just a few simple steps.
1. Install the package
npm i nira-ui2. Import Tailwind & Nira UI in global.css
@import "tailwindcss";
@plugin "nira-ui/plugin.js";3. Start using components
Support Nira UI ❤️
Support open-source development and help us build amazing tools for the community. Your sponsorship directly funds development, maintenance, and innovation.
❤️ Become a sponsor