Skip to content

Commit 71d6848

Browse files
javinchuajavinchua
committed
add shadcn
1 parent db19038 commit 71d6848

File tree

11 files changed

+300
-9
lines changed

11 files changed

+300
-9
lines changed

‎project/apps/web/app/globals.css‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
@tailwind base;
2+
@tailwind components;
3+
@tailwind utilities;
14
:root {
25
--background: #ffffff;
36
--foreground: #171717;
@@ -37,3 +40,68 @@ a {
3740
color-scheme: dark;
3841
}
3942
}
43+
44+
@layer base {
45+
:root {
46+
--background: 0 0% 100%;
47+
--foreground: 0 0% 3.9%;
48+
--card: 0 0% 100%;
49+
--card-foreground: 0 0% 3.9%;
50+
--popover: 0 0% 100%;
51+
--popover-foreground: 0 0% 3.9%;
52+
--primary: 0 0% 9%;
53+
--primary-foreground: 0 0% 98%;
54+
--secondary: 0 0% 96.1%;
55+
--secondary-foreground: 0 0% 9%;
56+
--muted: 0 0% 96.1%;
57+
--muted-foreground: 0 0% 45.1%;
58+
--accent: 0 0% 96.1%;
59+
--accent-foreground: 0 0% 9%;
60+
--destructive: 0 84.2% 60.2%;
61+
--destructive-foreground: 0 0% 98%;
62+
--border: 0 0% 89.8%;
63+
--input: 0 0% 89.8%;
64+
--ring: 0 0% 3.9%;
65+
--chart-1: 12 76% 61%;
66+
--chart-2: 173 58% 39%;
67+
--chart-3: 197 37% 24%;
68+
--chart-4: 43 74% 66%;
69+
--chart-5: 27 87% 67%;
70+
--radius: 0.5rem;
71+
}
72+
.dark {
73+
--background: 0 0% 3.9%;
74+
--foreground: 0 0% 98%;
75+
--card: 0 0% 3.9%;
76+
--card-foreground: 0 0% 98%;
77+
--popover: 0 0% 3.9%;
78+
--popover-foreground: 0 0% 98%;
79+
--primary: 0 0% 98%;
80+
--primary-foreground: 0 0% 9%;
81+
--secondary: 0 0% 14.9%;
82+
--secondary-foreground: 0 0% 98%;
83+
--muted: 0 0% 14.9%;
84+
--muted-foreground: 0 0% 63.9%;
85+
--accent: 0 0% 14.9%;
86+
--accent-foreground: 0 0% 98%;
87+
--destructive: 0 62.8% 30.6%;
88+
--destructive-foreground: 0 0% 98%;
89+
--border: 0 0% 14.9%;
90+
--input: 0 0% 14.9%;
91+
--ring: 0 0% 83.1%;
92+
--chart-1: 220 70% 50%;
93+
--chart-2: 160 60% 45%;
94+
--chart-3: 30 80% 55%;
95+
--chart-4: 280 65% 60%;
96+
--chart-5: 340 75% 55%;
97+
}
98+
}
99+
100+
@layer base {
101+
* {
102+
@apply border-border;
103+
}
104+
body {
105+
@apply bg-background text-foreground;
106+
}
107+
}

‎project/apps/web/app/page.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import Image from "next/image";
2-
import { Button } from "@repo/ui/button";
32
import styles from "./page.module.css";
3+
import { Button } from "@/components/ui/button";
44

55
export default function Home() {
66
return (
@@ -46,9 +46,6 @@ export default function Home() {
4646
Read our docs
4747
</a>
4848
</div>
49-
<Button appName="web" className={styles.secondary}>
50-
Open alert
51-
</Button>
5249
</main>
5350
<footer className={styles.footer}>
5451
<a
@@ -93,6 +90,7 @@ export default function Home() {
9390
/>
9491
Go to nextjs.org →
9592
</a>
93+
<Button>Hi</Button>
9694
</footer>
9795
</div>
9896
);

‎project/apps/web/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.js",
8+
"css": "app/globals.css",
9+
"baseColor": "neutral",
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+
}

‎project/apps/web/components/ui/button.tsx‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import * as React from "react"
2+
import { Slot } from "@radix-ui/react-slot"
3+
import { cva, type VariantProps } from "class-variance-authority"
4+
5+
import { cn } from "@/lib/utils"
6+
7+
const buttonVariants = cva(
8+
"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
9+
{
10+
variants: {
11+
variant: {
12+
default: "bg-primary text-primary-foreground hover:bg-primary/90",
13+
destructive:
14+
"bg-destructive text-destructive-foreground hover:bg-destructive/90",
15+
outline:
16+
"border border-input bg-background hover:bg-accent hover:text-accent-foreground",
17+
secondary:
18+
"bg-secondary text-secondary-foreground hover:bg-secondary/80",
19+
ghost: "hover:bg-accent hover:text-accent-foreground",
20+
link: "text-primary underline-offset-4 hover:underline",
21+
},
22+
size: {
23+
default: "h-10 px-4 py-2",
24+
sm: "h-9 rounded-md px-3",
25+
lg: "h-11 rounded-md px-8",
26+
icon: "h-10 w-10",
27+
},
28+
},
29+
defaultVariants: {
30+
variant: "default",
31+
size: "default",
32+
},
33+
}
34+
)
35+
36+
export interface ButtonProps
37+
extends React.ButtonHTMLAttributes<HTMLButtonElement>,
38+
VariantProps<typeof buttonVariants> {
39+
asChild?: boolean
40+
}
41+
42+
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
43+
({ className, variant, size, asChild = false, ...props }, ref) => {
44+
const Comp = asChild ? Slot : "button"
45+
return (
46+
<Comp
47+
className={cn(buttonVariants({ variant, size, className }))}
48+
ref={ref}
49+
{...props}
50+
/>
51+
)
52+
}
53+
)
54+
Button.displayName = "Button"
55+
56+
export { Button, buttonVariants }

‎project/apps/web/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+
}

‎project/apps/web/package.json‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,15 @@
99
"lint": "next lint"
1010
},
1111
"dependencies": {
12+
"@radix-ui/react-slot": "^1.1.0",
13+
"class-variance-authority": "^0.7.0",
14+
"clsx": "^2.1.1",
15+
"lucide-react": "^0.441.0",
1216
"next": "14.2.6",
1317
"react": "18.3.1",
1418
"react-dom": "18.3.1",
19+
"tailwind-merge": "^2.5.2",
20+
"tailwindcss-animate": "^1.0.7",
1521
"zod": "^3.23.8"
1622
},
1723
"devDependencies": {

‎project/apps/web/tailwind.config.js‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
/** @type {import('tailwindcss').Config} */
2+
module.exports = {
3+
darkMode: ["class"],
4+
content: ["./src/**/*.{html,js,ts}"],
5+
theme: {
6+
extend: {
7+
borderRadius: {
8+
lg: 'var(--radius)',
9+
md: 'calc(var(--radius) - 2px)',
10+
sm: 'calc(var(--radius) - 4px)'
11+
},
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+
}
55+
},
56+
plugins: [require("tailwindcss-animate")],
57+
};

‎project/apps/web/tsconfig.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,10 @@
55
{
66
"name": "next"
77
}
8-
]
8+
],
9+
"paths": {
10+
"@/*": ["./*"]
11+
}
912
},
1013
"include": [
1114
"next-env.d.ts",

‎project/packages/eslint-config/next.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ module.exports = {
3030
// Ignore dotfiles
3131
".*.js",
3232
"node_modules/",
33+
"tailwind.config.js",
3334
],
3435
overrides: [{ files: ["*.js?(x)", "*.ts?(x)"] }],
3536
};

‎project/packages/typescript-config/nextjs.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,6 @@
88
"moduleResolution": "Bundler",
99
"allowJs": true,
1010
"jsx": "preserve",
11-
"noEmit": true
11+
"noEmit": true,
1212
}
1313
}

0 commit comments

Comments
 (0)