next-configure 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 +103 -0
- package/package.json +20 -3
package/README.md
ADDED
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
# next-configure
|
|
2
|
+
|
|
3
|
+
Zero-config CLI to Tailwind v4 + shadcn/ui theme and folder structure in Next.js App Router projects.
|
|
4
|
+
|
|
5
|
+
## Features
|
|
6
|
+
|
|
7
|
+
- **Next.js awareness**: Refuses to run outside a Next.js project (checks `next` in `dependencies` or `devDependencies`).
|
|
8
|
+
- **Smart `src` detection**: Puts generated folders under `src/` when it exists, otherwise in project root.
|
|
9
|
+
- **Optional shadcn/ui setup**: Can run `shadcn init` and install the `button` component for you.
|
|
10
|
+
- **Standard folders**: Can create `components`, `hooks`, and `utils` (no `pages` or `api`, App Router only).
|
|
11
|
+
- **Tailwind v4 theme generator**: Asks for primary/secondary colors and generates a Tailwind v4-compatible global theme.
|
|
12
|
+
|
|
13
|
+
## Installation
|
|
14
|
+
|
|
15
|
+
Use directly with `npx` (recommended):
|
|
16
|
+
|
|
17
|
+
```bash
|
|
18
|
+
npx next-configure
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
Or install as a dev dependency:
|
|
22
|
+
|
|
23
|
+
```bash
|
|
24
|
+
npm install --save-dev next-configure
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
Then run:
|
|
28
|
+
|
|
29
|
+
```bash
|
|
30
|
+
npx next-configure
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
## Requirements
|
|
34
|
+
|
|
35
|
+
- Node.js 18 or newer.
|
|
36
|
+
- A Next.js **App Router** project.
|
|
37
|
+
- `package.json` in the current directory.
|
|
38
|
+
- `next` present in `dependencies` or `devDependencies`.
|
|
39
|
+
- A Tailwind v4 global CSS file at one of:
|
|
40
|
+
- `src/app/globals.css`
|
|
41
|
+
- `app/globals.css`
|
|
42
|
+
|
|
43
|
+
## Usage
|
|
44
|
+
|
|
45
|
+
Run the CLI from the root of your Next.js project:
|
|
46
|
+
|
|
47
|
+
```bash
|
|
48
|
+
npx next-configure
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
You will be prompted for three steps:
|
|
52
|
+
|
|
53
|
+
1. **Install shadcn/ui? (yes/no)**
|
|
54
|
+
- If yes, runs:
|
|
55
|
+
- `npx shadcn init`
|
|
56
|
+
- `npx shadcn add button`
|
|
57
|
+
2. **Generate standard development folders? (yes/no)**
|
|
58
|
+
- If yes:
|
|
59
|
+
- If `src/` exists:
|
|
60
|
+
- Creates `src/components`, `src/hooks`, `src/utils` (if missing).
|
|
61
|
+
- Otherwise:
|
|
62
|
+
- Creates `components`, `hooks`, `utils` in project root.
|
|
63
|
+
3. **Set color theme? (yes/no)**
|
|
64
|
+
- If no, the CLI exits successfully after steps 1–2.
|
|
65
|
+
- If yes, you will be asked for:
|
|
66
|
+
- `Enter primary color (hex without #)`
|
|
67
|
+
- `Enter secondary color (hex without #)`
|
|
68
|
+
|
|
69
|
+
The CLI validates that both colors are 6-character hex values.
|
|
70
|
+
|
|
71
|
+
## Theme generation
|
|
72
|
+
|
|
73
|
+
When you opt in to theme generation:
|
|
74
|
+
|
|
75
|
+
- The CLI locates your global CSS file:
|
|
76
|
+
- `src/app/globals.css`, or
|
|
77
|
+
- `app/globals.css`.
|
|
78
|
+
- If not found, it exits with an error.
|
|
79
|
+
- If found, it overwrites that file completely with:
|
|
80
|
+
- Tailwind v4 imports:
|
|
81
|
+
- `@import "tailwindcss";`
|
|
82
|
+
- `@import "tw-animate-css";`
|
|
83
|
+
- `@custom-variant dark` and an `@theme inline { ... }` block mapping Tailwind v4 tokens to CSS variables.
|
|
84
|
+
- A `:root` block defining:
|
|
85
|
+
- `--primary`, `--primary-light`, `--primary-dark`, `--primary-foreground`
|
|
86
|
+
- `--secondary`, `--secondary-light`, `--secondary-dark`, `--secondary-foreground`
|
|
87
|
+
- Additional variables for background, foreground, border, input, ring, and radius.
|
|
88
|
+
- A small `@layer base` section for base `body` and element styles.
|
|
89
|
+
|
|
90
|
+
Primary and secondary light/dark shades are generated automatically from your hex input using a small color utility.
|
|
91
|
+
|
|
92
|
+
## Example flows
|
|
93
|
+
|
|
94
|
+
- **New project**
|
|
95
|
+
- `npx create-next-app@latest`
|
|
96
|
+
- `cd your-app`
|
|
97
|
+
- `npx next-configure`
|
|
98
|
+
- **Existing project (theme only)**
|
|
99
|
+
- `cd your-app`
|
|
100
|
+
- `npx next-configure`
|
|
101
|
+
- Answer no to shadcn and folders, yes to theme.
|
|
102
|
+
|
|
103
|
+
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "next-configure",
|
|
3
|
-
"version": "0.1.
|
|
4
|
-
"description": "
|
|
3
|
+
"version": "0.1.1",
|
|
4
|
+
"description": "Zero-config CLI to Tailwind v4 + shadcn/ui theme and folder structure in Next.js App Router projects.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"bin": {
|
|
7
7
|
"next-configure": "./dist/index.js"
|
|
@@ -22,8 +22,25 @@
|
|
|
22
22
|
"@types/prompts": "^2.4.9",
|
|
23
23
|
"typescript": "^5.6.3"
|
|
24
24
|
},
|
|
25
|
+
"keywords": [
|
|
26
|
+
"nextjs",
|
|
27
|
+
"next.js",
|
|
28
|
+
"next",
|
|
29
|
+
"next app router",
|
|
30
|
+
"app router",
|
|
31
|
+
"tailwind",
|
|
32
|
+
"tailwindcss",
|
|
33
|
+
"tailwind v4",
|
|
34
|
+
"shadcn",
|
|
35
|
+
"shadcn-ui",
|
|
36
|
+
"cli",
|
|
37
|
+
"scaffold",
|
|
38
|
+
"theme",
|
|
39
|
+
"design system"
|
|
40
|
+
],
|
|
25
41
|
"files": [
|
|
26
|
-
"dist"
|
|
42
|
+
"dist",
|
|
43
|
+
"README.md"
|
|
27
44
|
],
|
|
28
45
|
"engines": {
|
|
29
46
|
"node": ">=18.0.0"
|