@creative-tim/ui 0.4.0-beta.0 → 0.4.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.
Files changed (2) hide show
  1. package/README.md +236 -7
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -17,9 +17,27 @@ Built by [Creative Tim](https://creative-tim.com) - Based on shadcn/ui registry
17
17
 
18
18
  ## Installation
19
19
 
20
+ ### Quick Start
21
+
20
22
  ```bash
23
+ # Initialize Creative Tim UI in your project
21
24
  npx @creative-tim/ui@latest init
25
+
26
+ # Add your first component
27
+ npx @creative-tim/ui@latest add button
28
+ ```
29
+
30
+ ### Install Specific Version
31
+
32
+ ```bash
33
+ # Install the latest stable version
22
34
  npx @creative-tim/ui@latest add button
35
+
36
+ # Install the beta version
37
+ npx @creative-tim/ui@beta add button
38
+
39
+ # Install a specific version
40
+ npx @creative-tim/ui@0.4.0 add button
23
41
  ```
24
42
 
25
43
  ## Usage
@@ -56,23 +74,67 @@ npx @creative-tim/ui@latest add testimonials-01
56
74
  - `-p, --path <path>` - Specify installation path
57
75
  - `--api-key <key>` - API key for accessing private components
58
76
 
59
- ## Authentication
77
+ ## Premium Blocks Authentication
78
+
79
+ Some blocks and components are **premium** and require authentication. These include advanced testimonial sections, pricing tables, and specialized UI components.
60
80
 
61
- Some components are private and require authentication. You can authenticate in three ways:
81
+ ### How to Get Your API Key
62
82
 
63
- ### 1. Environment Variable (Recommended)
83
+ 1. Visit [Creative Tim Dashboard](https://creative-tim.com/dashboard)
84
+ 2. Navigate to **API Keys** section
85
+ 3. Copy your API key (starts with `pk_live_`)
86
+
87
+ ### Authentication Methods
88
+
89
+ #### 1. Environment Variable (Recommended for Development)
90
+
91
+ Set the environment variable in your shell:
64
92
 
65
93
  ```bash
94
+ # macOS/Linux
66
95
  export CREATIVE_TIM_UI_API_KEY=pk_live_your_key
96
+
97
+ # Windows (PowerShell)
98
+ $env:CREATIVE_TIM_UI_API_KEY="pk_live_your_key"
99
+
100
+ # Windows (CMD)
101
+ set CREATIVE_TIM_UI_API_KEY=pk_live_your_key
102
+ ```
103
+
104
+ Then install components normally:
105
+ ```bash
67
106
  npx @creative-tim/ui@latest add testimonials-06
68
107
  ```
69
108
 
70
- ### 2. Config File
109
+ Or set it inline:
110
+ ```bash
111
+ CREATIVE_TIM_UI_API_KEY=pk_live_your_key npx @creative-tim/ui@latest add testimonials-06
112
+ ```
113
+
114
+ #### 2. Config File (Recommended for Teams/CI/CD)
71
115
 
72
116
  Add authentication to your `components.json`:
73
117
 
74
118
  ```json
75
119
  {
120
+ "$schema": "https://ui.shadcn.com/schema.json",
121
+ "style": "new-york",
122
+ "rsc": true,
123
+ "tsx": true,
124
+ "tailwind": {
125
+ "config": "tailwind.config.ts",
126
+ "css": "app/globals.css",
127
+ "baseColor": "zinc",
128
+ "cssVariables": true,
129
+ "prefix": ""
130
+ },
131
+ "aliases": {
132
+ "components": "@/components",
133
+ "utils": "@/lib/utils",
134
+ "ui": "@/components/ui",
135
+ "lib": "@/lib",
136
+ "hooks": "@/hooks"
137
+ },
76
138
  "registries": {
77
139
  "@creative-tim": {
78
140
  "url": "https://www.creative-tim.com/ui/r/{name}.json",
@@ -84,18 +146,69 @@ Add authentication to your `components.json`:
84
146
  }
85
147
  ```
86
148
 
87
- Then use:
149
+ **Benefits:**
150
+ - Team members can use their own API keys
151
+ - Works seamlessly in CI/CD pipelines
152
+ - No need to pass `--api-key` flag every time
153
+ - Supports environment variable expansion (`${VAR_NAME}`)
154
+
155
+ Then use with the environment variable:
88
156
  ```bash
89
157
  CREATIVE_TIM_UI_API_KEY=pk_live_your_key npx @creative-tim/ui@latest add testimonials-06
90
158
  ```
91
159
 
92
- ### 3. Command Flag
160
+ #### 3. Command Flag (Quick Testing)
161
+
162
+ Pass the API key directly via command line:
93
163
 
94
164
  ```bash
95
165
  npx @creative-tim/ui@latest add testimonials-06 --api-key pk_live_your_key
96
166
  ```
97
167
 
98
- **Note:** You can get your API key from your [Creative Tim account dashboard](https://creative-tim.com/dashboard).
168
+ **Use this for:**
169
+ - Quick testing
170
+ - One-off installations
171
+ - When you don't want to configure environment variables
172
+
173
+ ### CI/CD Setup
174
+
175
+ For GitHub Actions, GitLab CI, or other CI/CD systems:
176
+
177
+ **GitHub Actions:**
178
+ ```yaml
179
+ - name: Install Premium Blocks
180
+ env:
181
+ CREATIVE_TIM_UI_API_KEY: ${{ secrets.CREATIVE_TIM_UI_API_KEY }}
182
+ run: npx @creative-tim/ui@latest add testimonials-06
183
+ ```
184
+
185
+ **GitLab CI:**
186
+ ```yaml
187
+ install:
188
+ script:
189
+ - export CREATIVE_TIM_UI_API_KEY=$CREATIVE_TIM_UI_API_KEY
190
+ - npx @creative-tim/ui@latest add testimonials-06
191
+ ```
192
+
193
+ ### Premium vs Free Components
194
+
195
+ | Type | Authentication | Examples |
196
+ |------|----------------|----------|
197
+ | **Free Components** | ❌ Not required | `button`, `card`, `avatar`, `testimonials-01` |
198
+ | **Premium Blocks** | ✅ Required | `testimonials-06`, `pricing-05`, `hero-07` |
199
+
200
+ ### Troubleshooting
201
+
202
+ **Error: 401 Unauthorized**
203
+ - Check your API key is valid
204
+ - Ensure environment variable is set correctly
205
+ - Verify you're using `CREATIVE_TIM_UI_API_KEY` (not `CREATIVE_TIM_API_KEY`)
206
+
207
+ **Error: 403 Forbidden**
208
+ - Your API key doesn't have access to this premium component
209
+ - Verify your subscription status at [Creative Tim Dashboard](https://creative-tim.com/dashboard)
210
+
211
+ **Note:** Never commit your API key directly in `components.json`. Always use environment variables!
99
212
 
100
213
  ## Component Types
101
214
 
@@ -117,6 +230,122 @@ npx @creative-tim/ui@latest add testimonials-01
117
230
  npx @creative-tim/ui@latest add web3-02
118
231
  ```
119
232
 
233
+ All available components can be found [here](https://creative-tim.com/ui/docs/components) or explore a list of example blocks [here](https://creative-tim.com/ui/blocks).
234
+
235
+ Explore our collection of ready-to-use blocks organized by category. Each block is fully customizable and can be added to your project with a single command.
236
+
237
+ ### Application UI
238
+
239
+ <table>
240
+ <tr>
241
+ <td width="25%">
242
+ <a href="https://creative-tim.com/ui/blocks/modals">
243
+ <img src="https://raw.githubusercontent.com/creativetimofficial/public-assets/refs/heads/master/david-ui/thumbs/modals-thumbnail.jpg" alt="Modals" />
244
+ <br/>
245
+ <strong>Modals</strong><br/>
246
+ <em>5 Blocks</em>
247
+ </a>
248
+ </td>
249
+ <td width="25%">
250
+ <a href="https://creative-tim.com/ui/blocks/account">
251
+ <img src="https://raw.githubusercontent.com/creativetimofficial/public-assets/refs/heads/master/david-ui/thumbs/account-thumbnail.jpg" alt="Account" />
252
+ <br/>
253
+ <strong>Account</strong><br/>
254
+ <em>7 Blocks</em>
255
+ </a>
256
+ </td>
257
+ <td width="25%">
258
+ <a href="https://creative-tim.com/ui/blocks/billing">
259
+ <img src="https://raw.githubusercontent.com/creativetimofficial/public-assets/refs/heads/master/david-ui/thumbs/billing-thumbnail.jpg" alt="Billing" />
260
+ <br/>
261
+ <strong>Billing</strong><br/>
262
+ <em>5 Blocks</em>
263
+ </a>
264
+ </td>
265
+ </tr>
266
+ </table>
267
+
268
+ ### Marketing
269
+
270
+ <table>
271
+ <tr>
272
+ <td width="25%">
273
+ <a href="https://creative-tim.com/ui/blocks/testimonials">
274
+ <img src="https://raw.githubusercontent.com/creativetimofficial/public-assets/refs/heads/master/david-ui/thumbs/testimonial-thumbnail.jpg" alt="Testimonial Sections" />
275
+ <br/>
276
+ <strong>Testimonial Sections</strong><br/>
277
+ <em>17 Blocks</em>
278
+ </a>
279
+ </td>
280
+ <td width="25%">
281
+ <a href="https://creative-tim.com/ui/blocks/contact">
282
+ <img src="https://raw.githubusercontent.com/creativetimofficial/public-assets/refs/heads/master/david-ui/thumbs/contact-us-thumbnail.jpg" alt="Contact Sections" />
283
+ <br/>
284
+ <strong>Contact Sections</strong><br/>
285
+ <em>15 Blocks</em>
286
+ </a>
287
+ </td>
288
+ <td width="25%">
289
+ <a href="https://creative-tim.com/ui/blocks/footers">
290
+ <img src="https://raw.githubusercontent.com/creativetimofficial/public-assets/refs/heads/master/david-ui/thumbs/footer-thumbnail.jpg" alt="Footers" />
291
+ <br/>
292
+ <strong>Footers</strong><br/>
293
+ <em>16 Blocks</em>
294
+ </a>
295
+ </td>
296
+ </tr>
297
+ <tr>
298
+ <td width="25%">
299
+ <a href="https://creative-tim.com/ui/blocks/faqs">
300
+ <img src="https://raw.githubusercontent.com/creativetimofficial/public-assets/refs/heads/master/david-ui/thumbs/faq-thumbnail.jpg" alt="FAQs" />
301
+ <br/>
302
+ <strong>FAQs</strong><br/>
303
+ <em>6 Blocks</em>
304
+ </a>
305
+ </td>
306
+ <td width="25%">
307
+ <a href="https://creative-tim.com/ui/blocks/blog">
308
+ <img src="https://raw.githubusercontent.com/creativetimofficial/public-assets/refs/heads/master/david-ui/thumbs/blog-posts-thumbnail.jpg" alt="Blog" />
309
+ <br/>
310
+ <strong>Blog</strong><br/>
311
+ <em>15 Blocks</em>
312
+ </a>
313
+ </td>
314
+ </tr>
315
+ </table>
316
+
317
+ ### Ecommerce UI
318
+ Ready-to-use blocks for product listings, shopping carts, and checkout flows.
319
+
320
+ <table>
321
+ <tr>
322
+ <td width="25%">
323
+ <a href="https://creative-tim.com/ui/blocks/ecommerce">
324
+ <img src="https://raw.githubusercontent.com/creativetimofficial/public-assets/refs/heads/master/david-ui/thumbs/ecommerce-thumbnail.jpg" alt="Ecommerce Sections" />
325
+ <br/>
326
+ <strong>Ecommerce Sections</strong><br/>
327
+ <em>14 Blocks</em>
328
+ </a>
329
+ </td>
330
+ </tr>
331
+ </table>
332
+
333
+ ### Web 3.0
334
+ Innovative sections built for decentralized applications, blockchain projects, and crypto platforms.
335
+
336
+ <table>
337
+ <tr>
338
+ <td width="25%">
339
+ <a href="https://creative-tim.com/ui/blocks/web3">
340
+ <img src="https://raw.githubusercontent.com/creativetimofficial/public-assets/refs/heads/master/david-ui/thumbs/collections-thumbnail.jpg" alt="Web 3.0 Cards" />
341
+ <br/>
342
+ <strong>Web 3.0 Cards</strong><br/>
343
+ <em>5 Blocks</em>
344
+ </a>
345
+ </td>
346
+ </tr>
347
+ </table>
348
+
120
349
  ## Documentation
121
350
 
122
351
  Visit [creative-tim.com/ui](https://creative-tim.com/ui/docs) for complete documentation.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@creative-tim/ui",
3
- "version": "0.4.0-beta.0",
3
+ "version": "0.4.0",
4
4
  "description": "A CLI for adding Creative Tim UI components, blocks and AI agents to your project",
5
5
  "author": {
6
6
  "name": "Creative Tim",