feat: ✨ add `shadcn/ui`
by Sivritkin Dmitriy
1@@ -0,0 +1,17 @@
2+{
3+ "$schema": "https://ui.shadcn.com/schema.json",
4+ "style": "new-york",
5+ "rsc": true,
6+ "tsx": true,
7+ "tailwind": {
8+ "config": "tailwind.config.ts",
9+ "css": "src/app/globals.css",
10+ "baseColor": "neutral",
11+ "cssVariables": true,
12+ "prefix": ""
13+ },
14+ "aliases": {
15+ "components": "~/shared",
16+ "utils": "~/shared/lib/utils"
17+ }
18+}@@ -19,9 +19,14 @@
19 "typecheck": "tsc --noEmit --pretty"
20 },
21 "dependencies": {
22+ "@radix-ui/react-icons": "^1.3.0",
23+ "class-variance-authority": "^0.7.0",
24+ "clsx": "^2.1.1",
25 "next": "14.2.4",
26 "react": "^18",
27- "react-dom": "^18"
28+ "react-dom": "^18",
29+ "tailwind-merge": "^2.3.0",
30+ "tailwindcss-animate": "^1.0.7"
31 },
32 "devDependencies": {
33 "@types/node": "^20",@@ -1,33 +1,76 @@
34 @tailwind base;
35-@tailwind components;
36-@tailwind utilities;
37-
38-:root {
39- --foreground-rgb: 0, 0, 0;
40- --background-start-rgb: 214, 219, 220;
41- --background-end-rgb: 255, 255, 255;
42-}
43-
44-@media (prefers-color-scheme: dark) {
45- :root {
46- --foreground-rgb: 255, 255, 255;
47- --background-start-rgb: 0, 0, 0;
48- --background-end-rgb: 0, 0, 0;
49- }
50-}
51-
52-body {
53- color: rgb(var(--foreground-rgb));
54- background: linear-gradient(
55- to bottom,
56- transparent,
57- rgb(var(--background-end-rgb))
58- )
59- rgb(var(--background-start-rgb));
60-}
61-
62-@layer utilities {
63- .text-balance {
64- text-wrap: balance;
65+ @tailwind components;
66+ @tailwind utilities;
67+
68+ @layer base {
69+ :root {
70+ --background: 0 0% 100%;
71+ --foreground: 0 0% 3.9%;
72+
73+ --card: 0 0% 100%;
74+ --card-foreground: 0 0% 3.9%;
75+
76+ --popover: 0 0% 100%;
77+ --popover-foreground: 0 0% 3.9%;
78+
79+ --primary: 0 0% 9%;
80+ --primary-foreground: 0 0% 98%;
81+
82+ --secondary: 0 0% 96.1%;
83+ --secondary-foreground: 0 0% 9%;
84+
85+ --muted: 0 0% 96.1%;
86+ --muted-foreground: 0 0% 45.1%;
87+
88+ --accent: 0 0% 96.1%;
89+ --accent-foreground: 0 0% 9%;
90+
91+ --destructive: 0 84.2% 60.2%;
92+ --destructive-foreground: 0 0% 98%;
93+
94+ --border: 0 0% 89.8%;
95+ --input: 0 0% 89.8%;
96+ --ring: 0 0% 3.9%;
97+
98+ --radius: 0.5rem;
99+ }
100+
101+ .dark {
102+ --background: 0 0% 3.9%;
103+ --foreground: 0 0% 98%;
104+
105+ --card: 0 0% 3.9%;
106+ --card-foreground: 0 0% 98%;
107+
108+ --popover: 0 0% 3.9%;
109+ --popover-foreground: 0 0% 98%;
110+
111+ --primary: 0 0% 98%;
112+ --primary-foreground: 0 0% 9%;
113+
114+ --secondary: 0 0% 14.9%;
115+ --secondary-foreground: 0 0% 98%;
116+
117+ --muted: 0 0% 14.9%;
118+ --muted-foreground: 0 0% 63.9%;
119+
120+ --accent: 0 0% 14.9%;
121+ --accent-foreground: 0 0% 98%;
122+
123+ --destructive: 0 62.8% 30.6%;
124+ --destructive-foreground: 0 0% 98%;
125+
126+ --border: 0 0% 14.9%;
127+ --input: 0 0% 14.9%;
128+ --ring: 0 0% 83.1%;
129+ }
130 }
131-}
132+
133+ @layer base {
134+ * {
135+ @apply border-border;
136+ }
137+ body {
138+ @apply bg-background text-foreground;
139+ }
140+ }
141\ No newline at end of file@@ -0,0 +1,6 @@
142+import { type ClassValue, clsx } from "clsx"
143+import { twMerge } from "tailwind-merge"
144+
145+export function cn(...inputs: ClassValue[]) {
146+ return twMerge(clsx(inputs))
147+}@@ -1,20 +1,80 @@
148-import type { Config } from "tailwindcss";
149+import type { Config } from "tailwindcss"
150
151-const config: Config = {
152+const config = {
153+ darkMode: ["class"],
154 content: [
155- "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
156- "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
157- "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
158- ],
159+ './pages/**/*.{ts,tsx}',
160+ './components/**/*.{ts,tsx}',
161+ './app/**/*.{ts,tsx}',
162+ './src/**/*.{ts,tsx}',
163+ ],
164+ prefix: "",
165 theme: {
166+ container: {
167+ center: true,
168+ padding: "2rem",
169+ screens: {
170+ "2xl": "1400px",
171+ },
172+ },
173 extend: {
174- backgroundImage: {
175- "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
176- "gradient-conic":
177- "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
178+ colors: {
179+ border: "hsl(var(--border))",
180+ input: "hsl(var(--input))",
181+ ring: "hsl(var(--ring))",
182+ background: "hsl(var(--background))",
183+ foreground: "hsl(var(--foreground))",
184+ primary: {
185+ DEFAULT: "hsl(var(--primary))",
186+ foreground: "hsl(var(--primary-foreground))",
187+ },
188+ secondary: {
189+ DEFAULT: "hsl(var(--secondary))",
190+ foreground: "hsl(var(--secondary-foreground))",
191+ },
192+ destructive: {
193+ DEFAULT: "hsl(var(--destructive))",
194+ foreground: "hsl(var(--destructive-foreground))",
195+ },
196+ muted: {
197+ DEFAULT: "hsl(var(--muted))",
198+ foreground: "hsl(var(--muted-foreground))",
199+ },
200+ accent: {
201+ DEFAULT: "hsl(var(--accent))",
202+ foreground: "hsl(var(--accent-foreground))",
203+ },
204+ popover: {
205+ DEFAULT: "hsl(var(--popover))",
206+ foreground: "hsl(var(--popover-foreground))",
207+ },
208+ card: {
209+ DEFAULT: "hsl(var(--card))",
210+ foreground: "hsl(var(--card-foreground))",
211+ },
212+ },
213+ borderRadius: {
214+ lg: "var(--radius)",
215+ md: "calc(var(--radius) - 2px)",
216+ sm: "calc(var(--radius) - 4px)",
217+ },
218+ keyframes: {
219+ "accordion-down": {
220+ from: { height: "0" },
221+ to: { height: "var(--radix-accordion-content-height)" },
222+ },
223+ "accordion-up": {
224+ from: { height: "var(--radix-accordion-content-height)" },
225+ to: { height: "0" },
226+ },
227+ },
228+ animation: {
229+ "accordion-down": "accordion-down 0.2s ease-out",
230+ "accordion-up": "accordion-up 0.2s ease-out",
231 },
232 },
233 },
234- plugins: [],
235-};
236-export default config;
237+ plugins: [require("tailwindcss-animate")],
238+} satisfies Config
239+
240+export default config
241\ No newline at end of file@@ -12,7 +12,7 @@ __metadata:
242 languageName: node
243 linkType: hard
244
245-"@babel/runtime@npm:^7.23.2":
246+"@babel/runtime@npm:^7.23.2, @babel/runtime@npm:^7.24.1":
247 version: 7.24.7
248 resolution: "@babel/runtime@npm:7.24.7"
249 dependencies:
250@@ -279,6 +279,15 @@ __metadata:
251 languageName: node
252 linkType: hard
253
254+"@radix-ui/react-icons@npm:^1.3.0":
255+ version: 1.3.0
256+ resolution: "@radix-ui/react-icons@npm:1.3.0"
257+ peerDependencies:
258+ react: ^16.x || ^17.x || ^18.x
259+ checksum: 10c0/581657680e43fd13ff06e01f963e3afa94671d4ce6c3fb126e2c70c993ab8650faa55286974032dbccfecca4db57308fb66d53771d765887e03600cddee84ae5
260+ languageName: node
261+ linkType: hard
262+
263 "@rushstack/eslint-patch@npm:^1.3.3":
264 version: 1.10.3
265 resolution: "@rushstack/eslint-patch@npm:1.10.3"
266@@ -839,6 +848,15 @@ __metadata:
267 languageName: node
268 linkType: hard
269
270+"class-variance-authority@npm:^0.7.0":
271+ version: 0.7.0
272+ resolution: "class-variance-authority@npm:0.7.0"
273+ dependencies:
274+ clsx: "npm:2.0.0"
275+ checksum: 10c0/e11c57edf4bf50ef1c97bae41d68885afbaaedba26c48b7cc5dfb033390fed7012147e9532168d8c4f3497fce4dff15e20e6e60b8c9c9a4b0fe26b0e804513db
276+ languageName: node
277+ linkType: hard
278+
279 "clean-stack@npm:^2.0.0":
280 version: 2.2.0
281 resolution: "clean-stack@npm:2.2.0"
282@@ -853,6 +871,20 @@ __metadata:
283 languageName: node
284 linkType: hard
285
286+"clsx@npm:2.0.0":
287+ version: 2.0.0
288+ resolution: "clsx@npm:2.0.0"
289+ checksum: 10c0/c09f43b3144a0b7826b6b11b6a111b2c7440831004eecc02d333533c5e58ef0aa5f2dce071d3b25fbb8c8ea97b45df96c74bcc1d51c8c2027eb981931107b0cd
290+ languageName: node
291+ linkType: hard
292+
293+"clsx@npm:^2.1.1":
294+ version: 2.1.1
295+ resolution: "clsx@npm:2.1.1"
296+ checksum: 10c0/c4c8eb865f8c82baab07e71bfa8897c73454881c4f99d6bc81585aecd7c441746c1399d08363dc096c550cceaf97bd4ce1e8854e1771e9998d9f94c4fe075839
297+ languageName: node
298+ linkType: hard
299+
300 "color-convert@npm:^2.0.1":
301 version: 2.0.1
302 resolution: "color-convert@npm:2.0.1"
303@@ -1725,9 +1757,12 @@ __metadata:
304 version: 0.0.0-use.local
305 resolution: "github-commit-explorer@workspace:."
306 dependencies:
307+ "@radix-ui/react-icons": "npm:^1.3.0"
308 "@types/node": "npm:^20"
309 "@types/react": "npm:^18"
310 "@types/react-dom": "npm:^18"
311+ class-variance-authority: "npm:^0.7.0"
312+ clsx: "npm:^2.1.1"
313 eslint: "npm:^8"
314 eslint-config-next: "npm:14.2.4"
315 next: "npm:14.2.4"
316@@ -1736,7 +1771,9 @@ __metadata:
317 prettier-plugin-tailwindcss: "npm:^0.6.4"
318 react: "npm:^18"
319 react-dom: "npm:^18"
320+ tailwind-merge: "npm:^2.3.0"
321 tailwindcss: "npm:^3.4.1"
322+ tailwindcss-animate: "npm:^1.0.7"
323 typescript: "npm:^5"
324 languageName: unknown
325 linkType: soft
326@@ -3768,6 +3805,24 @@ __metadata:
327 languageName: node
328 linkType: hard
329
330+"tailwind-merge@npm:^2.3.0":
331+ version: 2.3.0
332+ resolution: "tailwind-merge@npm:2.3.0"
333+ dependencies:
334+ "@babel/runtime": "npm:^7.24.1"
335+ checksum: 10c0/5ea308e23c3ab1cf4c3f35f0a471753f4d3ed232d63dd7c09151a74428737321902203d90e9f0cb76ea5c3978e71b0adbc503dc455e56cda967a7674ae4b94b5
336+ languageName: node
337+ linkType: hard
338+
339+"tailwindcss-animate@npm:^1.0.7":
340+ version: 1.0.7
341+ resolution: "tailwindcss-animate@npm:1.0.7"
342+ peerDependencies:
343+ tailwindcss: "*"
344+ checksum: 10c0/ec7dbd1631076b97d66a1fbaaa06e0725fccfa63119221e8d87a997b02dcede98ad88bb1ef6665b968f5d260fcefb10592e0299ca70208d365b37761edf5e19a
345+ languageName: node
346+ linkType: hard
347+
348 "tailwindcss@npm:^3.4.1":
349 version: 3.4.4
350 resolution: "tailwindcss@npm:3.4.4"