@pands/ui 0.1.0 → 0.1.1
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 +70 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
# @pands/ui
|
|
2
|
+
|
|
3
|
+
> Accessible React component library with Tailwind CSS v4 for the **Pand Application Platform**.
|
|
4
|
+
|
|
5
|
+
[](https://www.npmjs.com/package/@pands/ui)
|
|
6
|
+
[](https://opensource.org/licenses/MIT)
|
|
7
|
+
|
|
8
|
+
`@pands/ui` provides a unified set of modern, accessible UI components styled with Tailwind CSS v4, including forms, data tables, dialogs, cards, navigation bars, and application shells.
|
|
9
|
+
|
|
10
|
+
---
|
|
11
|
+
|
|
12
|
+
## Installation
|
|
13
|
+
|
|
14
|
+
```bash
|
|
15
|
+
pnpm add @pands/ui
|
|
16
|
+
# or with npm:
|
|
17
|
+
npm install @pands/ui
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
---
|
|
21
|
+
|
|
22
|
+
## Setup with Tailwind CSS v4
|
|
23
|
+
|
|
24
|
+
In your application's `styles.css`:
|
|
25
|
+
|
|
26
|
+
```css
|
|
27
|
+
@import "tailwindcss";
|
|
28
|
+
@source "../node_modules/@pands/ui";
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
And import styles in your entry point:
|
|
32
|
+
```typescript
|
|
33
|
+
import "@pands/ui/styles.css";
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
---
|
|
37
|
+
|
|
38
|
+
## Usage
|
|
39
|
+
|
|
40
|
+
```tsx
|
|
41
|
+
import {
|
|
42
|
+
Button,
|
|
43
|
+
Input,
|
|
44
|
+
Card,
|
|
45
|
+
Badge,
|
|
46
|
+
DataTable,
|
|
47
|
+
Dialog,
|
|
48
|
+
AppShell
|
|
49
|
+
} from "@pands/ui";
|
|
50
|
+
|
|
51
|
+
export function Dashboard() {
|
|
52
|
+
return (
|
|
53
|
+
<Card className="p-6 space-y-4">
|
|
54
|
+
<div className="flex items-center justify-between">
|
|
55
|
+
<h2 className="text-xl font-semibold">Active Invoices</h2>
|
|
56
|
+
<Badge variant="success">Live</Badge>
|
|
57
|
+
</div>
|
|
58
|
+
|
|
59
|
+
<Input placeholder="Filter by invoice ID..." />
|
|
60
|
+
<Button variant="primary">Create Invoice</Button>
|
|
61
|
+
</Card>
|
|
62
|
+
);
|
|
63
|
+
}
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
---
|
|
67
|
+
|
|
68
|
+
## License
|
|
69
|
+
|
|
70
|
+
MIT © [Mehdi Nosrati](https://github.com/MehdiNosrati)
|