# Nira  UI
NiraUI is a CSS library for Tailwind CSS 4
NiraUI  provides class names for common UI components

- [NiraUI docs](https://niraui.onrender.com/)

## NiraUI  install notes
[install guide](https://niraui.onrender.com/docs/installation.html)
1. NiraUI  requires Tailwind CSS 4
2. `tailwind.config.js` file is deprecated in Tailwind CSS v4. do not use `tailwind.config.js`. Tailwind CSS v4 only needs `@import "tailwindcss";` in the CSS file if it's a node dependency.
3. NiraUI  can be installed using `npm i -D nira-ui` and then adding `@plugin "nira-ui/plugin.js";` to the CSS file
4. NiraUI is suggested to be installed as a dependency but if you really want to use it from CDN, you can use Tailwind CSS and NiraUI CDN files:
```html
<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>
```
5. A CSS file with Tailwind CSS and NiraUI looks like this (if it's a node dependency)
```css
@import "tailwindcss";
@plugin "nira-ui/plugin.js";
```

## NiraUI usage 
1. We can give styles to a HTML element by adding NiraUI class names to it. By adding a component class name, part class names (if there's any available for that component), and modifier class names (if there's any available for that component)
2. Components can be customized using Tailwind CSS utility classes if the customization is not possible using the existing NiraUI classes. For example `button px-10` sets a custom horizontal padding to a `button`
3. If customization of NiraUI styles using Tailwind CSS utility classes didn't work because of CSS specificity issues, you can use the `!` at the end of the Tailwind CSS utility class to override the existing styles. For example `button bg-pink-500!` sets a custom background color to a `button` forcefully. This is a last resort solution and should be used sparingly
4. If a specific component or something similar to it doesn't exist in NiraUI, you can create your own component using Tailwind CSS utility
5. when using Tailwind CSS `flex` and `grid` for layout, it should be responsive using Tailwind CSS responsive utility prefixes.
6. Only allowed class names are existing NiraUI class names or Tailwind CSS utility classes.
7. Ideally, you won't need to write any custom CSS. Using NiraUI class names or Tailwind CSS utility classes is preferred.
8. suggested - if you need placeholder images, use https://picsum.photos/200/300 with the size you want
9. suggested - when designing , don't add a custom font unless it's necessary
10. don't add `bg-base-100 text-base-content` to body unless it's necessary
11. For design decisions, use Refactoring UI book best practices

NiraUI  class names are one of the following categories. these type names are only for reference and are not used in the actual code
- `component`: the required component class
- `part`: a child part of a component
- `style`: sets a specific style to component or part
- `color`: sets a specific color to component or part
- `size`: sets a specific size to component or part
- `placement`: sets a specific placement to component or part
- `direction`: sets a specific direction to component or part
- `modifier`: modifies the component or part in a specific way

## NiraUI 5 colors

### NiraUI color names
- `primary`: Primary brand color, The main color of your brand
- `secondary`: Secondary brand color, The optional, secondary color of your brand
- `base-100`:-100 Base surface color of page, used for blank backgrounds
- `base-200`:-200 Base color, darker shade, to create elevations
- `base-300`:-300 Base color, even more darker shade, to create elevations
- `base-content`: Foreground content color to use on base color
- `success`: Success color, For success/safe messages
- `warning`: Warning color, For warning/caution messages
- `error`: Error color, For error/danger/destructive messages

### NiraUI color rules
1. NiraUI adds semantic color names to Tailwind CSS colors
2. NiraUI color names can be used in utility classes, like other Tailwind CSS color names. for example, `bg-primary` will use the primary color for the background
3. NiraUI color names include variables as value so they can change based the theme
4. There's no need to use `dark:` for NiraUI color names
5. Ideally only NiraUI color names should be used for colors so the colors can change automatically based on the theme
6. If a Tailwind CSS color name (like `red-500`) is used, it will be same red color on all themes
7. If a NiraUI color name (like `primary`) is used, it will change color based on the theme
8. Using Tailwind CSS color names for text colors should be avoided because Tailwind CSS color `text-gray-800` on `bg-base-100` would be unreadable on a dark theme - because on dark theme, `bg-base-100` is a dark color
9. `*-content` colors should have a good contrast compared to their associated colors
10. suggestion - when designing a page use `base-*` colors for majority of the page. use `primary` color for important elements

### NiraUI default theme variable reference
```css

/*-- Light --*/
--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-content-100: oklch(30% 0.006 285.885);
--color-base-content-200: oklch(39% 0.006 285.885);
--color-base-content-300: oklch(48% 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);
--color-base-400: oklch(80% 0.00011 271.152);

/*-- Dark --*/
--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-content-100: oklch(91% 0.00011 271.152);
--color-base-content-200: oklch(82% 0.00011 271.152);
--color-base-content-300: oklch(73% 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);
--color-base-400: oklch(35% 0 0);

/* ...rest of themes are similar light and dark but different colors */
```
#### Rules
- All CSS variables above are required
- Colors can be OKLCH or hex or other formats

## NiraUI  components

Form / Input:
- Button → https://niraui.onrender.com/components/button.html  
  Standard clickable button with multiple styles and sizes.

- Button Group → https://niraui.onrender.com/components/button-group.html  
  Groups buttons together for related actions.

- Checkbox → https://niraui.onrender.com/components/checkbox.html  
  Input option allowing multiple selections.

- Forms → https://niraui.onrender.com/components/form.html  
  Pre-styled form layouts for inputs and labels.

- Input → https://niraui.onrender.com/components/input.html  
  Text field for user data entry.

- Input File → https://niraui.onrender.com/components/input-file.html  
  Styled file upload input.

- Range → https://niraui.onrender.com/components/input-range.html  
  Slider control for selecting numeric values.

- Radio → https://niraui.onrender.com/components/radio.html  
  Input option allowing single selection in a group.

- Select → https://niraui.onrender.com/components/select.html  
  Dropdown menu for selecting from options.

- Textarea → https://niraui.onrender.com/components/textarea.html  
  Multi-line text input.


Navigation:
- Breadcrumb → https://niraui.onrender.com/components/breadcrumbs.html  
  Shows hierarchical navigation paths.

- Drawer → https://niraui.onrender.com/components/drawer.html  
  Slide-out panel for menus or content.

- Dropdown → https://niraui.onrender.com/components/dropdown.html  
  Menu triggered by a button or link.

- Footer → https://niraui.onrender.com/components/footer.html  
  Prebuilt site footer layout.

- Link → https://niraui.onrender.com/components/link.html  
  Styled hyperlink variations.

- Navbar → https://niraui.onrender.com/components/navbar.html  
  Top navigation bar with links and actions.

- Sidebar → https://niraui.onrender.com/components/sidebar.html  
  Vertical navigation or content panel.

- Tabs → https://niraui.onrender.com/components/tabs.html  
  Switches between content sections.


Informational / Display:
- Accordion → https://niraui.onrender.com/components/accordion.html  
  Expand/collapse sections, only one open at a time.

- Alert → https://niraui.onrender.com/components/alert.html  
  Notifies users about events or status changes.

- Avatar → https://niraui.onrender.com/components/avatar.html  
  Circular thumbnail for users or brands.

- Badge → https://niraui.onrender.com/components/badge.html  
  Small indicator for status, counts, or labels.

- Card → https://niraui.onrender.com/components/card.html  
  Container for grouping and displaying content.

- Divider → https://niraui.onrender.com/components/divider.html  
  Horizontal/vertical content separator.

- Dot → https://niraui.onrender.com/components/dot.html  
  Tiny status indicator (e.g. online/offline).

- Kbd → https://niraui.onrender.com/components/kbd.html  
  Displays keyboard shortcuts in UI.

- Mockup Browser → https://niraui.onrender.com/components/mockup-browser.html  
  Box styled like a browser window.

- Mockup Code → https://niraui.onrender.com/components/mockup-code.html  
  Box styled like a code editor with syntax.

- Modal → https://niraui.onrender.com/components/modal.html  
  Overlay dialog window triggered by user action.

- Pagination → https://niraui.onrender.com/components/pagination.html  
  Page navigation controls.

- Progress → https://niraui.onrender.com/components/progress.html  
  Bar showing task or time completion.

- Skeleton → https://niraui.onrender.com/components/skeleton.html  
  Placeholder loading state for content.

- Spinner → https://niraui.onrender.com/components/spinner.html  
  Animated loading indicator.

- Steps → https://niraui.onrender.com/components/steps.html  
  Shows a process broken into steps.

- Table → https://niraui.onrender.com/components/table.html  
  Tabular data layout.

- Toggle → https://niraui.onrender.com/components/toggle.html  
  Switch-style on/off input.

- Tooltip → https://niraui.onrender.com/components/tooltip.html  
  Small popup message on hover or focus.

[NiraUI Componenets](https://niraui.onrender.com/components/index.html)