Customize Nira UI components

How to customize Nira UI?

Nira UI is built on Tailwind CSS, which means every component is flexible and easy to customize. You can extend designs using Tailwind utilities, custom CSS, or the @apply directive

How to Customize Nira UI

  • Nira UI ships with multiple component variants (like primary, secondary, outline, and success). These variants make it simple to build a consistent design system without writing new styles from scratch.

    • For example, the default Nira UI button:

    You can instantly switch styles using built-in variants:

    This keeps your code clean, readable, and theme-ready — perfect for scalable UI design.

    Extend Components with Tailwind Utilities Classes

  • Since Nira UI works seamlessly with Tailwind CSS utilities, you can customize components just like you would in any Tailwind project. 
    •

    This gives you the flexibility of fine-grained control while keeping the simplicity of component class names.

    Global Customization with Tailwind @apply directive

  • To apply consistent changes across your entire project, use Tailwind’s @apply directive.This is useful when you want all components of a type (like buttons or cards) to share a global style. 
    • 
@layer components { .button { @apply rounded-full bg-gradient-to-r from-orange-500 to-red-600; } }

    Now, every .button in your project will follow your global design rules automatically.