Skip to content

Commit 00a4cfb

Browse files
andostronautandostronaut
authored
Merge pull request #179 from kinotio/develop
feat: init shadcn ui
2 parents 48a7788 + cb5ed98 commit 00a4cfb

6 files changed

Lines changed: 213 additions & 27 deletions

File tree

‎components.json‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"$schema": "https://ui.shadcn.com/schema.json",
3+
"style": "default",
4+
"rsc": true,
5+
"tsx": true,
6+
"tailwind": {
7+
"config": "tailwind.config.ts",
8+
"css": "src/app/globals.css",
9+
"baseColor": "slate",
10+
"cssVariables": true,
11+
"prefix": ""
12+
},
13+
"aliases": {
14+
"components": "@/components",
15+
"utils": "@/lib/utils",
16+
"ui": "@/components/ui",
17+
"lib": "@/lib",
18+
"hooks": "@/hooks"
19+
}
20+
}

‎package.json‎

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,21 +9,29 @@
99
"lint": "next lint"
1010
},
1111
"dependencies": {
12+
"class-variance-authority": "^0.7.0",
13+
"clsx": "^2.1.1",
14+
"lucide-react": "^0.453.0",
15+
"next": "14.2.16",
1216
"react": "^18",
1317
"react-dom": "^18",
14-
"next": "14.2.16"
18+
"tailwind-merge": "^2.5.4",
19+
"tailwindcss-animate": "^1.0.7"
1520
},
1621
"devDependencies": {
17-
"typescript": "^5",
1822
"@types/node": "^20",
1923
"@types/react": "^18",
2024
"@types/react-dom": "^18",
25+
"eslint": "^8",
26+
"eslint-config-next": "14.2.16",
2127
"postcss": "^8",
2228
"tailwindcss": "^3.4.1",
23-
"eslint": "^8",
24-
"eslint-config-next": "14.2.16"
29+
"typescript": "^5"
2530
},
2631
"eslintConfig": {
27-
"extends": ["next/core-web-vitals", "next/typescript"]
32+
"extends": [
33+
"next/core-web-vitals",
34+
"next/typescript"
35+
]
2836
}
2937
}

‎pnpm-lock.yaml‎

Lines changed: 57 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/app/globals.css‎

Lines changed: 65 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2,21 +2,7 @@
22
@tailwind components;
33
@tailwind utilities;
44

5-
:root {
6-
--background: #ffffff;
7-
--foreground: #171717;
8-
}
9-
10-
@media (prefers-color-scheme: dark) {
11-
:root {
12-
--background: #0a0a0a;
13-
--foreground: #ededed;
14-
}
15-
}
16-
175
body {
18-
color: var(--foreground);
19-
background: var(--background);
206
font-family: Arial, Helvetica, sans-serif;
217
}
228

@@ -25,3 +11,68 @@ body {
2511
text-wrap: balance;
2612
}
2713
}
14+
15+
@layer base {
16+
:root {
17+
--background: 0 0% 100%;
18+
--foreground: 222.2 84% 4.9%;
19+
--card: 0 0% 100%;
20+
--card-foreground: 222.2 84% 4.9%;
21+
--popover: 0 0% 100%;
22+
--popover-foreground: 222.2 84% 4.9%;
23+
--primary: 222.2 47.4% 11.2%;
24+
--primary-foreground: 210 40% 98%;
25+
--secondary: 210 40% 96.1%;
26+
--secondary-foreground: 222.2 47.4% 11.2%;
27+
--muted: 210 40% 96.1%;
28+
--muted-foreground: 215.4 16.3% 46.9%;
29+
--accent: 210 40% 96.1%;
30+
--accent-foreground: 222.2 47.4% 11.2%;
31+
--destructive: 0 84.2% 60.2%;
32+
--destructive-foreground: 210 40% 98%;
33+
--border: 214.3 31.8% 91.4%;
34+
--input: 214.3 31.8% 91.4%;
35+
--ring: 222.2 84% 4.9%;
36+
--chart-1: 12 76% 61%;
37+
--chart-2: 173 58% 39%;
38+
--chart-3: 197 37% 24%;
39+
--chart-4: 43 74% 66%;
40+
--chart-5: 27 87% 67%;
41+
--radius: 0.5rem;
42+
}
43+
.dark {
44+
--background: 222.2 84% 4.9%;
45+
--foreground: 210 40% 98%;
46+
--card: 222.2 84% 4.9%;
47+
--card-foreground: 210 40% 98%;
48+
--popover: 222.2 84% 4.9%;
49+
--popover-foreground: 210 40% 98%;
50+
--primary: 210 40% 98%;
51+
--primary-foreground: 222.2 47.4% 11.2%;
52+
--secondary: 217.2 32.6% 17.5%;
53+
--secondary-foreground: 210 40% 98%;
54+
--muted: 217.2 32.6% 17.5%;
55+
--muted-foreground: 215 20.2% 65.1%;
56+
--accent: 217.2 32.6% 17.5%;
57+
--accent-foreground: 210 40% 98%;
58+
--destructive: 0 62.8% 30.6%;
59+
--destructive-foreground: 210 40% 98%;
60+
--border: 217.2 32.6% 17.5%;
61+
--input: 217.2 32.6% 17.5%;
62+
--ring: 212.7 26.8% 83.9%;
63+
--chart-1: 220 70% 50%;
64+
--chart-2: 160 60% 45%;
65+
--chart-3: 30 80% 55%;
66+
--chart-4: 280 65% 60%;
67+
--chart-5: 340 75% 55%;
68+
}
69+
}
70+
71+
@layer base {
72+
* {
73+
@apply border-border;
74+
}
75+
body {
76+
@apply bg-background text-foreground;
77+
}
78+
}

‎src/lib/utils.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import { clsx, type ClassValue } from "clsx"
2+
import { twMerge } from "tailwind-merge"
3+
4+
export function cn(...inputs: ClassValue[]) {
5+
return twMerge(clsx(inputs))
6+
}

‎tailwind.config.ts‎

Lines changed: 52 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,63 @@
11
import type { Config } from "tailwindcss";
22

33
const config: Config = {
4-
content: [
4+
darkMode: ["class"],
5+
content: [
56
"./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
67
"./src/components/**/*.{js,ts,jsx,tsx,mdx}",
78
"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
89
],
910
theme: {
10-
extend: {
11-
colors: {
12-
background: "var(--background)",
13-
foreground: "var(--foreground)",
14-
},
15-
},
11+
extend: {
12+
colors: {
13+
background: 'hsl(var(--background))',
14+
foreground: 'hsl(var(--foreground))',
15+
card: {
16+
DEFAULT: 'hsl(var(--card))',
17+
foreground: 'hsl(var(--card-foreground))'
18+
},
19+
popover: {
20+
DEFAULT: 'hsl(var(--popover))',
21+
foreground: 'hsl(var(--popover-foreground))'
22+
},
23+
primary: {
24+
DEFAULT: 'hsl(var(--primary))',
25+
foreground: 'hsl(var(--primary-foreground))'
26+
},
27+
secondary: {
28+
DEFAULT: 'hsl(var(--secondary))',
29+
foreground: 'hsl(var(--secondary-foreground))'
30+
},
31+
muted: {
32+
DEFAULT: 'hsl(var(--muted))',
33+
foreground: 'hsl(var(--muted-foreground))'
34+
},
35+
accent: {
36+
DEFAULT: 'hsl(var(--accent))',
37+
foreground: 'hsl(var(--accent-foreground))'
38+
},
39+
destructive: {
40+
DEFAULT: 'hsl(var(--destructive))',
41+
foreground: 'hsl(var(--destructive-foreground))'
42+
},
43+
border: 'hsl(var(--border))',
44+
input: 'hsl(var(--input))',
45+
ring: 'hsl(var(--ring))',
46+
chart: {
47+
'1': 'hsl(var(--chart-1))',
48+
'2': 'hsl(var(--chart-2))',
49+
'3': 'hsl(var(--chart-3))',
50+
'4': 'hsl(var(--chart-4))',
51+
'5': 'hsl(var(--chart-5))'
52+
}
53+
},
54+
borderRadius: {
55+
lg: 'var(--radius)',
56+
md: 'calc(var(--radius) - 2px)',
57+
sm: 'calc(var(--radius) - 4px)'
58+
}
59+
}
1660
},
17-
plugins: [],
61+
plugins: [require("tailwindcss-animate")],
1862
};
1963
export default config;

0 commit comments

Comments
 (0)