@moontra/moonui 2.3.2 → 2.3.3
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 +281 -370
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,463 +1,374 @@
|
|
|
1
|
-
# MoonUI
|
|
1
|
+
# MoonUI 🌙
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
A premium React component library built for modern web applications. MoonUI provides beautifully designed, accessible, and highly customizable components that help you build stunning user interfaces faster.
|
|
4
|
+
|
|
5
|
+
[](https://badge.fury.io/js/%40moontra%2Fmoonui)
|
|
4
6
|
[](https://opensource.org/licenses/MIT)
|
|
5
|
-
[](http://www.typescriptlang.org/)
|
|
8
|
+
|
|
9
|
+
## ✨ Features
|
|
10
|
+
|
|
11
|
+
### 🎨 **Beautiful Design**
|
|
12
|
+
- **50+ Premium Components** - Carefully crafted with attention to detail
|
|
13
|
+
- **Modern Aesthetics** - Clean, minimalist design that works everywhere
|
|
14
|
+
- **Consistent Typography** - Harmonious text hierarchy and spacing
|
|
15
|
+
- **Smooth Animations** - Delightful micro-interactions powered by Framer Motion
|
|
6
16
|
|
|
7
|
-
|
|
17
|
+
### 🌙 **Dark Mode Ready**
|
|
18
|
+
- **Built-in Dark Mode** - Seamless light/dark theme switching
|
|
19
|
+
- **CSS Variables** - Easy customization with design tokens
|
|
20
|
+
- **Theme Provider** - Consistent theming across your application
|
|
21
|
+
- **Custom Themes** - Create your own color palettes
|
|
8
22
|
|
|
9
|
-
|
|
23
|
+
### ♿ **Accessibility First**
|
|
24
|
+
- **WCAG Compliant** - Meets accessibility standards
|
|
25
|
+
- **Keyboard Navigation** - Full keyboard support
|
|
26
|
+
- **Screen Reader Friendly** - Proper ARIA labels and descriptions
|
|
27
|
+
- **Focus Management** - Intuitive focus handling
|
|
10
28
|
|
|
11
|
-
|
|
12
|
-
-
|
|
13
|
-
-
|
|
14
|
-
-
|
|
15
|
-
-
|
|
16
|
-
-
|
|
17
|
-
- 🚀 **Production ready** - Used in production by many companies
|
|
29
|
+
### 🔧 **Developer Experience**
|
|
30
|
+
- **TypeScript** - Full type safety and IntelliSense
|
|
31
|
+
- **Tree Shaking** - Import only what you use
|
|
32
|
+
- **Zero Config** - Works out of the box
|
|
33
|
+
- **CLI Tool** - Easy installation with `moonui` CLI
|
|
34
|
+
- **Storybook** - Interactive component documentation
|
|
18
35
|
|
|
19
|
-
|
|
36
|
+
### 📱 **Responsive & Performance**
|
|
37
|
+
- **Mobile First** - Optimized for all screen sizes
|
|
38
|
+
- **Lightweight** - Minimal bundle impact
|
|
39
|
+
- **React 18+ Compatible** - Latest React features
|
|
40
|
+
- **SSR Ready** - Next.js and other SSR frameworks
|
|
41
|
+
|
|
42
|
+
## 🚀 Quick Start
|
|
43
|
+
|
|
44
|
+
### Installation
|
|
20
45
|
|
|
21
46
|
```bash
|
|
47
|
+
# Install the package
|
|
22
48
|
npm install @moontra/moonui
|
|
23
|
-
```
|
|
24
49
|
|
|
25
|
-
|
|
26
|
-
|
|
50
|
+
# Or use the CLI (recommended)
|
|
51
|
+
npx @moontra/moonui-cli@latest init
|
|
27
52
|
```
|
|
28
53
|
|
|
29
|
-
|
|
30
|
-
pnpm add @moontra/moonui
|
|
31
|
-
```
|
|
54
|
+
### CDN Usage (Browser/Artifacts)
|
|
32
55
|
|
|
33
|
-
|
|
56
|
+
For quick prototyping or artifact environments:
|
|
34
57
|
|
|
35
|
-
|
|
58
|
+
```html
|
|
59
|
+
<!-- Dependencies -->
|
|
60
|
+
<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
|
|
61
|
+
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
|
|
36
62
|
|
|
37
|
-
MoonUI
|
|
63
|
+
<!-- MoonUI -->
|
|
64
|
+
<script src="https://cdn.jsdelivr.net/npm/@moontra/moonui@2.3.2/dist/index.global.js"></script>
|
|
38
65
|
|
|
39
|
-
|
|
40
|
-
|
|
66
|
+
<script>
|
|
67
|
+
const { Button, Card } = window.MoonUI;
|
|
68
|
+
|
|
69
|
+
function App() {
|
|
70
|
+
return React.createElement(Card, null,
|
|
71
|
+
React.createElement(Button, { variant: 'default' }, 'Hello MoonUI!')
|
|
72
|
+
);
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
ReactDOM.render(React.createElement(App), document.getElementById('root'));
|
|
76
|
+
</script>
|
|
41
77
|
```
|
|
42
78
|
|
|
43
|
-
###
|
|
79
|
+
### Setup
|
|
44
80
|
|
|
45
|
-
|
|
81
|
+
1. **Configure Tailwind CSS** (required)
|
|
46
82
|
|
|
47
|
-
```
|
|
83
|
+
```javascript
|
|
48
84
|
// tailwind.config.js
|
|
49
|
-
/** @type {import('tailwindcss').Config} */
|
|
50
85
|
module.exports = {
|
|
51
|
-
darkMode: ["class"],
|
|
52
86
|
content: [
|
|
53
|
-
|
|
54
|
-
"./node_modules/moonui
|
|
87
|
+
"./src/**/*.{js,ts,jsx,tsx}",
|
|
88
|
+
"./node_modules/@moontra/moonui/**/*.{js,mjs}"
|
|
55
89
|
],
|
|
56
90
|
theme: {
|
|
57
|
-
extend: {
|
|
58
|
-
colors: {
|
|
59
|
-
border: "hsl(var(--border))",
|
|
60
|
-
input: "hsl(var(--input))",
|
|
61
|
-
ring: "hsl(var(--ring))",
|
|
62
|
-
background: "hsl(var(--background))",
|
|
63
|
-
foreground: "hsl(var(--foreground))",
|
|
64
|
-
primary: {
|
|
65
|
-
DEFAULT: "hsl(var(--primary))",
|
|
66
|
-
foreground: "hsl(var(--primary-foreground))",
|
|
67
|
-
},
|
|
68
|
-
secondary: {
|
|
69
|
-
DEFAULT: "hsl(var(--secondary))",
|
|
70
|
-
foreground: "hsl(var(--secondary-foreground))",
|
|
71
|
-
},
|
|
72
|
-
destructive: {
|
|
73
|
-
DEFAULT: "hsl(var(--destructive))",
|
|
74
|
-
foreground: "hsl(var(--destructive-foreground))",
|
|
75
|
-
},
|
|
76
|
-
muted: {
|
|
77
|
-
DEFAULT: "hsl(var(--muted))",
|
|
78
|
-
foreground: "hsl(var(--muted-foreground))",
|
|
79
|
-
},
|
|
80
|
-
accent: {
|
|
81
|
-
DEFAULT: "hsl(var(--accent))",
|
|
82
|
-
foreground: "hsl(var(--accent-foreground))",
|
|
83
|
-
},
|
|
84
|
-
popover: {
|
|
85
|
-
DEFAULT: "hsl(var(--popover))",
|
|
86
|
-
foreground: "hsl(var(--popover-foreground))",
|
|
87
|
-
},
|
|
88
|
-
card: {
|
|
89
|
-
DEFAULT: "hsl(var(--card))",
|
|
90
|
-
foreground: "hsl(var(--card-foreground))",
|
|
91
|
-
},
|
|
92
|
-
},
|
|
93
|
-
borderRadius: {
|
|
94
|
-
lg: "var(--radius)",
|
|
95
|
-
md: "calc(var(--radius) - 2px)",
|
|
96
|
-
sm: "calc(var(--radius) - 4px)",
|
|
97
|
-
},
|
|
98
|
-
},
|
|
91
|
+
extend: {},
|
|
99
92
|
},
|
|
93
|
+
plugins: [],
|
|
100
94
|
}
|
|
101
95
|
```
|
|
102
96
|
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
Add the following CSS variables to your global CSS file:
|
|
97
|
+
2. **Import styles** (in your main CSS file)
|
|
106
98
|
|
|
107
99
|
```css
|
|
100
|
+
@import '@moontra/moonui/styles';
|
|
108
101
|
@tailwind base;
|
|
109
102
|
@tailwind components;
|
|
110
103
|
@tailwind utilities;
|
|
104
|
+
```
|
|
111
105
|
|
|
112
|
-
|
|
113
|
-
:root {
|
|
114
|
-
--background: 0 0% 100%;
|
|
115
|
-
--foreground: 222.2 84% 4.9%;
|
|
116
|
-
|
|
117
|
-
--card: 0 0% 100%;
|
|
118
|
-
--card-foreground: 222.2 84% 4.9%;
|
|
119
|
-
|
|
120
|
-
--popover: 0 0% 100%;
|
|
121
|
-
--popover-foreground: 222.2 84% 4.9%;
|
|
106
|
+
3. **Start using components**
|
|
122
107
|
|
|
123
|
-
|
|
124
|
-
|
|
108
|
+
```jsx
|
|
109
|
+
import { Button, Card, Input } from '@moontra/moonui';
|
|
125
110
|
|
|
126
|
-
|
|
127
|
-
|
|
111
|
+
function App() {
|
|
112
|
+
return (
|
|
113
|
+
<Card className="p-6">
|
|
114
|
+
<h1 className="text-2xl font-bold mb-4">Welcome to MoonUI</h1>
|
|
115
|
+
<div className="space-y-4">
|
|
116
|
+
<Input placeholder="Enter your name" />
|
|
117
|
+
<Button variant="default" size="lg">
|
|
118
|
+
Get Started
|
|
119
|
+
</Button>
|
|
120
|
+
</div>
|
|
121
|
+
</Card>
|
|
122
|
+
);
|
|
123
|
+
}
|
|
124
|
+
```
|
|
128
125
|
|
|
129
|
-
|
|
130
|
-
--muted-foreground: 215.4 16.3% 46.9%;
|
|
126
|
+
## 📚 Components
|
|
131
127
|
|
|
132
|
-
|
|
133
|
-
|
|
128
|
+
### Layout & Structure
|
|
129
|
+
- **Card** - Flexible content containers
|
|
130
|
+
- **Separator** - Visual content dividers
|
|
131
|
+
- **AspectRatio** - Responsive aspect ratio containers
|
|
132
|
+
- **ScrollArea** - Custom scrollable areas
|
|
134
133
|
|
|
135
|
-
|
|
136
|
-
|
|
134
|
+
### Navigation
|
|
135
|
+
- **Breadcrumb** - Hierarchical navigation
|
|
136
|
+
- **Pagination** - Page navigation controls
|
|
137
|
+
- **Tabs** - Tabbed interfaces
|
|
138
|
+
- **Navigation Menu** - Complex navigation structures
|
|
137
139
|
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
140
|
+
### Form Controls
|
|
141
|
+
- **Button** - Interactive buttons with variants
|
|
142
|
+
- **Input** - Text input fields
|
|
143
|
+
- **Textarea** - Multi-line text input
|
|
144
|
+
- **Select** - Dropdown selections
|
|
145
|
+
- **Checkbox** - Boolean selections
|
|
146
|
+
- **RadioGroup** - Single choice selections
|
|
147
|
+
- **Switch** - Toggle controls
|
|
148
|
+
- **Slider** - Range inputs
|
|
149
|
+
- **Label** - Form field labels
|
|
141
150
|
|
|
142
|
-
|
|
143
|
-
|
|
151
|
+
### Feedback & Overlays
|
|
152
|
+
- **Dialog** - Modal dialogs
|
|
153
|
+
- **AlertDialog** - Confirmation dialogs
|
|
154
|
+
- **Toast** - Notification messages
|
|
155
|
+
- **Alert** - Inline notifications
|
|
156
|
+
- **Tooltip** - Contextual information
|
|
157
|
+
- **Popover** - Floating content panels
|
|
158
|
+
- **HoverCard** - Hover-triggered content
|
|
144
159
|
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
160
|
+
### Data Display
|
|
161
|
+
- **Avatar** - User profile images
|
|
162
|
+
- **Badge** - Status indicators
|
|
163
|
+
- **Progress** - Loading indicators
|
|
164
|
+
- **Skeleton** - Loading placeholders
|
|
165
|
+
- **Table** - Structured data display
|
|
166
|
+
- **DataTable** - Advanced data tables
|
|
167
|
+
- **Accordion** - Collapsible content
|
|
168
|
+
|
|
169
|
+
### Media & Graphics
|
|
170
|
+
- **Calendar** - Date selection
|
|
171
|
+
- **DatePicker** - Date input controls
|
|
172
|
+
- **ColorPicker** - Color selection
|
|
173
|
+
- **FileUpload** - File upload interface
|
|
174
|
+
|
|
175
|
+
### Advanced
|
|
176
|
+
- **Command** - Command palette interface
|
|
177
|
+
- **Collapsible** - Expandable content
|
|
178
|
+
- **DropdownMenu** - Context menus
|
|
179
|
+
- **Menubar** - Application menu bars
|
|
148
180
|
|
|
149
|
-
|
|
150
|
-
--card-foreground: 210 40% 98%;
|
|
181
|
+
## 🎨 Theming
|
|
151
182
|
|
|
152
|
-
|
|
153
|
-
--popover-foreground: 210 40% 98%;
|
|
183
|
+
### CSS Variables
|
|
154
184
|
|
|
155
|
-
|
|
156
|
-
--primary-foreground: 222.2 47.4% 11.2%;
|
|
185
|
+
MoonUI uses CSS variables for easy theming:
|
|
157
186
|
|
|
158
|
-
|
|
159
|
-
|
|
187
|
+
```css
|
|
188
|
+
:root {
|
|
189
|
+
--background: 0 0% 100%;
|
|
190
|
+
--foreground: 222.2 84% 4.9%;
|
|
191
|
+
--primary: 222.2 47.4% 11.2%;
|
|
192
|
+
--primary-foreground: 210 40% 98%;
|
|
193
|
+
/* ... more variables */
|
|
194
|
+
}
|
|
160
195
|
|
|
161
|
-
|
|
162
|
-
|
|
196
|
+
.dark {
|
|
197
|
+
--background: 222.2 84% 4.9%;
|
|
198
|
+
--foreground: 210 40% 98%;
|
|
199
|
+
/* ... dark theme variables */
|
|
200
|
+
}
|
|
201
|
+
```
|
|
163
202
|
|
|
164
|
-
|
|
165
|
-
--accent-foreground: 210 40% 98%;
|
|
203
|
+
### Theme Provider
|
|
166
204
|
|
|
167
|
-
|
|
168
|
-
|
|
205
|
+
```jsx
|
|
206
|
+
import { ThemeProvider } from '@moontra/moonui/theme';
|
|
169
207
|
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
208
|
+
function App() {
|
|
209
|
+
return (
|
|
210
|
+
<ThemeProvider attribute="class" defaultTheme="system">
|
|
211
|
+
<YourApp />
|
|
212
|
+
</ThemeProvider>
|
|
213
|
+
);
|
|
174
214
|
}
|
|
215
|
+
```
|
|
175
216
|
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
}
|
|
217
|
+
### Custom Colors
|
|
218
|
+
|
|
219
|
+
```css
|
|
220
|
+
:root {
|
|
221
|
+
--primary: 142 76% 36%; /* Custom green */
|
|
222
|
+
--secondary: 210 40% 95%;
|
|
183
223
|
}
|
|
184
224
|
```
|
|
185
225
|
|
|
186
|
-
##
|
|
226
|
+
## 🔧 CLI Tool
|
|
187
227
|
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
The best way to use MoonUI is through our CLI tool, which gives you full control over the components:
|
|
228
|
+
The MoonUI CLI helps you add components easily:
|
|
191
229
|
|
|
192
230
|
```bash
|
|
193
|
-
# Install CLI globally
|
|
194
|
-
npm install -g @moontra/moonui-cli
|
|
195
|
-
|
|
196
231
|
# Initialize MoonUI in your project
|
|
197
|
-
moonui init
|
|
232
|
+
npx @moontra/moonui-cli@latest init
|
|
233
|
+
|
|
234
|
+
# Add specific components
|
|
235
|
+
npx @moontra/moonui-cli@latest add button
|
|
236
|
+
npx @moontra/moonui-cli@latest add card input
|
|
198
237
|
|
|
199
|
-
# Add components
|
|
200
|
-
moonui add button card
|
|
238
|
+
# Add multiple components
|
|
239
|
+
npx @moontra/moonui-cli@latest add button card input dialog
|
|
201
240
|
```
|
|
202
241
|
|
|
203
|
-
|
|
204
|
-
```tsx
|
|
205
|
-
import { Button } from '@/components/ui/button'
|
|
206
|
-
import { Card } from '@/components/ui/card'
|
|
207
|
-
import { Badge } from '@/components/ui/badge'
|
|
242
|
+
## 📖 Documentation
|
|
208
243
|
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
244
|
+
- **🌐 Website**: [moonui.dev](https://moonui.dev)
|
|
245
|
+
- **📚 Components**: [moonui.dev/docs/components](https://moonui.dev/docs/components)
|
|
246
|
+
- **🎨 Theming**: [moonui.dev/docs/theming](https://moonui.dev/docs/theming)
|
|
247
|
+
- **🔧 CLI**: [moonui.dev/docs/cli](https://moonui.dev/docs/cli)
|
|
248
|
+
|
|
249
|
+
## 🤖 AI Integration
|
|
250
|
+
|
|
251
|
+
MoonUI includes MCP (Model Context Protocol) support for AI assistants:
|
|
252
|
+
|
|
253
|
+
```bash
|
|
254
|
+
# Install MCP Server
|
|
255
|
+
npm install -g @moontra/moonui-mcp-server
|
|
256
|
+
|
|
257
|
+
# Configure in Claude Desktop
|
|
258
|
+
{
|
|
259
|
+
"mcpServers": {
|
|
260
|
+
"moonui": {
|
|
261
|
+
"command": "npx",
|
|
262
|
+
"args": ["@moontra/moonui-mcp-server"]
|
|
263
|
+
}
|
|
264
|
+
}
|
|
218
265
|
}
|
|
219
266
|
```
|
|
220
267
|
|
|
221
|
-
|
|
268
|
+
AI assistants can then help you:
|
|
269
|
+
- 🎯 Find the right components for your use case
|
|
270
|
+
- 🔧 Generate component code automatically
|
|
271
|
+
- 🐛 Fix import issues
|
|
272
|
+
- 🎨 Configure theming and customization
|
|
273
|
+
- 📱 Detect environment (CDN vs NPM) automatically
|
|
222
274
|
|
|
223
|
-
|
|
275
|
+
## 💼 Pro Version
|
|
224
276
|
|
|
225
|
-
|
|
226
|
-
import { Button, Card, Badge } from '@moontra/moonui'
|
|
227
|
-
```
|
|
277
|
+
Upgrade to MoonUI Pro for advanced components:
|
|
228
278
|
|
|
229
|
-
|
|
279
|
+
- **DataTable** - Advanced data grids with sorting, filtering, pagination
|
|
280
|
+
- **Charts** - Beautiful data visualizations
|
|
281
|
+
- **RichTextEditor** - WYSIWYG editor
|
|
282
|
+
- **FormWizard** - Multi-step forms
|
|
283
|
+
- **Calendar** - Advanced date/time pickers
|
|
284
|
+
- **DragDropList** - Sortable lists
|
|
285
|
+
- **TreeView** - Hierarchical data display
|
|
286
|
+
- **Timeline** - Event timelines
|
|
287
|
+
- **VideoPlayer** - Custom video controls
|
|
288
|
+
- **CodeEditor** - Syntax-highlighted code input
|
|
230
289
|
|
|
231
|
-
|
|
232
|
-
```tsx
|
|
233
|
-
import {
|
|
234
|
-
MagneticButton,
|
|
235
|
-
SpotlightCard,
|
|
236
|
-
GestureDrawer,
|
|
237
|
-
SwipeableCard
|
|
238
|
-
} from '@moontra/moonui'
|
|
290
|
+
[Learn more about Pro →](https://moonui.dev/pricing)
|
|
239
291
|
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
<p>Swipe me on mobile devices</p>
|
|
257
|
-
</SwipeableCard>
|
|
258
|
-
</div>
|
|
259
|
-
)
|
|
260
|
-
}
|
|
292
|
+
## 🛠️ Development
|
|
293
|
+
|
|
294
|
+
### Requirements
|
|
295
|
+
|
|
296
|
+
- Node.js 18+
|
|
297
|
+
- React 18+
|
|
298
|
+
- TypeScript 5+
|
|
299
|
+
- Tailwind CSS 3+
|
|
300
|
+
|
|
301
|
+
### Local Development
|
|
302
|
+
|
|
303
|
+
```bash
|
|
304
|
+
git clone https://github.com/moontra/moonui
|
|
305
|
+
cd moonui/packages/moonui
|
|
306
|
+
npm install
|
|
307
|
+
npm run dev
|
|
261
308
|
```
|
|
262
309
|
|
|
263
|
-
|
|
264
|
-
```tsx
|
|
265
|
-
import {
|
|
266
|
-
VirtualList,
|
|
267
|
-
MemoryEfficientData,
|
|
268
|
-
LazyComponent,
|
|
269
|
-
OptimizedImage
|
|
270
|
-
} from '@moontra/moonui'
|
|
271
|
-
|
|
272
|
-
function PerformanceDemo() {
|
|
273
|
-
const largeDataset = Array.from({ length: 10000 }, (_, i) => ({
|
|
274
|
-
id: i,
|
|
275
|
-
name: `Item ${i}`
|
|
276
|
-
}))
|
|
310
|
+
### Building
|
|
277
311
|
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
itemHeight={50}
|
|
284
|
-
renderItem={({ item }) => <div key={item.id}>{item.name}</div>}
|
|
285
|
-
/>
|
|
286
|
-
|
|
287
|
-
{/* Memory efficient data handling */}
|
|
288
|
-
<MemoryEfficientData
|
|
289
|
-
data={largeDataset}
|
|
290
|
-
chunkSize={100}
|
|
291
|
-
renderChunk={(chunk) => (
|
|
292
|
-
<div>{chunk.map(item => <div key={item.id}>{item.name}</div>)}</div>
|
|
293
|
-
)}
|
|
294
|
-
/>
|
|
295
|
-
|
|
296
|
-
{/* Lazy loaded component */}
|
|
297
|
-
<LazyComponent>
|
|
298
|
-
<OptimizedImage
|
|
299
|
-
src="/large-image.jpg"
|
|
300
|
-
alt="Optimized image"
|
|
301
|
-
loading="lazy"
|
|
302
|
-
/>
|
|
303
|
-
</LazyComponent>
|
|
304
|
-
</div>
|
|
305
|
-
)
|
|
306
|
-
}
|
|
312
|
+
```bash
|
|
313
|
+
npm run build # Build for production
|
|
314
|
+
npm run build:dts # Generate type definitions
|
|
315
|
+
npm run lint # Lint code
|
|
316
|
+
npm run test # Run tests
|
|
307
317
|
```
|
|
308
318
|
|
|
309
|
-
##
|
|
319
|
+
## 🤝 Contributing
|
|
310
320
|
|
|
311
|
-
|
|
312
|
-
- **Button** - Multiple variants with loading states
|
|
313
|
-
- **Card** - Flexible container with header/footer support
|
|
314
|
-
- **Badge** - Status indicators and labels
|
|
315
|
-
- **Input** - Text input with validation
|
|
316
|
-
- **Textarea** - Multi-line text input
|
|
317
|
-
- **Label** - Form labels with accessibility
|
|
318
|
-
- **Separator** - Visual dividers
|
|
319
|
-
|
|
320
|
-
### Form Components
|
|
321
|
-
- **Select** - Dropdown selection with search
|
|
322
|
-
- **Switch** - Toggle switches
|
|
323
|
-
- **Checkbox** - Single and group checkboxes
|
|
324
|
-
- **RadioGroup** - Radio button groups
|
|
325
|
-
- **Slider** - Range and single value sliders
|
|
326
|
-
- **Color Picker** - Color selection component
|
|
327
|
-
- **Date Picker** - Calendar-based date selection
|
|
328
|
-
|
|
329
|
-
### Layout Components
|
|
330
|
-
- **Dialog** - Modal dialogs and overlays
|
|
331
|
-
- **Sheet** - Slide-out panels
|
|
332
|
-
- **Tabs** - Tabbed content areas
|
|
333
|
-
- **Accordion** - Collapsible content sections
|
|
334
|
-
- **Collapsible** - Expandable content
|
|
335
|
-
- **Command** - Command palette interface
|
|
336
|
-
- **Aspect Ratio** - Responsive aspect ratio containers
|
|
321
|
+
We welcome contributions! See our [Contributing Guide](CONTRIBUTING.md) for details.
|
|
337
322
|
|
|
338
|
-
###
|
|
339
|
-
- **Alert** - Notification and status messages
|
|
340
|
-
- **Avatar** - User profile images with fallbacks
|
|
341
|
-
- **Progress** - Progress bars and indicators
|
|
342
|
-
- **Skeleton** - Loading state placeholders
|
|
343
|
-
- **Table** - Data tables with sorting
|
|
344
|
-
- **Data Table** - Advanced data grid
|
|
345
|
-
- **Tooltip** - Contextual help text
|
|
346
|
-
- **Calendar** - Date display and navigation
|
|
323
|
+
### Development Workflow
|
|
347
324
|
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
325
|
+
1. Fork the repository
|
|
326
|
+
2. Create a feature branch
|
|
327
|
+
3. Make your changes
|
|
328
|
+
4. Add tests and documentation
|
|
329
|
+
5. Submit a pull request
|
|
353
330
|
|
|
354
|
-
###
|
|
355
|
-
- **Toast** - Temporary notifications
|
|
356
|
-
- **Popover** - Floating content containers
|
|
357
|
-
- **Hover Card** - Hover-triggered content
|
|
358
|
-
|
|
359
|
-
### Interactive Components
|
|
360
|
-
- **Animated Button** - Buttons with micro-interactions
|
|
361
|
-
- **Draggable List** - Drag and drop sortable lists
|
|
362
|
-
- **Floating Action Button** - FAB with expandable menu
|
|
363
|
-
- **Gesture Drawer** - Touch-gesture driven drawers
|
|
364
|
-
- **Hover Card 3D** - 3D hover effects
|
|
365
|
-
- **Magnetic Button** - Mouse-following magnetic effects
|
|
366
|
-
- **Spotlight Card** - Interactive spotlight effects
|
|
367
|
-
- **Swipeable Card** - Touch swipe interactions
|
|
368
|
-
- **Pinch Zoom** - Touch zoom functionality
|
|
369
|
-
|
|
370
|
-
### Performance & Utility
|
|
371
|
-
- **Error Boundary** - React error boundaries
|
|
372
|
-
- **File Upload** - File upload with progress
|
|
373
|
-
- **GitHub Stars** - GitHub repository stats
|
|
374
|
-
- **Health Check** - System health monitoring
|
|
375
|
-
- **Lazy Component** - Code splitting support
|
|
376
|
-
- **Locked Component** - Access control wrapper
|
|
377
|
-
- **Memory Efficient Data** - Optimized data handling
|
|
378
|
-
- **Optimized Image** - Performance-optimized images
|
|
379
|
-
- **Performance Debugger** - Performance analysis tools
|
|
380
|
-
- **Performance Monitor** - Real-time performance tracking
|
|
381
|
-
- **Simple Editor** - Basic text editor
|
|
382
|
-
- **Rich Text Editor** - Advanced WYSIWYG editor
|
|
383
|
-
- **Virtual List** - Virtualized large lists
|
|
384
|
-
- **Moon Logo** - MoonUI branding component
|
|
385
|
-
|
|
386
|
-
### Specialized
|
|
387
|
-
- **Toggle** - Toggle switches with states
|
|
388
|
-
|
|
389
|
-
## Pro Components
|
|
390
|
-
|
|
391
|
-
Looking for more advanced enterprise-grade components? Check out [MoonUI Pro](https://moonui.dev/pro) for:
|
|
392
|
-
|
|
393
|
-
- 📊 **Advanced Data Table** - Enterprise data grid with filtering, sorting, export
|
|
394
|
-
- 📈 **Advanced Charts** - Interactive charts with real-time data
|
|
395
|
-
- 📅 **Calendar Pro** - Full-featured calendar with events and scheduling
|
|
396
|
-
- 📝 **Rich Text Editor Pro** - WYSIWYG editor with AI assistance and collaboration
|
|
397
|
-
- 📤 **File Upload Pro** - Advanced file handling with cloud storage
|
|
398
|
-
- 🗂️ **Kanban Board** - Drag & drop project management
|
|
399
|
-
- 📍 **Timeline** - Interactive project timelines
|
|
400
|
-
- 🚀 **Memory Efficient Data** - Large dataset handling
|
|
401
|
-
- 📊 **Virtual List Pro** - Performance virtualization
|
|
402
|
-
- And many more enterprise features...
|
|
403
|
-
|
|
404
|
-
## Documentation
|
|
405
|
-
|
|
406
|
-
Visit [moonui.dev/docs](https://moonui.dev/docs) for full documentation.
|
|
407
|
-
|
|
408
|
-
## Customization
|
|
409
|
-
|
|
410
|
-
MoonUI components are built with customization in mind. You can easily customize them using:
|
|
411
|
-
|
|
412
|
-
### 1. CSS Variables
|
|
413
|
-
```css
|
|
414
|
-
:root {
|
|
415
|
-
--primary: 222.2 47.4% 11.2%;
|
|
416
|
-
--primary-foreground: 210 40% 98%;
|
|
417
|
-
}
|
|
418
|
-
```
|
|
331
|
+
### Component Guidelines
|
|
419
332
|
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
```
|
|
333
|
+
- Follow accessibility best practices
|
|
334
|
+
- Include TypeScript types
|
|
335
|
+
- Add Storybook stories
|
|
336
|
+
- Write comprehensive tests
|
|
337
|
+
- Document props and usage
|
|
426
338
|
|
|
427
|
-
|
|
428
|
-
```tsx
|
|
429
|
-
<Button variant="destructive" size="lg">
|
|
430
|
-
Delete
|
|
431
|
-
</Button>
|
|
432
|
-
```
|
|
339
|
+
## 📦 Package Details
|
|
433
340
|
|
|
434
|
-
|
|
341
|
+
- **Bundle Size**: ~460KB (ESM), ~485KB (CJS)
|
|
342
|
+
- **CDN Bundle**: ~742KB (includes all dependencies)
|
|
343
|
+
- **Type Definitions**: Full TypeScript support
|
|
344
|
+
- **Tree Shaking**: Import individual components
|
|
345
|
+
- **Side Effects**: false (webpack optimization)
|
|
435
346
|
|
|
436
|
-
|
|
347
|
+
## 🔗 Ecosystem
|
|
437
348
|
|
|
438
|
-
|
|
439
|
-
|
|
349
|
+
- **[@moontra/moonui-pro](https://npmjs.com/package/@moontra/moonui-pro)** - Premium components
|
|
350
|
+
- **[@moontra/moonui-cli](https://npmjs.com/package/@moontra/moonui-cli)** - Command line tool
|
|
351
|
+
- **[@moontra/moonui-mcp-server](https://npmjs.com/package/@moontra/moonui-mcp-server)** - AI integration
|
|
440
352
|
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
)
|
|
447
|
-
}
|
|
448
|
-
```
|
|
353
|
+
## 📄 License
|
|
354
|
+
|
|
355
|
+
Licensed under the [MIT License](LICENSE).
|
|
356
|
+
|
|
357
|
+
## 🙏 Acknowledgments
|
|
449
358
|
|
|
450
|
-
|
|
359
|
+
Built with:
|
|
360
|
+
- [React](https://reactjs.org/)
|
|
361
|
+
- [Radix UI](https://radix-ui.com/)
|
|
362
|
+
- [Tailwind CSS](https://tailwindcss.com/)
|
|
363
|
+
- [Framer Motion](https://framer.com/motion/)
|
|
364
|
+
- [Lucide Icons](https://lucide.dev/)
|
|
451
365
|
|
|
452
|
-
|
|
453
|
-
- Tailwind CSS 3.0.0 or higher
|
|
366
|
+
---
|
|
454
367
|
|
|
455
|
-
|
|
368
|
+
<div align="center">
|
|
456
369
|
|
|
457
|
-
|
|
370
|
+
**[Website](https://moonui.dev) • [Documentation](https://moonui.dev/docs) • [Components](https://moonui.dev/docs/components) • [GitHub](https://github.com/moontra/moonui)**
|
|
458
371
|
|
|
459
|
-
|
|
372
|
+
Made with ❤️ by the MoonUI team
|
|
460
373
|
|
|
461
|
-
|
|
462
|
-
- Discord: [Join our community](https://discord.gg/moonui)
|
|
463
|
-
- GitHub Issues: [Report bugs](https://github.com/moontra/moonui/issues)
|
|
374
|
+
</div>
|