smoothui-cli 1.0.0 → 1.0.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.github.md +413 -0
- package/README.md +35 -427
- package/README.npm.md +71 -0
- package/package.json +7 -3
package/README.github.md
ADDED
|
@@ -0,0 +1,413 @@
|
|
|
1
|
+
# SmoothUI
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
<div align="center">
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
[](https://actions-badge.atrox.dev/educlopez/smoothui/goto?ref=main)
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
[](https://smoothui.dev)
|
|
17
|
+
|
|
18
|
+
</div>
|
|
19
|
+
|
|
20
|
+
SmoothUI is a collection of beautifully designed components with smooth animations built with React, Tailwind CSS, and Motion. This project aims to provide developers with a set of reusable UI components that enhance user experience through delightful animations and modern design patterns.
|
|
21
|
+
|
|
22
|
+
## Table of Contents
|
|
23
|
+
|
|
24
|
+
- [SmoothUI](#smoothui)
|
|
25
|
+
- [Table of Contents](#table-of-contents)
|
|
26
|
+
- [Features](#features)
|
|
27
|
+
- [Quick Start](#quick-start)
|
|
28
|
+
- [Installation](#installation)
|
|
29
|
+
- [Using SmoothUI CLI](#using-smoothui-cli)
|
|
30
|
+
- [Using shadcn CLI](#using-shadcn-cli)
|
|
31
|
+
- [Manual Installation](#manual-installation)
|
|
32
|
+
- [Usage](#usage)
|
|
33
|
+
- [Basic Usage](#basic-usage)
|
|
34
|
+
- [Advanced Usage](#advanced-usage)
|
|
35
|
+
- [Available Components](#available-components)
|
|
36
|
+
- [UI Components](#ui-components)
|
|
37
|
+
- [Interactive Components](#interactive-components)
|
|
38
|
+
- [Layout Components](#layout-components)
|
|
39
|
+
- [Utility Components](#utility-components)
|
|
40
|
+
- [MCP Support](#mcp-support)
|
|
41
|
+
- [🤖 AI Assistant Integration](#-ai-assistant-integration)
|
|
42
|
+
- [Quick MCP Setup](#quick-mcp-setup)
|
|
43
|
+
- [Registry System](#registry-system)
|
|
44
|
+
- [Automatic Dependencies](#automatic-dependencies)
|
|
45
|
+
- [Component Structure](#component-structure)
|
|
46
|
+
- [Registry Features](#registry-features)
|
|
47
|
+
- [Troubleshooting](#troubleshooting)
|
|
48
|
+
- [Common Issues](#common-issues)
|
|
49
|
+
- [1. Authentication Error (401)](#1-authentication-error-401)
|
|
50
|
+
- [2. Registry Not Found](#2-registry-not-found)
|
|
51
|
+
- [3. Import Path Issues](#3-import-path-issues)
|
|
52
|
+
- [4. Missing Dependencies](#4-missing-dependencies)
|
|
53
|
+
- [Getting Help](#getting-help)
|
|
54
|
+
- [Contributing](#contributing)
|
|
55
|
+
- [Development Setup](#development-setup)
|
|
56
|
+
- [License](#license)
|
|
57
|
+
|
|
58
|
+
## Features
|
|
59
|
+
|
|
60
|
+
- **Modern Design System**: A cohesive and contemporary design language with a new mascot called Smoothy
|
|
61
|
+
- **Smooth Animations**: Built-in animations powered by Motion for delightful user experiences
|
|
62
|
+
- **Responsive Design**: Fully responsive components designed with Tailwind CSS
|
|
63
|
+
- **Dark Mode Support**: Components support both light and dark themes out of the box
|
|
64
|
+
- **Color Customization**: Dynamic color switcher for easy theme customization
|
|
65
|
+
- **Documentation**: Comprehensive documentation with props, examples, and usage guidelines
|
|
66
|
+
- **Accessibility**: Enhanced accessibility features across all components
|
|
67
|
+
- **TypeScript Support**: Full TypeScript support with type definitions
|
|
68
|
+
- **Easy Integration**: Simple API for integrating components into your projects
|
|
69
|
+
- **CLI Tools**: Dedicated SmoothUI CLI and shadcn registry support for easy component installation
|
|
70
|
+
|
|
71
|
+
## Quick Start
|
|
72
|
+
|
|
73
|
+
Get started with SmoothUI in just one command:
|
|
74
|
+
|
|
75
|
+
```bash
|
|
76
|
+
# Using SmoothUI CLI (recommended)
|
|
77
|
+
npx smoothui-cli add siri-orb
|
|
78
|
+
|
|
79
|
+
# Or using shadcn CLI
|
|
80
|
+
npx shadcn@latest add @smoothui/siri-orb
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
Then use the component:
|
|
84
|
+
|
|
85
|
+
```tsx
|
|
86
|
+
import { SiriOrb } from "@/components/smoothui/ui/SiriOrb";
|
|
87
|
+
|
|
88
|
+
export default function App() {
|
|
89
|
+
return <SiriOrb size="200px" />;
|
|
90
|
+
}
|
|
91
|
+
```
|
|
92
|
+
|
|
93
|
+
## Installation
|
|
94
|
+
|
|
95
|
+
### Using SmoothUI CLI
|
|
96
|
+
|
|
97
|
+
The SmoothUI CLI provides an interactive way to browse and install components with automatic dependency resolution.
|
|
98
|
+
|
|
99
|
+
```bash
|
|
100
|
+
# Add a single component
|
|
101
|
+
npx smoothui-cli add siri-orb
|
|
102
|
+
|
|
103
|
+
# Add multiple components
|
|
104
|
+
npx smoothui-cli add siri-orb rich-popover animated-input
|
|
105
|
+
|
|
106
|
+
# Interactive mode - browse and select components
|
|
107
|
+
npx smoothui-cli add
|
|
108
|
+
|
|
109
|
+
# List all available components
|
|
110
|
+
npx smoothui-cli list
|
|
111
|
+
```
|
|
112
|
+
|
|
113
|
+
**Features:**
|
|
114
|
+
|
|
115
|
+
- Interactive component picker with search and categories
|
|
116
|
+
- Auto-detects package manager (npm, pnpm, yarn, bun)
|
|
117
|
+
- Auto-detects component paths and tsconfig aliases
|
|
118
|
+
- Shows dependency tree before installation
|
|
119
|
+
- Handles file conflicts with overwrite prompts
|
|
120
|
+
- Auto-installs npm dependencies
|
|
121
|
+
|
|
122
|
+
### Using shadcn CLI
|
|
123
|
+
|
|
124
|
+
SmoothUI is an official shadcn registry, so you can install components directly using the `@smoothui` namespace:
|
|
125
|
+
|
|
126
|
+
```bash
|
|
127
|
+
# Install a single component
|
|
128
|
+
npx shadcn@latest add @smoothui/siri-orb
|
|
129
|
+
|
|
130
|
+
# Install multiple components
|
|
131
|
+
npx shadcn@latest add @smoothui/rich-popover @smoothui/animated-input
|
|
132
|
+
```
|
|
133
|
+
|
|
134
|
+
### Manual Installation
|
|
135
|
+
|
|
136
|
+
If you prefer to install components manually, you can copy the component files directly:
|
|
137
|
+
|
|
138
|
+
1. **Install dependencies**:
|
|
139
|
+
|
|
140
|
+
```bash
|
|
141
|
+
pnpm add motion tailwindcss lucide-react clsx tailwind-merge
|
|
142
|
+
```
|
|
143
|
+
|
|
144
|
+
2. **Copy component files** from the [components directory](src/components/smoothui/ui/)
|
|
145
|
+
|
|
146
|
+
3. **Set up utilities**:
|
|
147
|
+
|
|
148
|
+
```bash
|
|
149
|
+
# Create lib/utils/cn.ts
|
|
150
|
+
mkdir -p lib/utils
|
|
151
|
+
```
|
|
152
|
+
|
|
153
|
+
```tsx
|
|
154
|
+
// lib/utils/cn.ts
|
|
155
|
+
import { clsx, type ClassValue } from "clsx";
|
|
156
|
+
import { twMerge } from "tailwind-merge";
|
|
157
|
+
|
|
158
|
+
export function cn(...inputs: ClassValue[]) {
|
|
159
|
+
return twMerge(clsx(inputs));
|
|
160
|
+
}
|
|
161
|
+
```
|
|
162
|
+
|
|
163
|
+
## Usage
|
|
164
|
+
|
|
165
|
+
### Basic Usage
|
|
166
|
+
|
|
167
|
+
```tsx
|
|
168
|
+
import { SiriOrb } from "@/components/smoothui/ui/SiriOrb";
|
|
169
|
+
|
|
170
|
+
export default function App() {
|
|
171
|
+
return (
|
|
172
|
+
<div className="flex min-h-screen items-center justify-center">
|
|
173
|
+
<SiriOrb
|
|
174
|
+
size="200px"
|
|
175
|
+
colors={{
|
|
176
|
+
bg: "oklch(95% 0.02 264.695)",
|
|
177
|
+
c1: "oklch(75% 0.15 350)",
|
|
178
|
+
c2: "oklch(80% 0.12 200)",
|
|
179
|
+
c3: "oklch(78% 0.14 280)",
|
|
180
|
+
}}
|
|
181
|
+
animationDuration={20}
|
|
182
|
+
/>
|
|
183
|
+
</div>
|
|
184
|
+
);
|
|
185
|
+
}
|
|
186
|
+
```
|
|
187
|
+
|
|
188
|
+
### Advanced Usage
|
|
189
|
+
|
|
190
|
+
```tsx
|
|
191
|
+
import { RichPopover } from "@/components/smoothui/ui/RichPopover";
|
|
192
|
+
import { ScrollableCardStack } from "@/components/smoothui/ui/ScrollableCardStack";
|
|
193
|
+
|
|
194
|
+
export default function Dashboard() {
|
|
195
|
+
const cards = [
|
|
196
|
+
{
|
|
197
|
+
id: "1",
|
|
198
|
+
name: "John Doe",
|
|
199
|
+
handle: "@johndoe",
|
|
200
|
+
avatar: "/avatars/john.jpg",
|
|
201
|
+
video: "/videos/john.mp4",
|
|
202
|
+
href: "https://twitter.com/johndoe",
|
|
203
|
+
},
|
|
204
|
+
// ... more cards
|
|
205
|
+
];
|
|
206
|
+
|
|
207
|
+
return (
|
|
208
|
+
<div className="space-y-8">
|
|
209
|
+
<RichPopover />
|
|
210
|
+
<ScrollableCardStack items={cards} />
|
|
211
|
+
</div>
|
|
212
|
+
);
|
|
213
|
+
}
|
|
214
|
+
```
|
|
215
|
+
|
|
216
|
+
## Available Components
|
|
217
|
+
|
|
218
|
+
SmoothUI includes a wide variety of components:
|
|
219
|
+
|
|
220
|
+
### UI Components
|
|
221
|
+
|
|
222
|
+
- **SiriOrb** - Animated orb with smooth color transitions
|
|
223
|
+
- **RichPopover** - Advanced popover with rich content
|
|
224
|
+
- **ScrollableCardStack** - Interactive card stack with smooth scrolling
|
|
225
|
+
- **AnimatedInput** - Input field with smooth animations
|
|
226
|
+
- **DynamicIsland** - iOS-style dynamic island component
|
|
227
|
+
- **FluidMorph** - Fluid morphing animations
|
|
228
|
+
- **MatrixCard** - Matrix-style card with particle effects
|
|
229
|
+
|
|
230
|
+
### Interactive Components
|
|
231
|
+
|
|
232
|
+
- **CursorFollow** - Custom cursor following component
|
|
233
|
+
- **ScrambleHover** - Text scramble effect on hover
|
|
234
|
+
- **WaveText** - Animated wave text effect
|
|
235
|
+
- **TypewriterText** - Typewriter text animation
|
|
236
|
+
|
|
237
|
+
### Layout Components
|
|
238
|
+
|
|
239
|
+
- **ExpandableCards** - Expandable card layout
|
|
240
|
+
- **ScrollableCardStack** - Stack of scrollable cards
|
|
241
|
+
- **AppDownloadStack** - App download showcase
|
|
242
|
+
|
|
243
|
+
### Utility Components
|
|
244
|
+
|
|
245
|
+
- **ButtonCopy** - Copy button with feedback
|
|
246
|
+
- **ClipCornersButton** - Button with clipped corners
|
|
247
|
+
- **DotMorphButton** - Button with morphing dot animation
|
|
248
|
+
|
|
249
|
+
[View all components →](https://smoothui.dev)
|
|
250
|
+
|
|
251
|
+
## MCP Support
|
|
252
|
+
|
|
253
|
+
SmoothUI is fully compatible with the **shadcn MCP server**, enabling AI assistants to discover and install components automatically.
|
|
254
|
+
|
|
255
|
+
### 🤖 AI Assistant Integration
|
|
256
|
+
|
|
257
|
+
With MCP support, AI assistants like **Claude**, **Cursor**, and **GitHub Copilot** can:
|
|
258
|
+
|
|
259
|
+
- **Discover Components**: Browse all available SmoothUI components
|
|
260
|
+
- **Install Components**: Automatically install components with dependencies
|
|
261
|
+
- **Provide Usage Examples**: Get code examples and integration help
|
|
262
|
+
- **Smart Suggestions**: Receive intelligent component recommendations
|
|
263
|
+
|
|
264
|
+
### Quick MCP Setup
|
|
265
|
+
|
|
266
|
+
1. **Configure your registry** in `components.json`:
|
|
267
|
+
|
|
268
|
+
```json
|
|
269
|
+
{
|
|
270
|
+
"registries": {
|
|
271
|
+
"@smoothui": "https://smoothui.dev/r/{name}.json"
|
|
272
|
+
}
|
|
273
|
+
}
|
|
274
|
+
```
|
|
275
|
+
|
|
276
|
+
2. **Install MCP server**:
|
|
277
|
+
|
|
278
|
+
```bash
|
|
279
|
+
npx shadcn@latest mcp init --client claude
|
|
280
|
+
# or for Cursor: npx shadcn@latest mcp init --client cursor
|
|
281
|
+
# or for VS Code: npx shadcn@latest mcp init --client vscode
|
|
282
|
+
```
|
|
283
|
+
|
|
284
|
+
3. **Try these prompts**:
|
|
285
|
+
|
|
286
|
+
- "Show me the components in the smoothui registry"
|
|
287
|
+
- "Install the SiriOrb component from smoothui"
|
|
288
|
+
- "Create a landing page using smoothui components"
|
|
289
|
+
|
|
290
|
+
[Learn more about MCP support →](https://smoothui.dev/doc/mcp)
|
|
291
|
+
|
|
292
|
+
## Registry System
|
|
293
|
+
|
|
294
|
+
SmoothUI uses a custom registry system compatible with shadcn CLI v3. Each component includes:
|
|
295
|
+
|
|
296
|
+
### Automatic Dependencies
|
|
297
|
+
|
|
298
|
+
- **Package Dependencies**: Required npm packages are automatically included
|
|
299
|
+
- **Utility Files**: Shared utilities like `cn` are automatically bundled
|
|
300
|
+
- **Import Paths**: All import paths are automatically resolved
|
|
301
|
+
|
|
302
|
+
### Component Structure
|
|
303
|
+
|
|
304
|
+
When you install a component, you get:
|
|
305
|
+
|
|
306
|
+
```
|
|
307
|
+
components/smoothui/ui/
|
|
308
|
+
├── ComponentName.tsx # Main component file
|
|
309
|
+
lib/utils/
|
|
310
|
+
└── cn.ts # Utility functions (if needed)
|
|
311
|
+
```
|
|
312
|
+
|
|
313
|
+
### Registry Features
|
|
314
|
+
|
|
315
|
+
- **Self-contained**: Each component includes all necessary dependencies
|
|
316
|
+
- **Type-safe**: Full TypeScript support with proper types
|
|
317
|
+
- **Optimized**: Components are optimized for performance
|
|
318
|
+
- **Accessible**: Built-in accessibility features
|
|
319
|
+
|
|
320
|
+
## Troubleshooting
|
|
321
|
+
|
|
322
|
+
### Common Issues
|
|
323
|
+
|
|
324
|
+
#### 1. Authentication Error (401)
|
|
325
|
+
|
|
326
|
+
**Error**: `You are not authorized to access the item`
|
|
327
|
+
|
|
328
|
+
**Solution**: This usually happens with Vercel preview deployments. Use the production URL:
|
|
329
|
+
|
|
330
|
+
```json
|
|
331
|
+
{
|
|
332
|
+
"registries": {
|
|
333
|
+
"@smoothui": "https://smoothui.dev/r/{name}.json"
|
|
334
|
+
}
|
|
335
|
+
}
|
|
336
|
+
```
|
|
337
|
+
|
|
338
|
+
#### 2. Registry Not Found
|
|
339
|
+
|
|
340
|
+
**Error**: `The item at https://smoothui.dev/r/registry.json was not found`
|
|
341
|
+
|
|
342
|
+
**Solution**: The search command might not work as expected. Install components directly:
|
|
343
|
+
|
|
344
|
+
```bash
|
|
345
|
+
npx shadcn@latest add @smoothui/siri-orb
|
|
346
|
+
```
|
|
347
|
+
|
|
348
|
+
#### 3. Import Path Issues
|
|
349
|
+
|
|
350
|
+
**Error**: `Cannot find module '@/lib/utils/cn'`
|
|
351
|
+
|
|
352
|
+
**Solution**: Make sure your `tsconfig.json` includes the path alias:
|
|
353
|
+
|
|
354
|
+
```json
|
|
355
|
+
{
|
|
356
|
+
"compilerOptions": {
|
|
357
|
+
"paths": {
|
|
358
|
+
"@/*": ["./src/*"]
|
|
359
|
+
}
|
|
360
|
+
}
|
|
361
|
+
}
|
|
362
|
+
```
|
|
363
|
+
|
|
364
|
+
#### 4. Missing Dependencies
|
|
365
|
+
|
|
366
|
+
**Error**: `Cannot find module 'clsx'`
|
|
367
|
+
|
|
368
|
+
**Solution**: Install missing dependencies:
|
|
369
|
+
|
|
370
|
+
```bash
|
|
371
|
+
pnpm add clsx tailwind-merge motion
|
|
372
|
+
```
|
|
373
|
+
|
|
374
|
+
### Getting Help
|
|
375
|
+
|
|
376
|
+
- **Documentation**: Visit [smoothui.dev](https://smoothui.dev) for detailed documentation
|
|
377
|
+
- **Issues**: Report bugs on [GitHub Issues](https://github.com/educlopez/smoothui/issues)
|
|
378
|
+
- **Discussions**: Join discussions on [GitHub Discussions](https://github.com/educlopez/smoothui/discussions)
|
|
379
|
+
|
|
380
|
+
## Contributing
|
|
381
|
+
|
|
382
|
+
We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for details.
|
|
383
|
+
|
|
384
|
+
### Development Setup
|
|
385
|
+
|
|
386
|
+
1. **Clone the repository**:
|
|
387
|
+
|
|
388
|
+
```bash
|
|
389
|
+
git clone https://github.com/educlopez/smoothui.git
|
|
390
|
+
cd smoothui
|
|
391
|
+
```
|
|
392
|
+
|
|
393
|
+
2. **Install dependencies**:
|
|
394
|
+
|
|
395
|
+
```bash
|
|
396
|
+
pnpm install
|
|
397
|
+
```
|
|
398
|
+
|
|
399
|
+
3. **Start development server**:
|
|
400
|
+
|
|
401
|
+
```bash
|
|
402
|
+
pnpm dev
|
|
403
|
+
```
|
|
404
|
+
|
|
405
|
+
4. **Build registry**:
|
|
406
|
+
|
|
407
|
+
```bash
|
|
408
|
+
pnpm run build:registry
|
|
409
|
+
```
|
|
410
|
+
|
|
411
|
+
## License
|
|
412
|
+
|
|
413
|
+
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
|
package/README.md
CHANGED
|
@@ -1,463 +1,71 @@
|
|
|
1
|
-
#
|
|
1
|
+
# smoothui-cli
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
<div align="center">
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
[](https://actions-badge.atrox.dev/educlopez/smoothui/goto?ref=main)
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
[](https://smoothui.dev)
|
|
17
|
-
|
|
18
|
-
</div>
|
|
19
|
-
|
|
20
|
-
SmoothUI is a collection of beautifully designed components with smooth animations built with React, Tailwind CSS, and Motion. This project aims to provide developers with a set of reusable UI components that enhance user experience through delightful animations and modern design patterns.
|
|
21
|
-
|
|
22
|
-
## Table of Contents
|
|
23
|
-
|
|
24
|
-
- [SmoothUI](#smoothui)
|
|
25
|
-
- [Table of Contents](#table-of-contents)
|
|
26
|
-
- [Features](#features)
|
|
27
|
-
- [Quick Start](#quick-start)
|
|
28
|
-
- [Installation](#installation)
|
|
29
|
-
- [Using shadcn CLI v3 (Recommended)](#using-shadcn-cli-v3-recommended)
|
|
30
|
-
- [Step 1: Configure the Registry](#step-1-configure-the-registry)
|
|
31
|
-
- [Step 2: Install Components](#step-2-install-components)
|
|
32
|
-
- [Step 3: Use Components](#step-3-use-components)
|
|
33
|
-
- [Available Commands](#available-commands)
|
|
34
|
-
- [Manual Installation](#manual-installation)
|
|
35
|
-
- [Usage](#usage)
|
|
36
|
-
- [Basic Usage](#basic-usage)
|
|
37
|
-
- [Advanced Usage](#advanced-usage)
|
|
38
|
-
- [Available Components](#available-components)
|
|
39
|
-
- [UI Components](#ui-components)
|
|
40
|
-
- [Interactive Components](#interactive-components)
|
|
41
|
-
- [Layout Components](#layout-components)
|
|
42
|
-
- [Utility Components](#utility-components)
|
|
43
|
-
- [MCP Support](#mcp-support)
|
|
44
|
-
- [🤖 AI Assistant Integration](#-ai-assistant-integration)
|
|
45
|
-
- [Quick MCP Setup](#quick-mcp-setup)
|
|
46
|
-
- [Registry System](#registry-system)
|
|
47
|
-
- [Automatic Dependencies](#automatic-dependencies)
|
|
48
|
-
- [Component Structure](#component-structure)
|
|
49
|
-
- [Registry Features](#registry-features)
|
|
50
|
-
- [Troubleshooting](#troubleshooting)
|
|
51
|
-
- [Common Issues](#common-issues)
|
|
52
|
-
- [1. Authentication Error (401)](#1-authentication-error-401)
|
|
53
|
-
- [2. Registry Not Found](#2-registry-not-found)
|
|
54
|
-
- [3. Import Path Issues](#3-import-path-issues)
|
|
55
|
-
- [4. Missing Dependencies](#4-missing-dependencies)
|
|
56
|
-
- [Getting Help](#getting-help)
|
|
57
|
-
- [Contributing](#contributing)
|
|
58
|
-
- [Development Setup](#development-setup)
|
|
59
|
-
- [License](#license)
|
|
60
|
-
|
|
61
|
-
## Features
|
|
62
|
-
|
|
63
|
-
- **Modern Design System**: A cohesive and contemporary design language with a new mascot called Smoothy
|
|
64
|
-
- **Smooth Animations**: Built-in animations powered by Motion for delightful user experiences
|
|
65
|
-
- **Responsive Design**: Fully responsive components designed with Tailwind CSS
|
|
66
|
-
- **Dark Mode Support**: Components support both light and dark themes out of the box
|
|
67
|
-
- **Color Customization**: Dynamic color switcher for easy theme customization
|
|
68
|
-
- **Documentation**: Comprehensive documentation with props, examples, and usage guidelines
|
|
69
|
-
- **Accessibility**: Enhanced accessibility features across all components
|
|
70
|
-
- **TypeScript Support**: Full TypeScript support with type definitions
|
|
71
|
-
- **Easy Integration**: Simple API for integrating components into your projects
|
|
72
|
-
- **shadcn CLI v3 Support**: Full compatibility with the new shadcn CLI v3 namespace system
|
|
73
|
-
|
|
74
|
-
## Quick Start
|
|
75
|
-
|
|
76
|
-
Get started with SmoothUI in just a few steps:
|
|
77
|
-
|
|
78
|
-
1. **Add the registry** to your `components.json`:
|
|
79
|
-
|
|
80
|
-
```json
|
|
81
|
-
{
|
|
82
|
-
"registries": {
|
|
83
|
-
"@smoothui": "https://smoothui.dev/r/{name}.json"
|
|
84
|
-
}
|
|
85
|
-
}
|
|
86
|
-
```
|
|
87
|
-
|
|
88
|
-
2. **Install a component**:
|
|
89
|
-
|
|
90
|
-
```bash
|
|
91
|
-
npx shadcn@latest add @smoothui/siri-orb
|
|
92
|
-
```
|
|
93
|
-
|
|
94
|
-
3. **Use the component**:
|
|
95
|
-
|
|
96
|
-
```tsx
|
|
97
|
-
import { SiriOrb } from "@/components/smoothui/ui/SiriOrb";
|
|
98
|
-
|
|
99
|
-
export default function App() {
|
|
100
|
-
return <SiriOrb size="200px" />;
|
|
101
|
-
}
|
|
102
|
-
```
|
|
3
|
+
CLI to install [SmoothUI](https://smoothui.dev) components - beautifully designed React components with smooth animations.
|
|
103
4
|
|
|
104
5
|
## Installation
|
|
105
6
|
|
|
106
|
-
### Using shadcn CLI v3 (Recommended)
|
|
107
|
-
|
|
108
|
-
SmoothUI is fully compatible with the new shadcn CLI v3 namespace system. This is the easiest way to install and manage SmoothUI components.
|
|
109
|
-
|
|
110
|
-
#### Step 1: Configure the Registry
|
|
111
|
-
|
|
112
|
-
Add the SmoothUI registry to your `components.json` file:
|
|
113
|
-
|
|
114
|
-
```json
|
|
115
|
-
{
|
|
116
|
-
"$schema": "https://ui.shadcn.com/schema.json",
|
|
117
|
-
"style": "new-york",
|
|
118
|
-
"rsc": true,
|
|
119
|
-
"tsx": true,
|
|
120
|
-
"tailwind": {
|
|
121
|
-
"config": "tailwind.config.js",
|
|
122
|
-
"css": "src/app/globals.css",
|
|
123
|
-
"baseColor": "neutral",
|
|
124
|
-
"cssVariables": true,
|
|
125
|
-
"prefix": ""
|
|
126
|
-
},
|
|
127
|
-
"aliases": {
|
|
128
|
-
"components": "@/components",
|
|
129
|
-
"utils": "@/lib/utils",
|
|
130
|
-
"ui": "@/components/ui"
|
|
131
|
-
},
|
|
132
|
-
"registries": {
|
|
133
|
-
"@smoothui": "https://smoothui.dev/r/{name}.json"
|
|
134
|
-
}
|
|
135
|
-
}
|
|
136
|
-
```
|
|
137
|
-
|
|
138
|
-
#### Step 2: Install Components
|
|
139
|
-
|
|
140
|
-
Install components using the namespace:
|
|
141
|
-
|
|
142
7
|
```bash
|
|
143
|
-
|
|
144
|
-
npx shadcn@latest add @smoothui/siri-orb
|
|
145
|
-
|
|
146
|
-
# Install multiple components
|
|
147
|
-
npx shadcn@latest add @smoothui/rich-popover @smoothui/animated-input
|
|
148
|
-
|
|
149
|
-
# Install components with dependencies
|
|
150
|
-
npx shadcn@latest add @smoothui/scrollable-card-stack
|
|
8
|
+
npx smoothui-cli add siri-orb
|
|
151
9
|
```
|
|
152
10
|
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
Import and use the installed components:
|
|
156
|
-
|
|
157
|
-
```tsx
|
|
158
|
-
import { RichPopover } from "@/components/smoothui/ui/RichPopover";
|
|
159
|
-
import { SiriOrb } from "@/components/smoothui/ui/SiriOrb";
|
|
160
|
-
|
|
161
|
-
export default function App() {
|
|
162
|
-
return (
|
|
163
|
-
<div>
|
|
164
|
-
<SiriOrb size="200px" />
|
|
165
|
-
<RichPopover />
|
|
166
|
-
</div>
|
|
167
|
-
);
|
|
168
|
-
}
|
|
169
|
-
```
|
|
11
|
+
## Usage
|
|
170
12
|
|
|
171
|
-
|
|
13
|
+
### Add components
|
|
172
14
|
|
|
173
15
|
```bash
|
|
174
|
-
#
|
|
175
|
-
npx
|
|
176
|
-
|
|
177
|
-
# View component details before installation
|
|
178
|
-
npx shadcn@latest view @smoothui/siri-orb
|
|
16
|
+
# Add a single component
|
|
17
|
+
npx smoothui-cli add siri-orb
|
|
179
18
|
|
|
180
|
-
#
|
|
181
|
-
npx
|
|
182
|
-
```
|
|
183
|
-
|
|
184
|
-
### Manual Installation
|
|
185
|
-
|
|
186
|
-
If you prefer to install components manually, you can copy the component files directly:
|
|
187
|
-
|
|
188
|
-
1. **Install dependencies**:
|
|
19
|
+
# Add multiple components
|
|
20
|
+
npx smoothui-cli add siri-orb grid-loader animated-tabs
|
|
189
21
|
|
|
190
|
-
|
|
191
|
-
|
|
22
|
+
# Interactive mode - browse and select
|
|
23
|
+
npx smoothui-cli add
|
|
192
24
|
```
|
|
193
25
|
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
3. **Set up utilities**:
|
|
26
|
+
### List components
|
|
197
27
|
|
|
198
28
|
```bash
|
|
199
|
-
#
|
|
200
|
-
|
|
201
|
-
```
|
|
202
|
-
|
|
203
|
-
```tsx
|
|
204
|
-
// lib/utils/cn.ts
|
|
205
|
-
import { clsx, type ClassValue } from "clsx";
|
|
206
|
-
import { twMerge } from "tailwind-merge";
|
|
207
|
-
|
|
208
|
-
export function cn(...inputs: ClassValue[]) {
|
|
209
|
-
return twMerge(clsx(inputs));
|
|
210
|
-
}
|
|
211
|
-
```
|
|
212
|
-
|
|
213
|
-
## Usage
|
|
214
|
-
|
|
215
|
-
### Basic Usage
|
|
216
|
-
|
|
217
|
-
```tsx
|
|
218
|
-
import { SiriOrb } from "@/components/smoothui/ui/SiriOrb";
|
|
219
|
-
|
|
220
|
-
export default function App() {
|
|
221
|
-
return (
|
|
222
|
-
<div className="flex min-h-screen items-center justify-center">
|
|
223
|
-
<SiriOrb
|
|
224
|
-
size="200px"
|
|
225
|
-
colors={{
|
|
226
|
-
bg: "oklch(95% 0.02 264.695)",
|
|
227
|
-
c1: "oklch(75% 0.15 350)",
|
|
228
|
-
c2: "oklch(80% 0.12 200)",
|
|
229
|
-
c3: "oklch(78% 0.14 280)",
|
|
230
|
-
}}
|
|
231
|
-
animationDuration={20}
|
|
232
|
-
/>
|
|
233
|
-
</div>
|
|
234
|
-
);
|
|
235
|
-
}
|
|
236
|
-
```
|
|
237
|
-
|
|
238
|
-
### Advanced Usage
|
|
239
|
-
|
|
240
|
-
```tsx
|
|
241
|
-
import { RichPopover } from "@/components/smoothui/ui/RichPopover";
|
|
242
|
-
import { ScrollableCardStack } from "@/components/smoothui/ui/ScrollableCardStack";
|
|
243
|
-
|
|
244
|
-
export default function Dashboard() {
|
|
245
|
-
const cards = [
|
|
246
|
-
{
|
|
247
|
-
id: "1",
|
|
248
|
-
name: "John Doe",
|
|
249
|
-
handle: "@johndoe",
|
|
250
|
-
avatar: "/avatars/john.jpg",
|
|
251
|
-
video: "/videos/john.mp4",
|
|
252
|
-
href: "https://twitter.com/johndoe",
|
|
253
|
-
},
|
|
254
|
-
// ... more cards
|
|
255
|
-
];
|
|
256
|
-
|
|
257
|
-
return (
|
|
258
|
-
<div className="space-y-8">
|
|
259
|
-
<RichPopover />
|
|
260
|
-
<ScrollableCardStack items={cards} />
|
|
261
|
-
</div>
|
|
262
|
-
);
|
|
263
|
-
}
|
|
264
|
-
```
|
|
265
|
-
|
|
266
|
-
## Available Components
|
|
267
|
-
|
|
268
|
-
SmoothUI includes a wide variety of components:
|
|
269
|
-
|
|
270
|
-
### UI Components
|
|
29
|
+
# Show all available components
|
|
30
|
+
npx smoothui-cli list
|
|
271
31
|
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
- **ScrollableCardStack** - Interactive card stack with smooth scrolling
|
|
275
|
-
- **AnimatedInput** - Input field with smooth animations
|
|
276
|
-
- **DynamicIsland** - iOS-style dynamic island component
|
|
277
|
-
- **FluidMorph** - Fluid morphing animations
|
|
278
|
-
- **MatrixCard** - Matrix-style card with particle effects
|
|
279
|
-
|
|
280
|
-
### Interactive Components
|
|
281
|
-
|
|
282
|
-
- **CursorFollow** - Custom cursor following component
|
|
283
|
-
- **ScrambleHover** - Text scramble effect on hover
|
|
284
|
-
- **WaveText** - Animated wave text effect
|
|
285
|
-
- **TypewriterText** - Typewriter text animation
|
|
286
|
-
|
|
287
|
-
### Layout Components
|
|
288
|
-
|
|
289
|
-
- **ExpandableCards** - Expandable card layout
|
|
290
|
-
- **ScrollableCardStack** - Stack of scrollable cards
|
|
291
|
-
- **AppDownloadStack** - App download showcase
|
|
292
|
-
|
|
293
|
-
### Utility Components
|
|
294
|
-
|
|
295
|
-
- **ButtonCopy** - Copy button with feedback
|
|
296
|
-
- **ClipCornersButton** - Button with clipped corners
|
|
297
|
-
- **DotMorphButton** - Button with morphing dot animation
|
|
298
|
-
|
|
299
|
-
[View all components →](https://smoothui.dev)
|
|
300
|
-
|
|
301
|
-
## MCP Support
|
|
302
|
-
|
|
303
|
-
SmoothUI is fully compatible with the **shadcn MCP server**, enabling AI assistants to discover and install components automatically.
|
|
304
|
-
|
|
305
|
-
### 🤖 AI Assistant Integration
|
|
306
|
-
|
|
307
|
-
With MCP support, AI assistants like **Claude**, **Cursor**, and **GitHub Copilot** can:
|
|
308
|
-
|
|
309
|
-
- **Discover Components**: Browse all available SmoothUI components
|
|
310
|
-
- **Install Components**: Automatically install components with dependencies
|
|
311
|
-
- **Provide Usage Examples**: Get code examples and integration help
|
|
312
|
-
- **Smart Suggestions**: Receive intelligent component recommendations
|
|
313
|
-
|
|
314
|
-
### Quick MCP Setup
|
|
315
|
-
|
|
316
|
-
1. **Configure your registry** in `components.json`:
|
|
317
|
-
|
|
318
|
-
```json
|
|
319
|
-
{
|
|
320
|
-
"registries": {
|
|
321
|
-
"@smoothui": "https://smoothui.dev/r/{name}.json"
|
|
322
|
-
}
|
|
323
|
-
}
|
|
32
|
+
# JSON output
|
|
33
|
+
npx smoothui-cli list --json
|
|
324
34
|
```
|
|
325
35
|
|
|
326
|
-
|
|
36
|
+
### Options
|
|
327
37
|
|
|
328
38
|
```bash
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
# or for VS Code: npx shadcn@latest mcp init --client vscode
|
|
332
|
-
```
|
|
333
|
-
|
|
334
|
-
3. **Try these prompts**:
|
|
335
|
-
|
|
336
|
-
- "Show me the components in the smoothui registry"
|
|
337
|
-
- "Install the SiriOrb component from smoothui"
|
|
338
|
-
- "Create a landing page using smoothui components"
|
|
339
|
-
|
|
340
|
-
[Learn more about MCP support →](https://smoothui.dev/doc/mcp)
|
|
341
|
-
|
|
342
|
-
## Registry System
|
|
343
|
-
|
|
344
|
-
SmoothUI uses a custom registry system compatible with shadcn CLI v3. Each component includes:
|
|
345
|
-
|
|
346
|
-
### Automatic Dependencies
|
|
347
|
-
|
|
348
|
-
- **Package Dependencies**: Required npm packages are automatically included
|
|
349
|
-
- **Utility Files**: Shared utilities like `cn` are automatically bundled
|
|
350
|
-
- **Import Paths**: All import paths are automatically resolved
|
|
351
|
-
|
|
352
|
-
### Component Structure
|
|
353
|
-
|
|
354
|
-
When you install a component, you get:
|
|
39
|
+
# Custom install path
|
|
40
|
+
npx smoothui-cli add siri-orb --path src/components/ui
|
|
355
41
|
|
|
42
|
+
# Force overwrite existing files
|
|
43
|
+
npx smoothui-cli add siri-orb --force
|
|
356
44
|
```
|
|
357
|
-
components/smoothui/ui/
|
|
358
|
-
├── ComponentName.tsx # Main component file
|
|
359
|
-
lib/utils/
|
|
360
|
-
└── cn.ts # Utility functions (if needed)
|
|
361
|
-
```
|
|
362
|
-
|
|
363
|
-
### Registry Features
|
|
364
|
-
|
|
365
|
-
- **Self-contained**: Each component includes all necessary dependencies
|
|
366
|
-
- **Type-safe**: Full TypeScript support with proper types
|
|
367
|
-
- **Optimized**: Components are optimized for performance
|
|
368
|
-
- **Accessible**: Built-in accessibility features
|
|
369
|
-
|
|
370
|
-
## Troubleshooting
|
|
371
|
-
|
|
372
|
-
### Common Issues
|
|
373
|
-
|
|
374
|
-
#### 1. Authentication Error (401)
|
|
375
|
-
|
|
376
|
-
**Error**: `You are not authorized to access the item`
|
|
377
|
-
|
|
378
|
-
**Solution**: This usually happens with Vercel preview deployments. Use the production URL:
|
|
379
45
|
|
|
380
|
-
|
|
381
|
-
{
|
|
382
|
-
"registries": {
|
|
383
|
-
"@smoothui": "https://smoothui.dev/r/{name}.json"
|
|
384
|
-
}
|
|
385
|
-
}
|
|
386
|
-
```
|
|
46
|
+
## Features
|
|
387
47
|
|
|
388
|
-
|
|
48
|
+
- Interactive component picker with search and categories
|
|
49
|
+
- Auto-detects package manager (npm, pnpm, yarn, bun)
|
|
50
|
+
- Auto-detects component paths and tsconfig aliases
|
|
51
|
+
- Shows dependency tree before installation
|
|
52
|
+
- Handles file conflicts with overwrite prompts
|
|
53
|
+
- Auto-installs npm dependencies
|
|
389
54
|
|
|
390
|
-
|
|
55
|
+
## Alternative: shadcn CLI
|
|
391
56
|
|
|
392
|
-
|
|
57
|
+
You can also use the shadcn CLI with the `@smoothui` registry:
|
|
393
58
|
|
|
394
59
|
```bash
|
|
395
60
|
npx shadcn@latest add @smoothui/siri-orb
|
|
396
61
|
```
|
|
397
62
|
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
**Error**: `Cannot find module '@/lib/utils/cn'`
|
|
401
|
-
|
|
402
|
-
**Solution**: Make sure your `tsconfig.json` includes the path alias:
|
|
403
|
-
|
|
404
|
-
```json
|
|
405
|
-
{
|
|
406
|
-
"compilerOptions": {
|
|
407
|
-
"paths": {
|
|
408
|
-
"@/*": ["./src/*"]
|
|
409
|
-
}
|
|
410
|
-
}
|
|
411
|
-
}
|
|
412
|
-
```
|
|
413
|
-
|
|
414
|
-
#### 4. Missing Dependencies
|
|
415
|
-
|
|
416
|
-
**Error**: `Cannot find module 'clsx'`
|
|
417
|
-
|
|
418
|
-
**Solution**: Install missing dependencies:
|
|
419
|
-
|
|
420
|
-
```bash
|
|
421
|
-
pnpm add clsx tailwind-merge motion
|
|
422
|
-
```
|
|
423
|
-
|
|
424
|
-
### Getting Help
|
|
425
|
-
|
|
426
|
-
- **Documentation**: Visit [smoothui.dev](https://smoothui.dev) for detailed documentation
|
|
427
|
-
- **Issues**: Report bugs on [GitHub Issues](https://github.com/educlopez/smoothui/issues)
|
|
428
|
-
- **Discussions**: Join discussions on [GitHub Discussions](https://github.com/educlopez/smoothui/discussions)
|
|
429
|
-
|
|
430
|
-
## Contributing
|
|
431
|
-
|
|
432
|
-
We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for details.
|
|
433
|
-
|
|
434
|
-
### Development Setup
|
|
435
|
-
|
|
436
|
-
1. **Clone the repository**:
|
|
437
|
-
|
|
438
|
-
```bash
|
|
439
|
-
git clone https://github.com/educlopez/smoothui.git
|
|
440
|
-
cd smoothui
|
|
441
|
-
```
|
|
442
|
-
|
|
443
|
-
2. **Install dependencies**:
|
|
444
|
-
|
|
445
|
-
```bash
|
|
446
|
-
pnpm install
|
|
447
|
-
```
|
|
448
|
-
|
|
449
|
-
3. **Start development server**:
|
|
450
|
-
|
|
451
|
-
```bash
|
|
452
|
-
pnpm dev
|
|
453
|
-
```
|
|
454
|
-
|
|
455
|
-
4. **Build registry**:
|
|
63
|
+
## Links
|
|
456
64
|
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
65
|
+
- [Documentation](https://smoothui.dev)
|
|
66
|
+
- [Components](https://smoothui.dev/docs/components)
|
|
67
|
+
- [GitHub](https://github.com/educlopez/smoothui)
|
|
460
68
|
|
|
461
69
|
## License
|
|
462
70
|
|
|
463
|
-
|
|
71
|
+
MIT
|
package/README.npm.md
ADDED
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
# smoothui-cli
|
|
2
|
+
|
|
3
|
+
CLI to install [SmoothUI](https://smoothui.dev) components - beautifully designed React components with smooth animations.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npx smoothui-cli add siri-orb
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Usage
|
|
12
|
+
|
|
13
|
+
### Add components
|
|
14
|
+
|
|
15
|
+
```bash
|
|
16
|
+
# Add a single component
|
|
17
|
+
npx smoothui-cli add siri-orb
|
|
18
|
+
|
|
19
|
+
# Add multiple components
|
|
20
|
+
npx smoothui-cli add siri-orb grid-loader animated-tabs
|
|
21
|
+
|
|
22
|
+
# Interactive mode - browse and select
|
|
23
|
+
npx smoothui-cli add
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
### List components
|
|
27
|
+
|
|
28
|
+
```bash
|
|
29
|
+
# Show all available components
|
|
30
|
+
npx smoothui-cli list
|
|
31
|
+
|
|
32
|
+
# JSON output
|
|
33
|
+
npx smoothui-cli list --json
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
### Options
|
|
37
|
+
|
|
38
|
+
```bash
|
|
39
|
+
# Custom install path
|
|
40
|
+
npx smoothui-cli add siri-orb --path src/components/ui
|
|
41
|
+
|
|
42
|
+
# Force overwrite existing files
|
|
43
|
+
npx smoothui-cli add siri-orb --force
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
## Features
|
|
47
|
+
|
|
48
|
+
- Interactive component picker with search and categories
|
|
49
|
+
- Auto-detects package manager (npm, pnpm, yarn, bun)
|
|
50
|
+
- Auto-detects component paths and tsconfig aliases
|
|
51
|
+
- Shows dependency tree before installation
|
|
52
|
+
- Handles file conflicts with overwrite prompts
|
|
53
|
+
- Auto-installs npm dependencies
|
|
54
|
+
|
|
55
|
+
## Alternative: shadcn CLI
|
|
56
|
+
|
|
57
|
+
You can also use the shadcn CLI with the `@smoothui` registry:
|
|
58
|
+
|
|
59
|
+
```bash
|
|
60
|
+
npx shadcn@latest add @smoothui/siri-orb
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
## Links
|
|
64
|
+
|
|
65
|
+
- [Documentation](https://smoothui.dev)
|
|
66
|
+
- [Components](https://smoothui.dev/docs/components)
|
|
67
|
+
- [GitHub](https://github.com/educlopez/smoothui)
|
|
68
|
+
|
|
69
|
+
## License
|
|
70
|
+
|
|
71
|
+
MIT
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "smoothui-cli",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.3",
|
|
4
4
|
"author": "educalvolpz",
|
|
5
5
|
"description": "CLI to install SmoothUI components - beautifully designed React components with smooth animations",
|
|
6
6
|
"private": false,
|
|
@@ -25,12 +25,16 @@
|
|
|
25
25
|
"url": "https://github.com/educlopez/smoothui/issues"
|
|
26
26
|
},
|
|
27
27
|
"bin": {
|
|
28
|
-
"smoothui": "dist/index.js"
|
|
28
|
+
"smoothui": "dist/index.js",
|
|
29
|
+
"smoothui-cli": "dist/index.js"
|
|
29
30
|
},
|
|
30
31
|
"files": [
|
|
31
|
-
"dist/index.js"
|
|
32
|
+
"dist/index.js",
|
|
33
|
+
"README.md"
|
|
32
34
|
],
|
|
33
35
|
"scripts": {
|
|
36
|
+
"prepublishOnly": "cp README.md README.github.md && cp README.npm.md README.md",
|
|
37
|
+
"postpublish": "cp README.github.md README.md && rm README.github.md",
|
|
34
38
|
"build": "turbo build",
|
|
35
39
|
"dev": "turbo dev",
|
|
36
40
|
"check": "ultracite check",
|