Customize NiraUI components

How to customize NiraUI?

NiraUI is powered by Tailwind CSS which means every component is flexible, extendable, and easy to restyle.

You can customize components using Tailwind utilities, custom CSS, or the @apply directive, depending on how global or specific your design needs are.

How to Customize NiraUI

  • NiraUI ships with multiple component variants like primary, secondary, outline, and success. These variants help you maintain a consistent design system without writing new styles from scratch.

    • For example, the default NiraUI button:

    Switch to another style instantly with a built-in variant:

    Your code stays clean, readable, and theme-ready perfect for scalable UIs.

    Extend Components with Tailwind Utilities Classes

  • Since NiraUI is built directly on Tailwind, you can still use any Tailwind utility classes for fine-grained control: 
    •

    This gives you the flexibility of Tailwind with the simplicity of NiraUI’s component names.

    Global Customization with Tailwind’s @apply Directive

    Want to apply consistent styles across your entire app?

  • Use Tailwind’s @apply directive to redefine NiraUI components globally. 
    • 
@layer components { .customButton { @apply rounded-full bg-gradient-to-r from-orange-500 to-red-600 px-4 py-2 leading-[1.5em] inline-flex justify-center text-center items-center gap-2 text-base  shadow-xs select-none text-base-content duration-150 will-change-transform ease-in cursor-pointer disabled:opacity-50 disabled:pointer-events-none disabled:select-none active:scale-[0.98]; } }

    Now, every .customButton in your project will automatically follow your new global style no extra markup needed.

    NiraUI was built to help you move fast without losing design control. Use Tailwind’s flexibility to make every component uniquely yours, while keeping your code clean and consistent.