Skip to content

Commit

Permalink
feat(package): Install shadcn/ui
Browse files Browse the repository at this point in the history
  • Loading branch information
LI-NA committed Apr 21, 2024
1 parent cebad80 commit 8ddbc44
Show file tree
Hide file tree
Showing 7 changed files with 212 additions and 14 deletions.
5 changes: 4 additions & 1 deletion .vscode/settings.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,5 +5,8 @@
},
"eslint.nodePath": ".yarn/sdks",
"typescript.tsdk": ".yarn/sdks/typescript/lib",
"typescript.enablePromptUseWorkspaceTsdk": true
"typescript.enablePromptUseWorkspaceTsdk": true,
"files.associations": {
"*.css": "tailwindcss"
}
}
56 changes: 56 additions & 0 deletions app/globals.css
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,62 @@
@tailwind components;
@tailwind utilities;

@layer base {
:root {
--background: 0 0% 100%;
--foreground: 224 71.4% 4.1%;
--card: 0 0% 100%;
--card-foreground: 224 71.4% 4.1%;
--popover: 0 0% 100%;
--popover-foreground: 224 71.4% 4.1%;
--primary: 262.1 83.3% 57.8%;
--primary-foreground: 210 20% 98%;
--secondary: 220 14.3% 95.9%;
--secondary-foreground: 220.9 39.3% 11%;
--muted: 220 14.3% 95.9%;
--muted-foreground: 220 8.9% 46.1%;
--accent: 220 14.3% 95.9%;
--accent-foreground: 220.9 39.3% 11%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 210 20% 98%;
--border: 220 13% 91%;
--input: 220 13% 91%;
--ring: 262.1 83.3% 57.8%;
--radius: 0.5rem;
}

.dark {
--background: 224 71.4% 4.1%;
--foreground: 210 20% 98%;
--card: 224 71.4% 4.1%;
--card-foreground: 210 20% 98%;
--popover: 224 71.4% 4.1%;
--popover-foreground: 210 20% 98%;
--primary: 263.4 70% 50.4%;
--primary-foreground: 210 20% 98%;
--secondary: 215 27.9% 16.9%;
--secondary-foreground: 210 20% 98%;
--muted: 215 27.9% 16.9%;
--muted-foreground: 217.9 10.6% 64.9%;
--accent: 215 27.9% 16.9%;
--accent-foreground: 210 20% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 210 20% 98%;
--border: 215 27.9% 16.9%;
--input: 215 27.9% 16.9%;
--ring: 263.4 70% 50.4%;
}
}

@layer base {
* {
@apply border-border;
}
body {
@apply bg-background text-foreground;
}
}

:root {
--foreground-rgb: 0, 0, 0;
--background-start-rgb: 214, 219, 220;
Expand Down
17 changes: 17 additions & 0 deletions components.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
{
"$schema": "https://ui.shadcn.com/schema.json",
"style": "new-york",
"rsc": true,
"tsx": true,
"tailwind": {
"config": "tailwind.config.ts",
"css": "app/globals.css",
"baseColor": "gray",
"cssVariables": true,
"prefix": ""
},
"aliases": {
"components": "@/components",
"utils": "@/lib/utils"
}
}
6 changes: 6 additions & 0 deletions lib/utils.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import { type ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
}
7 changes: 6 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,13 @@
"lint": "next lint"
},
"dependencies": {
"@radix-ui/react-icons": "^1.3.0",
"class-variance-authority": "^0.7.0",
"clsx": "^2.1.0",
"next": "14.2.2",
"react": "^18",
"react-dom": "^18"
"react-dom": "^18",
"tailwind-merge": "^2.3.0"
},
"devDependencies": {
"@types/node": "^20",
Expand All @@ -25,6 +29,7 @@
"eslint-config-next": "14.2.2",
"postcss": "^8",
"tailwindcss": "^3.4.1",
"tailwindcss-animate": "^1.0.7",
"typescript": "^5"
},
"packageManager": "[email protected]"
Expand Down
78 changes: 67 additions & 11 deletions tailwind.config.ts
Original file line number Diff line number Diff line change
@@ -1,19 +1,75 @@
import type { Config } from "tailwindcss";

const config: Config = {
content: [
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
"./components/**/*.{js,ts,jsx,tsx,mdx}",
"./app/**/*.{js,ts,jsx,tsx,mdx}",
],
const config = {
darkMode: ["class"],
content: ["./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}"],
prefix: "",
theme: {
container: {
center: true,
padding: "2rem",
screens: {
"2xl": "1400px",
},
},
extend: {
backgroundImage: {
"gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
"gradient-conic": "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
colors: {
border: "hsl(var(--border))",
input: "hsl(var(--input))",
ring: "hsl(var(--ring))",
background: "hsl(var(--background))",
foreground: "hsl(var(--foreground))",
primary: {
DEFAULT: "hsl(var(--primary))",
foreground: "hsl(var(--primary-foreground))",
},
secondary: {
DEFAULT: "hsl(var(--secondary))",
foreground: "hsl(var(--secondary-foreground))",
},
destructive: {
DEFAULT: "hsl(var(--destructive))",
foreground: "hsl(var(--destructive-foreground))",
},
muted: {
DEFAULT: "hsl(var(--muted))",
foreground: "hsl(var(--muted-foreground))",
},
accent: {
DEFAULT: "hsl(var(--accent))",
foreground: "hsl(var(--accent-foreground))",
},
popover: {
DEFAULT: "hsl(var(--popover))",
foreground: "hsl(var(--popover-foreground))",
},
card: {
DEFAULT: "hsl(var(--card))",
foreground: "hsl(var(--card-foreground))",
},
},
borderRadius: {
lg: "var(--radius)",
md: "calc(var(--radius) - 2px)",
sm: "calc(var(--radius) - 4px)",
},
keyframes: {
"accordion-down": {
from: { height: "0" },
to: { height: "var(--radix-accordion-content-height)" },
},
"accordion-up": {
from: { height: "var(--radix-accordion-content-height)" },
to: { height: "0" },
},
},
animation: {
"accordion-down": "accordion-down 0.2s ease-out",
"accordion-up": "accordion-up 0.2s ease-out",
},
},
},
plugins: [],
};
plugins: [require("tailwindcss-animate")],
} satisfies Config;

export default config;
57 changes: 56 additions & 1 deletion yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ __metadata:
languageName: node
linkType: hard

"@babel/runtime@npm:^7.23.2":
"@babel/runtime@npm:^7.23.2, @babel/runtime@npm:^7.24.1":
version: 7.24.4
resolution: "@babel/runtime@npm:7.24.4"
dependencies:
Expand Down Expand Up @@ -286,6 +286,15 @@ __metadata:
languageName: node
linkType: hard

"@radix-ui/react-icons@npm:^1.3.0":
version: 1.3.0
resolution: "@radix-ui/react-icons@npm:1.3.0"
peerDependencies:
react: ^16.x || ^17.x || ^18.x
checksum: 10c0/581657680e43fd13ff06e01f963e3afa94671d4ce6c3fb126e2c70c993ab8650faa55286974032dbccfecca4db57308fb66d53771d765887e03600cddee84ae5
languageName: node
linkType: hard

"@rushstack/eslint-patch@npm:^1.3.3":
version: 1.10.2
resolution: "@rushstack/eslint-patch@npm:1.10.2"
Expand Down Expand Up @@ -846,6 +855,15 @@ __metadata:
languageName: node
linkType: hard

"class-variance-authority@npm:^0.7.0":
version: 0.7.0
resolution: "class-variance-authority@npm:0.7.0"
dependencies:
clsx: "npm:2.0.0"
checksum: 10c0/e11c57edf4bf50ef1c97bae41d68885afbaaedba26c48b7cc5dfb033390fed7012147e9532168d8c4f3497fce4dff15e20e6e60b8c9c9a4b0fe26b0e804513db
languageName: node
linkType: hard

"clean-stack@npm:^2.0.0":
version: 2.2.0
resolution: "clean-stack@npm:2.2.0"
Expand All @@ -860,6 +878,20 @@ __metadata:
languageName: node
linkType: hard

"clsx@npm:2.0.0":
version: 2.0.0
resolution: "clsx@npm:2.0.0"
checksum: 10c0/c09f43b3144a0b7826b6b11b6a111b2c7440831004eecc02d333533c5e58ef0aa5f2dce071d3b25fbb8c8ea97b45df96c74bcc1d51c8c2027eb981931107b0cd
languageName: node
linkType: hard

"clsx@npm:^2.1.0":
version: 2.1.0
resolution: "clsx@npm:2.1.0"
checksum: 10c0/c09c00ad14f638366ca814097e6cab533dfa1972a358da5b557be487168acbb25b4c1395e89ffa842a8a61ba87a462d2b4885bc9d4f8410b598f3cb339599cdb
languageName: node
linkType: hard

"color-convert@npm:^2.0.1":
version: 2.0.1
resolution: "color-convert@npm:2.0.1"
Expand Down Expand Up @@ -3680,6 +3712,24 @@ __metadata:
languageName: node
linkType: hard

"tailwind-merge@npm:^2.3.0":
version: 2.3.0
resolution: "tailwind-merge@npm:2.3.0"
dependencies:
"@babel/runtime": "npm:^7.24.1"
checksum: 10c0/5ea308e23c3ab1cf4c3f35f0a471753f4d3ed232d63dd7c09151a74428737321902203d90e9f0cb76ea5c3978e71b0adbc503dc455e56cda967a7674ae4b94b5
languageName: node
linkType: hard

"tailwindcss-animate@npm:^1.0.7":
version: 1.0.7
resolution: "tailwindcss-animate@npm:1.0.7"
peerDependencies:
tailwindcss: "*"
checksum: 10c0/ec7dbd1631076b97d66a1fbaaa06e0725fccfa63119221e8d87a997b02dcede98ad88bb1ef6665b968f5d260fcefb10592e0299ca70208d365b37761edf5e19a
languageName: node
linkType: hard

"tailwindcss@npm:^3.4.1":
version: 3.4.3
resolution: "tailwindcss@npm:3.4.3"
Expand Down Expand Up @@ -3738,16 +3788,21 @@ __metadata:
version: 0.0.0-use.local
resolution: "tarkov-live-map@workspace:."
dependencies:
"@radix-ui/react-icons": "npm:^1.3.0"
"@types/node": "npm:^20"
"@types/react": "npm:^18"
"@types/react-dom": "npm:^18"
class-variance-authority: "npm:^0.7.0"
clsx: "npm:^2.1.0"
eslint: "npm:^8"
eslint-config-next: "npm:14.2.2"
next: "npm:14.2.2"
postcss: "npm:^8"
react: "npm:^18"
react-dom: "npm:^18"
tailwind-merge: "npm:^2.3.0"
tailwindcss: "npm:^3.4.1"
tailwindcss-animate: "npm:^1.0.7"
typescript: "npm:^5"
languageName: unknown
linkType: soft
Expand Down

0 comments on commit 8ddbc44

Please sign in to comment.