DOCSEARCHbyAlgolia
Submit Docs

Nira UI

website·Indexed 29 days ago

https://niraui.onrender.com

A CSS library for Tailwind CSS 4 that provides class names for common UI components.

Tokens
944
Snippets
3
Records
6
Agent score
0%

What's inside Nira UI

  1. Apply and customize NiraUI component styles

    NiraUI styles are applied by adding component class names, part class names, and modifier class names to HTML elements.

    Customization guidelines:

    1. Tailwind Utilities: Use standard Tailwind CSS utility classes for customizations (e.g., button px-10).
    2. Force Overrides: If CSS specificity prevents a utility class from working, append ! to the end of the Tailwind class (e.g., button bg-pink-500!). This is a last-resort solution.
    3. Custom Components: If a required component does not exist in NiraUI, build it using Tailwind CSS utilities.
    4. Layouts: Use Tailwind's responsive utility prefixes when using flex and grid for layouts.

  2. Install NiraUI with Tailwind CSS 4

    NiraUI requires Tailwind CSS 4. In Tailwind CSS v4, the tailwind.config.js file is deprecated and should not be used. Instead, use the @import and @plugin directives directly in your CSS file.
    npm i -D nira-ui
    @import "tailwindcss";
@plugin "nira-ui/plugin.js";

  3. Use NiraUI via CDN

    If you prefer not to use a node dependency, NiraUI can be loaded via CDN alongside the Tailwind CSS browser script.
    <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>

  4. Manage themeable colors in NiraUI

    NiraUI introduces semantic color names that map to CSS variables, allowing colors to change automatically based on the active theme without needing the dark: prefix.

    Color Palette:

    • primary: Main brand color.
    • secondary: Optional secondary brand color.
    • base-100: Main surface color for blank backgrounds.
    • base-200: Darker shade for elevation.
    • base-300: Even darker shade for elevation.
    • base-content: Foreground color for use on base colors.
    • success: Safe/success messages.
    • warning: Caution/warning messages.
    • error: Danger/destructive messages.

    Usage Rules:

    • Use NiraUI semantic colors (e.g., bg-primary) instead of static Tailwind colors (e.g., bg-red-500) to ensure theme compatibility.
    • Avoid using static Tailwind text colors (like text-gray-800) on base backgrounds, as they may become unreadable in dark themes.
    • Use base-* colors for the majority of the page and primary for important elements.

  5. Configure NiraUI default theme variables

    NiraUI uses CSS variables for its theme system. These variables must be defined and can use Hex or OKLCH formats.
    /*-- Light Theme Example --*/
--color-primary: #2fc6f8;
--color-secondary: #a835fa;
--color-success: #02ce57;
--color-danger: #f51d2f;
--color-warning: #fabf2b;
--color-base-content: oklch(21% 0.006 285.885);
--color-base-100: oklch(100% 0.00011 271.152);
--color-base-200: oklch(95% 0.00011 271.152);
--color-base-300: oklch(83% 0.00011 271.152);

/*-- Dark Theme Example --*/
--color-primary: #00bcff;
--color-secondary: #9810fa;
--color-success: #00a63e;
--color-danger: #e7000b;
--color-warning: #f0b100;
--color-base-content: oklch(100% 0.00011 271.152);
--color-base-100: oklch(15% 0 0);
--color-base-200: oklch(23% 0 0);
--color-base-300: oklch(29% 0 0);

  6. Available Nira UI components

    Nira UI provides a set of pre-styled components for Tailwind CSS 4. Available components include:

    • Kbd: Displays keyboard shortcuts.
    • Mockup Browser: A container styled as a browser window.
    • Mockup Code: A container styled as a code editor with syntax highlighting.
    • Modal: An overlay dialog window.
    • Pagination: Controls for navigating between pages.
    • Progress: A progress bar for task or time completion.
    • Skeleton: Placeholder loading states for content.
    • Spinner: An animated loading indicator.
    • Steps: A visual representation of a multi-step process.
    • Table: Layout for tabular data.
    • Toggle: A switch-style on/off input.
    • Tooltip: A small popup message appearing on hover or focus.