bianira-ui 1.27.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +123 -0
- package/dist/nira.css +9572 -0
- package/img/nira-ui-logo-transparent.ico +0 -0
- package/img/svgviewer-output.svg +7 -0
- package/index.html +179 -0
- package/package.json +29 -0
- package/plugin.js +454 -0
- package/static/Geist-VariableFont_wght.ttf +0 -0
package/README.md
ADDED
|
@@ -0,0 +1,123 @@
|
|
|
1
|
+
|
|
2
|
+
|
|
3
|
+
<div align="center">
|
|
4
|
+
|
|
5
|
+
<img src="https://niraui.onrender.com/img/nira-ui-logo-transparent.ico" width="80" height="80" loading="lazy" alt="Nira UI logo">
|
|
6
|
+
|
|
7
|
+
π π **Nira UI** provides reusable Tailwind CSS UI components and themes so you can design and ship websites faster.
|
|
8
|
+
|
|
9
|
+
[](https://www.npmjs.com/package/nira-ui)
|
|
10
|
+
[](LICENSE)
|
|
11
|
+
[](https://tailwindcss.com)
|
|
12
|
+
[](CONTRIBUTING.md)
|
|
13
|
+
|
|
14
|
+
</div>
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
## π Table of Contents
|
|
19
|
+
- [Introduction](#-introduction)
|
|
20
|
+
- [Installation](#-installation)
|
|
21
|
+
- [Via NPM](#installing-via-npm)
|
|
22
|
+
- [Via CDN](#installing-via-cdn)
|
|
23
|
+
- [Usage](#-usage)
|
|
24
|
+
- [Quick Start Example Project](#-quick-start-example-project)
|
|
25
|
+
- [Features](#-features)
|
|
26
|
+
- [Documentation](#-documentation)
|
|
27
|
+
- [License](#-license)
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
|
|
31
|
+
## π Introduction
|
|
32
|
+
|
|
33
|
+
**Nira UI** is a component library built with **Tailwind CSS v4**. It offers ready-to-use UI elements, utilities, and themes that speed up the process of building modern, responsive, and accessible websites.
|
|
34
|
+
|
|
35
|
+
You can install it through **NPM** or load it directly from a **CDN**.
|
|
36
|
+
|
|
37
|
+
|
|
38
|
+
## π¦ Installation
|
|
39
|
+
|
|
40
|
+
### Installing via NPM
|
|
41
|
+
|
|
42
|
+
Make sure you have [Node.js](https://nodejs.org) and [Tailwind CSS](https://tailwindcss.com) set up in your project.
|
|
43
|
+
|
|
44
|
+
1. Install Nira UI:
|
|
45
|
+
```bash
|
|
46
|
+
npm i nira-ui
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
2. Add the Nira-UI plugin to your CSS file:
|
|
50
|
+
```css
|
|
51
|
+
@import "tailwindcss";
|
|
52
|
+
@plugin "nira-ui/plugin.js";
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
### Installing via CDN
|
|
56
|
+
|
|
57
|
+
If you donβt want to set up Node.js or Tailwind locally, you can include Nira UI directly from a CDN:
|
|
58
|
+
|
|
59
|
+
```html
|
|
60
|
+
<link href="https://cdn.jsdelivr.net/gh/thaboyaluya/nira-ui@master/dist/nira.css" rel="stylesheet" type="text/css" />
|
|
61
|
+
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
Browse the [components gallery](https://niraui.onrender.com/components/index.html), copy the code you need, and paste it into your project.
|
|
65
|
+
|
|
66
|
+
|
|
67
|
+
|
|
68
|
+
## β‘ Usage
|
|
69
|
+
|
|
70
|
+
Once installed, you can start using [Nira UI components](https://niraui.onrender.com/components/index.html) immediately by including them in your HTML or JSX files. Example usage:
|
|
71
|
+
|
|
72
|
+
```html
|
|
73
|
+
<button class="button button-primary">Click Me</button>
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
For full examples and customization options, check the [documentation](https://niraui.onrender.com/docs/customize.html).
|
|
77
|
+
|
|
78
|
+
|
|
79
|
+
## π Quick Start Example Project
|
|
80
|
+
|
|
81
|
+
Hereβs a minimal HTML project you can use to test Nira UI quickly (via CDN):
|
|
82
|
+
|
|
83
|
+
```html
|
|
84
|
+
<!DOCTYPE html>
|
|
85
|
+
<html lang="en">
|
|
86
|
+
<head>
|
|
87
|
+
<meta charset="UTF-8" />
|
|
88
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
89
|
+
<title>Nira UI Quick Start</title>
|
|
90
|
+
<link href="https://cdn.jsdelivr.net/gh/thaboyaluya/nira-ui@master/dist/nira.css" rel="stylesheet" type="text/css" />
|
|
91
|
+
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
|
|
92
|
+
</head>
|
|
93
|
+
<body class="p-6 flex flex-col items-center gap-4">
|
|
94
|
+
<h1 class="text-3xl font-bold text-blue-600">π Hello from Nira UI!</h1>
|
|
95
|
+
<button class="button button-primary">Click Me</button>
|
|
96
|
+
<button class="button button-secondary">Secondary Button</button>
|
|
97
|
+
<div class="card w-80 p-4">
|
|
98
|
+
<h2 class="text-xl font-semibold">Card Example</h2>
|
|
99
|
+
<p class="text-gray-600">This is a reusable Nira UI card component.</p>
|
|
100
|
+
</div>
|
|
101
|
+
</body>
|
|
102
|
+
</html>
|
|
103
|
+
```
|
|
104
|
+
|
|
105
|
+
Simply save this as `index.html` and open it in your browser to see Nira UI in action. π
|
|
106
|
+
|
|
107
|
+
## β¨ Features
|
|
108
|
+
- Prebuilt, customizable Tailwind CSS components
|
|
109
|
+
- Install via **NPM** or load via **CDN**
|
|
110
|
+
- Simple plugin integration with Tailwind CSS v4
|
|
111
|
+
- Copy-paste ready components for rapid prototyping
|
|
112
|
+
|
|
113
|
+
|
|
114
|
+
|
|
115
|
+
## π Documentation
|
|
116
|
+
|
|
117
|
+
Full documentation, component previews, and examples are available here:
|
|
118
|
+
π [Nira UI Docs](https://niraui.onrender.com/index.html)
|
|
119
|
+
|
|
120
|
+
|
|
121
|
+
## π License
|
|
122
|
+
|
|
123
|
+
This project is licensed under the [MIT License](https://github.com/thaboyaluya/niraui/blob/master/LICENSE).
|