Skip to content

Commit a243262

Browse files
shadcnshadcn
authored
feat(shadcn-ui): init command
1 parent b5d4368 commit a243262

File tree

5 files changed

+286
-95
lines changed

5 files changed

+286
-95
lines changed

‎packages/cli/package.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,6 @@
5050
"node-fetch": "^3.3.0",
5151
"ora": "^6.1.2",
5252
"prompts": "^2.4.2",
53-
"react-day-picker": "^8.6.0",
5453
"zod": "^3.20.2"
5554
},
5655
"devDependencies": {

‎packages/cli/src/index.ts‎

Lines changed: 93 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,23 @@ import { getPackageInfo } from "./utils/get-package-info"
1111
import { getPackageManager } from "./utils/get-package-manager"
1212
import { getProjectInfo } from "./utils/get-project-info"
1313
import { logger } from "./utils/logger"
14+
import { STYLES, TAILWIND_CONFIG, UTILS } from "./utils/templates"
1415

1516
process.on("SIGINT", () => process.exit(0))
1617
process.on("SIGTERM", () => process.exit(0))
1718

19+
const PROJECT_DEPENDENCIES = [
20+
"tailwindcss-animate",
21+
"class-variance-authority",
22+
"clsx",
23+
"tailwind-merge",
24+
"lucide-react",
25+
]
26+
1827
async function main() {
1928
const packageInfo = await getPackageInfo()
2029
const projectInfo = await getProjectInfo()
30+
const packageManager = getPackageManager()
2131

2232
const program = new Command()
2333
.name("shadcn-ui")
@@ -28,6 +38,89 @@ async function main() {
2838
"display the version number"
2939
)
3040

41+
program
42+
.command("init")
43+
.description("Configure your Next.js project.")
44+
.option("-y, --yes", "Skip confirmation prompt.")
45+
.action(async (options) => {
46+
logger.warn(
47+
"Running the following command will overwrite existing files."
48+
)
49+
logger.warn(
50+
"Make sure you have committed your changes before proceeding."
51+
)
52+
logger.warn("")
53+
logger.warn(
54+
"This command assumes a Next.js project with TypeScript and Tailwind CSS."
55+
)
56+
logger.warn(
57+
"If you don't have these, follow the manual steps at https://ui.shadcn.com/docs/installation."
58+
)
59+
logger.warn("")
60+
61+
if (!options.yes) {
62+
const { proceed } = await prompts({
63+
type: "confirm",
64+
name: "proceed",
65+
message:
66+
"Running this command will install dependencies and overwrite files. Proceed?",
67+
initial: true,
68+
})
69+
70+
if (!proceed) {
71+
process.exit(0)
72+
}
73+
}
74+
75+
// Install dependencies.
76+
const dependenciesSpinner = ora(`Installing dependencies...`).start()
77+
await execa(packageManager, [
78+
packageManager === "npm" ? "install" : "add",
79+
...PROJECT_DEPENDENCIES,
80+
])
81+
dependenciesSpinner.succeed()
82+
83+
// Ensure styles directory exists.
84+
if (!projectInfo?.appDir) {
85+
const stylesDir = projectInfo?.srcDir ? "./src/styles" : "./styles"
86+
if (!existsSync(path.resolve(stylesDir))) {
87+
await fs.mkdir(path.resolve(stylesDir), { recursive: true })
88+
}
89+
}
90+
91+
// Update styles.css
92+
let stylesDestination = projectInfo?.srcDir
93+
? "./src/styles/globals.css"
94+
: "./styles/globals.css"
95+
if (projectInfo?.appDir) {
96+
stylesDestination = projectInfo?.srcDir
97+
? "./src/app/globals.css"
98+
: "./app/globals.css"
99+
}
100+
const stylesSpinner = ora(`Adding styles with CSS variables...`).start()
101+
await fs.writeFile(stylesDestination, STYLES, "utf8")
102+
stylesSpinner.succeed()
103+
104+
// Ensure lib directory exists.
105+
const libDir = projectInfo?.srcDir ? "./src/lib" : "./lib"
106+
if (!existsSync(path.resolve(libDir))) {
107+
await fs.mkdir(path.resolve(libDir), { recursive: true })
108+
}
109+
110+
// Create lib/utils.ts
111+
const utilsDestination = projectInfo?.srcDir
112+
? "./src/lib/utils.ts"
113+
: "./lib/utils.ts"
114+
const utilsSpinner = ora(`Adding utils...`).start()
115+
await fs.writeFile(utilsDestination, UTILS, "utf8")
116+
utilsSpinner.succeed()
117+
118+
const tailwindDestination = "./tailwind.config.js"
119+
const tailwindSpinner = ora(`Updating tailwind.config.js...`).start()
120+
await fs.writeFile(tailwindDestination, TAILWIND_CONFIG, "utf8")
121+
tailwindSpinner.succeed()
122+
})
123+
31124
program
32125
.command("add")
33126
.description("add components to your project")
@@ -73,8 +166,6 @@ async function main() {
73166
spinner.succeed()
74167
}
75168

76-
const packageManager = getPackageManager()
77-
78169
logger.success(
79170
`Installing ${selectedComponents.length} component(s) and dependencies...`
80171
)

‎packages/cli/src/utils/get-project-info.ts‎

Lines changed: 28 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,34 @@
1+
import { existsSync } from "fs"
12
import path from "path"
23
import fs from "fs-extra"
34

45
export async function getProjectInfo() {
6+
const info = {
7+
tsconfig: null,
8+
alias: null,
9+
srcDir: false,
10+
appDir: false,
11+
}
12+
13+
try {
14+
const tsconfig = await getTsConfig()
15+
const paths = tsconfig?.compilerOptions?.paths
16+
const alias = paths ? Object.keys(paths)[0].replace("*", "") : null
17+
18+
return {
19+
tsconfig,
20+
alias,
21+
srcDir: existsSync(path.resolve("./src")),
22+
appDir:
23+
existsSync(path.resolve("./app")) ||
24+
existsSync(path.resolve("./src/app")),
25+
}
26+
} catch (error) {
27+
return info
28+
}
29+
}
30+
31+
export async function getTsConfig() {
532
try {
633
const tsconfigPath = path.join("tsconfig.json")
734
const tsconfig = await fs.readJSON(tsconfigPath)
@@ -10,16 +37,7 @@ export async function getProjectInfo() {
1037
throw new Error("tsconfig.json is missing")
1138
}
1239

13-
const paths = tsconfig.compilerOptions?.paths
14-
if (!paths) {
15-
throw new Error("tsconfig.json is missing paths")
16-
}
17-
18-
const alias = Object.keys(paths)[0].replace("*", "")
19-
20-
return {
21-
alias,
22-
}
40+
return tsconfig
2341
} catch (error) {
2442
return null
2543
}

‎packages/cli/src/utils/templates.ts‎

Lines changed: 165 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,165 @@
1+
export const STYLES = `@tailwind base;
2+
@tailwind components;
3+
@tailwind utilities;
4+
5+
@layer base {
6+
:root {
7+
--background: 0 0% 100%;
8+
--foreground: 222.2 47.4% 11.2%;
9+
10+
--muted: 210 40% 96.1%;
11+
--muted-foreground: 215.4 16.3% 46.9%;
12+
13+
--popover: 0 0% 100%;
14+
--popover-foreground: 222.2 47.4% 11.2%;
15+
16+
--card: 0 0% 100%;
17+
--card-foreground: 222.2 47.4% 11.2%;
18+
19+
--border: 214.3 31.8% 91.4%;
20+
--input: 214.3 31.8% 91.4%;
21+
22+
--primary: 222.2 47.4% 11.2%;
23+
--primary-foreground: 210 40% 98%;
24+
25+
--secondary: 210 40% 96.1%;
26+
--secondary-foreground: 222.2 47.4% 11.2%;
27+
28+
--accent: 210 40% 96.1%;
29+
--accent-foreground: 222.2 47.4% 11.2%;
30+
31+
--destructive: 0 100% 50%;
32+
--destructive-foreground: 210 40% 98%;
33+
34+
--ring: 215 20.2% 65.1%;
35+
36+
--radius: 0.5rem;
37+
}
38+
39+
.dark {
40+
--background: 224 71% 4%;
41+
--foreground: 213 31% 91%;
42+
43+
--muted: 223 47% 11%;
44+
--muted-foreground: 215.4 16.3% 56.9%;
45+
46+
--popover: 224 71% 4%;
47+
--popover-foreground: 215 20.2% 65.1%;
48+
49+
--card: 0 0% 100%;
50+
--card-foreground: 222.2 47.4% 11.2%;
51+
52+
--border: 216 34% 17%;
53+
--input: 216 34% 17%;
54+
55+
--primary: 210 40% 98%;
56+
--primary-foreground: 222.2 47.4% 1.2%;
57+
58+
--secondary: 222.2 47.4% 11.2%;
59+
--secondary-foreground: 210 40% 98%;
60+
61+
--accent: 216 34% 17%;
62+
--accent-foreground: 210 40% 98%;
63+
64+
--destructive: 0 63% 31%;
65+
--destructive-foreground: 210 40% 98%;
66+
67+
--ring: 216 34% 17%;
68+
69+
--radius: 0.5rem;
70+
}
71+
}
72+
73+
@layer base {
74+
* {
75+
@apply border-border;
76+
}
77+
body {
78+
@apply bg-background text-foreground;
79+
font-feature-settings: "rlig" 1, "calt" 1;
80+
}
81+
}`
82+
83+
export const UTILS = `import { ClassValue, clsx } from "clsx"
84+
import { twMerge } from "tailwind-merge"
85+
86+
export function cn(...inputs: ClassValue[]) {
87+
return twMerge(clsx(inputs))
88+
}
89+
`
90+
91+
export const TAILWIND_CONFIG = `/** @type {import('tailwindcss').Config} */
92+
module.exports = {
93+
darkMode: ["class"],
94+
content: [
95+
'./pages/**/*.{ts,tsx}',
96+
'./components/**/*.{ts,tsx}',
97+
'./app/**/*.{ts,tsx}',
98+
],
99+
theme: {
100+
container: {
101+
center: true,
102+
padding: "2rem",
103+
screens: {
104+
"2xl": "1400px",
105+
},
106+
},
107+
extend: {
108+
colors: {
109+
border: "hsl(var(--border))",
110+
input: "hsl(var(--input))",
111+
ring: "hsl(var(--ring))",
112+
background: "hsl(var(--background))",
113+
foreground: "hsl(var(--foreground))",
114+
primary: {
115+
DEFAULT: "hsl(var(--primary))",
116+
foreground: "hsl(var(--primary-foreground))",
117+
},
118+
secondary: {
119+
DEFAULT: "hsl(var(--secondary))",
120+
foreground: "hsl(var(--secondary-foreground))",
121+
},
122+
destructive: {
123+
DEFAULT: "hsl(var(--destructive))",
124+
foreground: "hsl(var(--destructive-foreground))",
125+
},
126+
muted: {
127+
DEFAULT: "hsl(var(--muted))",
128+
foreground: "hsl(var(--muted-foreground))",
129+
},
130+
accent: {
131+
DEFAULT: "hsl(var(--accent))",
132+
foreground: "hsl(var(--accent-foreground))",
133+
},
134+
popover: {
135+
DEFAULT: "hsl(var(--popover))",
136+
foreground: "hsl(var(--popover-foreground))",
137+
},
138+
card: {
139+
DEFAULT: "hsl(var(--card))",
140+
foreground: "hsl(var(--card-foreground))",
141+
},
142+
},
143+
borderRadius: {
144+
lg: "var(--radius)",
145+
md: "calc(var(--radius) - 2px)",
146+
sm: "calc(var(--radius) - 4px)",
147+
},
148+
keyframes: {
149+
"accordion-down": {
150+
from: { height: 0 },
151+
to: { height: "var(--radix-accordion-content-height)" },
152+
},
153+
"accordion-up": {
154+
from: { height: "var(--radix-accordion-content-height)" },
155+
to: { height: 0 },
156+
},
157+
},
158+
animation: {
159+
"accordion-down": "accordion-down 0.2s ease-out",
160+
"accordion-up": "accordion-up 0.2s ease-out",
161+
},
162+
},
163+
},
164+
plugins: [require("tailwindcss-animate")],
165+
}`

0 commit comments

Comments
 (0)