@matheusrizzati/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 +166 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,166 @@
|
|
|
1
|
+
# @matheusrizzati/ui
|
|
2
|
+
|
|
3
|
+
A lightweight, premium dark-themed React UI library for modern SaaS dashboards. Built with React, Tailwind CSS, and Radix UI.
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
## Features
|
|
9
|
+
|
|
10
|
+
- 🌑 **Premium Dark Theme**: Designed for modern, dark-mode first applications.
|
|
11
|
+
- 🎨 **Tailwind CSS**: Built on top of Tailwind for easy customization.
|
|
12
|
+
- 🧩 **Radix UI Primitives**: Accessible and robust interactive components.
|
|
13
|
+
- ⚡ **Lightweight**: Tree-shakable ESM and CJS builds.
|
|
14
|
+
- ⌨️ **Typed**: Written in TypeScript with full type definitions.
|
|
15
|
+
|
|
16
|
+
## Installation
|
|
17
|
+
|
|
18
|
+
```bash
|
|
19
|
+
npm install @matheusrizzati/ui
|
|
20
|
+
# or
|
|
21
|
+
yarn add @matheusrizzati/ui
|
|
22
|
+
# or
|
|
23
|
+
pnpm add @matheusrizzati/ui
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
## Setup
|
|
27
|
+
|
|
28
|
+
### 1. Configure Tailwind CSS
|
|
29
|
+
|
|
30
|
+
Add the library's content path and tokens to your `tailwind.config.ts` (or `.js`):
|
|
31
|
+
|
|
32
|
+
```ts
|
|
33
|
+
// tailwind.config.ts
|
|
34
|
+
import type { Config } from "tailwindcss";
|
|
35
|
+
|
|
36
|
+
const config: Config = {
|
|
37
|
+
content: [
|
|
38
|
+
"./src/**/*.{js,ts,jsx,tsx}",
|
|
39
|
+
// Add this line to include the library's components
|
|
40
|
+
"./node_modules/@matheusrizzati/ui/dist/**/*.{js,ts,jsx,tsx}",
|
|
41
|
+
],
|
|
42
|
+
theme: {
|
|
43
|
+
extend: {},
|
|
44
|
+
},
|
|
45
|
+
plugins: [],
|
|
46
|
+
};
|
|
47
|
+
|
|
48
|
+
export default config;
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
### 2. Import Styles
|
|
52
|
+
|
|
53
|
+
Import the CSS tokens in your global CSS file (e.g., `src/index.css` or `src/globals.css`):
|
|
54
|
+
|
|
55
|
+
```css
|
|
56
|
+
@import "@matheusrizzati/ui/tokens.css";
|
|
57
|
+
|
|
58
|
+
@tailwind base;
|
|
59
|
+
@tailwind components;
|
|
60
|
+
@tailwind utilities;
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
## Usage
|
|
64
|
+
|
|
65
|
+
### Button
|
|
66
|
+
|
|
67
|
+
```tsx
|
|
68
|
+
import { Button } from "@matheusrizzati/ui";
|
|
69
|
+
|
|
70
|
+
export function App() {
|
|
71
|
+
return (
|
|
72
|
+
<div className="flex gap-4">
|
|
73
|
+
<Button variant="primary">Primary Action</Button>
|
|
74
|
+
<Button variant="secondary">Secondary</Button>
|
|
75
|
+
<Button variant="outline">Outline</Button>
|
|
76
|
+
<Button variant="ghost">Ghost</Button>
|
|
77
|
+
<Button variant="danger">Delete</Button>
|
|
78
|
+
</div>
|
|
79
|
+
);
|
|
80
|
+
}
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
### Input
|
|
84
|
+
|
|
85
|
+
```tsx
|
|
86
|
+
import { Input } from "@matheusrizzati/ui";
|
|
87
|
+
|
|
88
|
+
export function LoginForm() {
|
|
89
|
+
return (
|
|
90
|
+
<div className="space-y-4">
|
|
91
|
+
<Input label="Email" placeholder="hello@example.com" type="email" />
|
|
92
|
+
<Input label="Password" type="password" />
|
|
93
|
+
</div>
|
|
94
|
+
);
|
|
95
|
+
}
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
### Card
|
|
99
|
+
|
|
100
|
+
```tsx
|
|
101
|
+
import { Card, CardHeader, CardBody, CardFooter, Button } from "@matheusrizzati/ui";
|
|
102
|
+
|
|
103
|
+
export function PricingCard() {
|
|
104
|
+
return (
|
|
105
|
+
<Card>
|
|
106
|
+
<CardHeader>
|
|
107
|
+
<h3 className="text-lg font-medium text-text-primary">Pro Plan</h3>
|
|
108
|
+
</CardHeader>
|
|
109
|
+
<CardBody>
|
|
110
|
+
<p className="text-text-secondary">Access to all premium features.</p>
|
|
111
|
+
</CardBody>
|
|
112
|
+
<CardFooter>
|
|
113
|
+
<Button className="w-full">Upgrade</Button>
|
|
114
|
+
</CardFooter>
|
|
115
|
+
</Card>
|
|
116
|
+
);
|
|
117
|
+
}
|
|
118
|
+
```
|
|
119
|
+
|
|
120
|
+
### Sidebar
|
|
121
|
+
|
|
122
|
+
```tsx
|
|
123
|
+
import {
|
|
124
|
+
Sidebar,
|
|
125
|
+
SidebarHeader,
|
|
126
|
+
SidebarContent,
|
|
127
|
+
SidebarItem,
|
|
128
|
+
SidebarToggle,
|
|
129
|
+
LayoutDashboard,
|
|
130
|
+
Settings
|
|
131
|
+
} from "@matheusrizzati/ui"; // Note: Icons like LayoutDashboard need to be installed separately (e.g. lucide-react)
|
|
132
|
+
|
|
133
|
+
export function DashboardLayout({ children }) {
|
|
134
|
+
return (
|
|
135
|
+
<div className="flex h-screen bg-bg">
|
|
136
|
+
<Sidebar>
|
|
137
|
+
<SidebarHeader logo={<MyLogo />} />
|
|
138
|
+
<SidebarContent>
|
|
139
|
+
<SidebarItem active>Dashboard</SidebarItem>
|
|
140
|
+
<SidebarItem>Settings</SidebarItem>
|
|
141
|
+
</SidebarContent>
|
|
142
|
+
<SidebarToggle />
|
|
143
|
+
</Sidebar>
|
|
144
|
+
<main className="flex-1 p-6">{children}</main>
|
|
145
|
+
</div>
|
|
146
|
+
);
|
|
147
|
+
}
|
|
148
|
+
```
|
|
149
|
+
|
|
150
|
+
## Theming
|
|
151
|
+
|
|
152
|
+
The library uses CSS variables for theming. You can override these in your `:root` or a specific scope to change the appearance.
|
|
153
|
+
|
|
154
|
+
```css
|
|
155
|
+
:root {
|
|
156
|
+
/* Override primary color to Blue */
|
|
157
|
+
--color-primary: #3b82f6;
|
|
158
|
+
--color-primary-hover: #60a5fa;
|
|
159
|
+
--color-primary-active: #2563eb;
|
|
160
|
+
|
|
161
|
+
/* Override radius */
|
|
162
|
+
--radius: 8px;
|
|
163
|
+
}
|
|
164
|
+
```
|
|
165
|
+
|
|
166
|
+
See all available tokens in `node_modules/@matheusrizzati/ui/dist/tokens.css`.
|