Skip to content

Commit dac6244

Browse files
futantanfutantan
committed
feat: 🎸 setup shadcn/ui
1 parent 932a0a5 commit dac6244

File tree

9 files changed

+340
-107
lines changed

9 files changed

+340
-107
lines changed

‎apps/web/app/globals.css

+74-25
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,76 @@
11
@tailwind base;
2-
@tailwind components;
3-
@tailwind utilities;
4-
5-
:root {
6-
--foreground-rgb: 0, 0, 0;
7-
--background-start-rgb: 214, 219, 220;
8-
--background-end-rgb: 255, 255, 255;
9-
}
10-
11-
@media (prefers-color-scheme: dark) {
12-
:root {
13-
--foreground-rgb: 255, 255, 255;
14-
--background-start-rgb: 0, 0, 0;
15-
--background-end-rgb: 0, 0, 0;
2+
@tailwind components;
3+
@tailwind utilities;
4+
5+
@layer base {
6+
:root {
7+
--background: 0 0% 100%;
8+
--foreground: 222.2 84% 4.9%;
9+
10+
--card: 0 0% 100%;
11+
--card-foreground: 222.2 84% 4.9%;
12+
13+
--popover: 0 0% 100%;
14+
--popover-foreground: 222.2 84% 4.9%;
15+
16+
--primary: 222.2 47.4% 11.2%;
17+
--primary-foreground: 210 40% 98%;
18+
19+
--secondary: 210 40% 96.1%;
20+
--secondary-foreground: 222.2 47.4% 11.2%;
21+
22+
--muted: 210 40% 96.1%;
23+
--muted-foreground: 215.4 16.3% 46.9%;
24+
25+
--accent: 210 40% 96.1%;
26+
--accent-foreground: 222.2 47.4% 11.2%;
27+
28+
--destructive: 0 84.2% 60.2%;
29+
--destructive-foreground: 210 40% 98%;
30+
31+
--border: 214.3 31.8% 91.4%;
32+
--input: 214.3 31.8% 91.4%;
33+
--ring: 222.2 84% 4.9%;
34+
35+
--radius: 0.5rem;
36+
}
37+
38+
.dark {
39+
--background: 222.2 84% 4.9%;
40+
--foreground: 210 40% 98%;
41+
42+
--card: 222.2 84% 4.9%;
43+
--card-foreground: 210 40% 98%;
44+
45+
--popover: 222.2 84% 4.9%;
46+
--popover-foreground: 210 40% 98%;
47+
48+
--primary: 210 40% 98%;
49+
--primary-foreground: 222.2 47.4% 11.2%;
50+
51+
--secondary: 217.2 32.6% 17.5%;
52+
--secondary-foreground: 210 40% 98%;
53+
54+
--muted: 217.2 32.6% 17.5%;
55+
--muted-foreground: 215 20.2% 65.1%;
56+
57+
--accent: 217.2 32.6% 17.5%;
58+
--accent-foreground: 210 40% 98%;
59+
60+
--destructive: 0 62.8% 30.6%;
61+
--destructive-foreground: 210 40% 98%;
62+
63+
--border: 217.2 32.6% 17.5%;
64+
--input: 217.2 32.6% 17.5%;
65+
--ring: 212.7 26.8% 83.9%;
66+
}
1667
}
17-
}
18-
19-
body {
20-
color: rgb(var(--foreground-rgb));
21-
background: linear-gradient(
22-
to bottom,
23-
transparent,
24-
rgb(var(--background-end-rgb))
25-
)
26-
rgb(var(--background-start-rgb));
27-
}
68+
69+
@layer base {
70+
* {
71+
@apply border-border;
72+
}
73+
body {
74+
@apply bg-background text-foreground;
75+
}
76+
}

‎apps/web/app/page.tsx

+4-73
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,11 @@
1+
import { Button } from '@/components/ui/button'
2+
import { cn } from '@/lib/utils'
13
import { SMART_TOKEN_LIST } from '@repo/smart-token-list'
24
import Image from 'next/image'
35

4-
function Gradient({
5-
conic,
6-
className,
7-
small,
8-
}: {
9-
small?: boolean
10-
conic?: boolean
11-
className?: string
12-
}): JSX.Element {
13-
return (
14-
<span
15-
className={`absolute mix-blend-normal will-change-[filter] rounded-[100%] ${
16-
small ? 'blur-[32px]' : 'blur-[75px]'
17-
} ${conic ? 'bg-glow-conic' : ''} ${className}`}
18-
/>
19-
)
20-
}
21-
226
export default function Page(): JSX.Element {
237
return (
24-
<main className="flex flex-col items-center justify-between min-h-screen p-24">
8+
<main className={cn("flex flex-col items-center justify-between min-h-screen p-24")}>
259
<div className="z-10 items-center justify-between w-full max-w-5xl font-mono text-sm lg:flex">
2610
<p className="fixed top-0 left-0 flex justify-center w-full px-4 pt-8 pb-6 border-b bg-gradient-to-b backdrop-blur-2xl border-neutral-800 bg-zinc-800/30 from-inherit lg:static lg:w-auto lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:bg-zinc-800/30">
2711
examples/with-tailwind -&nbsp;
@@ -48,61 +32,8 @@ export default function Page(): JSX.Element {
4832
</div>
4933

5034
<h1>{JSON.stringify(SMART_TOKEN_LIST)}</h1>
35+
<Button variant='outline'>hello shadcn/ui</Button>
5136

52-
<div className="relative flex place-items-center ">
53-
<div className="font-sans w-auto pb-16 pt-[48px] md:pb-24 lg:pb-32 md:pt-16 lg:pt-20 flex justify-between gap-8 items-center flex-col relative z-0">
54-
<div className="z-50 flex items-center justify-center w-full">
55-
<div className="absolute min-w-[614px] min-h-[614px]">
56-
<Image
57-
alt="Turborepo"
58-
height={614}
59-
src="circles.svg"
60-
width={614}
61-
/>
62-
</div>
63-
<div className="absolute z-50 flex items-center justify-center w-64 h-64">
64-
<Gradient
65-
className="opacity-90 w-[120px] h-[120px]"
66-
conic
67-
small
68-
/>
69-
</div>
70-
71-
<div className="w-[120px] h-[120px] z-50">
72-
<Image
73-
alt=""
74-
height={120}
75-
priority
76-
src="turborepo.svg"
77-
width={120}
78-
/>
79-
</div>
80-
</div>
81-
<Gradient
82-
className="top-[-500px] opacity-[0.15] w-[1000px] h-[1000px]"
83-
conic
84-
/>
85-
<div className="z-50 flex flex-col items-center justify-center gap-5 px-6 text-center lg:gap-6">
86-
<svg
87-
className="w-[160px] md:w-[200px] fill-white"
88-
viewBox="0 0 506 50"
89-
width={200}
90-
xmlns="http://www.w3.org/2000/svg"
91-
>
92-
<title>Turborepo logo</title>
93-
<path d="M53.7187 12.0038V1.05332H0.945312V12.0038H20.8673V48.4175H33.7968V12.0038H53.7187Z" />
94-
<path d="M83.5362 49.1431C99.764 49.1431 108.67 40.8972 108.67 27.3081V1.05332H95.7401V26.0547C95.7401 33.6409 91.7821 37.9287 83.5362 37.9287C75.2904 37.9287 71.3324 33.6409 71.3324 26.0547V1.05332H58.4029V27.3081C58.4029 40.8972 67.3084 49.1431 83.5362 49.1431Z" />
95-
<path d="M128.462 32.7174H141.325L151.484 48.4175H166.327L154.848 31.3321C161.313 29.0232 165.271 23.8778 165.271 16.8853C165.271 6.72646 157.685 1.05332 146.141 1.05332H115.532V48.4175H128.462V32.7174ZM128.462 22.4925V11.8719H145.481C150.033 11.8719 152.54 13.8509 152.54 17.2152C152.54 20.3816 150.033 22.4925 145.481 22.4925H128.462Z" />
96-
<path d="M171.287 48.4175H205.128C215.683 48.4175 221.752 43.404 221.752 35.0262C221.752 29.419 218.189 25.593 213.967 23.8778C216.87 22.4925 220.432 19.1942 220.432 13.9828C220.432 5.60502 214.495 1.05332 204.006 1.05332H171.287V48.4175ZM183.689 19.59V11.542H202.687C206.249 11.542 208.228 12.9273 208.228 15.566C208.228 18.2047 206.249 19.59 202.687 19.59H183.689ZM183.689 29.2871H203.875C207.371 29.2871 209.284 31.0022 209.284 33.5749C209.284 36.1476 207.371 37.8628 203.875 37.8628H183.689V29.2871Z" />
97-
<path d="M253.364 0.261719C236.806 0.261719 224.866 10.6185 224.866 24.7354C224.866 38.8523 236.806 49.2091 253.364 49.2091C269.922 49.2091 281.796 38.8523 281.796 24.7354C281.796 10.6185 269.922 0.261719 253.364 0.261719ZM253.364 11.4761C262.072 11.4761 268.602 16.6215 268.602 24.7354C268.602 32.8493 262.072 37.9947 253.364 37.9947C244.656 37.9947 238.126 32.8493 238.126 24.7354C238.126 16.6215 244.656 11.4761 253.364 11.4761Z" />
98-
<path d="M300.429 32.7174H313.292L323.451 48.4175H338.294L326.815 31.3321C333.28 29.0232 337.238 23.8778 337.238 16.8853C337.238 6.72646 329.652 1.05332 318.108 1.05332H287.499V48.4175H300.429V32.7174ZM300.429 22.4925V11.8719H317.448C322 11.8719 324.507 13.8509 324.507 17.2152C324.507 20.3816 322 22.4925 317.448 22.4925H300.429Z" />
99-
<path d="M343.254 1.05332V48.4175H389.299V37.467H355.92V29.7489H385.539V19.0622H355.92V12.0038H389.299V1.05332H343.254Z" />
100-
<path d="M408.46 33.3111H425.677C437.221 33.3111 444.807 27.7699 444.807 17.2152C444.807 6.59453 437.221 1.05332 425.677 1.05332H395.53V48.4175H408.46V33.3111ZM408.46 22.5585V11.8719H424.951C429.569 11.8719 432.076 13.8509 432.076 17.2152C432.076 20.5135 429.569 22.5585 424.951 22.5585H408.46Z" />
101-
<path d="M476.899 0.261719C460.341 0.261719 448.401 10.6185 448.401 24.7354C448.401 38.8523 460.341 49.2091 476.899 49.2091C493.456 49.2091 505.33 38.8523 505.33 24.7354C505.33 10.6185 493.456 0.261719 476.899 0.261719ZM476.899 11.4761C485.606 11.4761 492.137 16.6215 492.137 24.7354C492.137 32.8493 485.606 37.9947 476.899 37.9947C468.191 37.9947 461.66 32.8493 461.66 24.7354C461.66 16.6215 468.191 11.4761 476.899 11.4761Z" />
102-
</svg>
103-
</div>
104-
</div>
105-
</div>
10637
</main>
10738
)
10839
}

‎apps/web/components.json

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
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": "app/globals.css",
9+
"baseColor": "slate",
10+
"cssVariables": true,
11+
"prefix": ""
12+
},
13+
"aliases": {
14+
"components": "@/components",
15+
"utils": "@/lib/utils"
16+
}
17+
}

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

+56
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 }

‎apps/web/lib/utils.ts

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

‎apps/web/package.json

+7-1
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,16 @@
1010
"type-check": "tsc --noEmit"
1111
},
1212
"dependencies": {
13+
"@radix-ui/react-slot": "^1.1.0",
1314
"@repo/smart-token-list": "workspace:*",
15+
"class-variance-authority": "^0.7.0",
16+
"clsx": "^2.1.1",
17+
"lucide-react": "^0.404.0",
1418
"next": "^14.2.3",
1519
"react": "^18.2.0",
16-
"react-dom": "^18.2.0"
20+
"react-dom": "^18.2.0",
21+
"tailwind-merge": "^2.4.0",
22+
"tailwindcss-animate": "^1.0.7"
1723
},
1824
"devDependencies": {
1925
"@next/eslint-plugin-next": "^14.2.3",

‎apps/web/tailwind.config.ts

+78-7
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,80 @@
1-
// tailwind config is required for editor support
1+
import type { Config } from "tailwindcss"
22

3-
import type { Config } from 'tailwindcss'
3+
const config = {
4+
darkMode: ["class"],
5+
content: [
6+
'./pages/**/*.{ts,tsx}',
7+
'./components/**/*.{ts,tsx}',
8+
'./app/**/*.{ts,tsx}',
9+
'./src/**/*.{ts,tsx}',
10+
],
11+
prefix: "",
12+
theme: {
13+
container: {
14+
center: true,
15+
padding: "2rem",
16+
screens: {
17+
"2xl": "1400px",
18+
},
19+
},
20+
extend: {
21+
colors: {
22+
border: "hsl(var(--border))",
23+
input: "hsl(var(--input))",
24+
ring: "hsl(var(--ring))",
25+
background: "hsl(var(--background))",
26+
foreground: "hsl(var(--foreground))",
27+
primary: {
28+
DEFAULT: "hsl(var(--primary))",
29+
foreground: "hsl(var(--primary-foreground))",
30+
},
31+
secondary: {
32+
DEFAULT: "hsl(var(--secondary))",
33+
foreground: "hsl(var(--secondary-foreground))",
34+
},
35+
destructive: {
36+
DEFAULT: "hsl(var(--destructive))",
37+
foreground: "hsl(var(--destructive-foreground))",
38+
},
39+
muted: {
40+
DEFAULT: "hsl(var(--muted))",
41+
foreground: "hsl(var(--muted-foreground))",
42+
},
43+
accent: {
44+
DEFAULT: "hsl(var(--accent))",
45+
foreground: "hsl(var(--accent-foreground))",
46+
},
47+
popover: {
48+
DEFAULT: "hsl(var(--popover))",
49+
foreground: "hsl(var(--popover-foreground))",
50+
},
51+
card: {
52+
DEFAULT: "hsl(var(--card))",
53+
foreground: "hsl(var(--card-foreground))",
54+
},
55+
},
56+
borderRadius: {
57+
lg: "var(--radius)",
58+
md: "calc(var(--radius) - 2px)",
59+
sm: "calc(var(--radius) - 4px)",
60+
},
61+
keyframes: {
62+
"accordion-down": {
63+
from: { height: "0" },
64+
to: { height: "var(--radix-accordion-content-height)" },
65+
},
66+
"accordion-up": {
67+
from: { height: "var(--radix-accordion-content-height)" },
68+
to: { height: "0" },
69+
},
70+
},
71+
animation: {
72+
"accordion-down": "accordion-down 0.2s ease-out",
73+
"accordion-up": "accordion-up 0.2s ease-out",
74+
},
75+
},
76+
},
77+
plugins: [require("tailwindcss-animate")],
78+
} satisfies Config
479

5-
const config: Pick<Config, 'content' | 'presets'> = {
6-
content: ['./app/**/*.tsx'],
7-
}
8-
9-
export default config
80+
export default config

‎apps/web/tsconfig.json

+5-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,11 @@
11
{
22
"extends": "@repo/typescript-config/nextjs.json",
33
"compilerOptions": {
4-
"plugins": [{ "name": "next" }]
4+
"plugins": [{ "name": "next" }],
5+
"baseUrl": ".",
6+
"paths": {
7+
"@/*": ["./*"]
8+
},
59
},
610
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
711
"exclude": ["node_modules"]

0 commit comments

Comments
 (0)