Skip to content

Commit 84ee676

Browse files
blazedglimmerblazedglimmer
committed
Add Shadcn setup and components
1 parent 9ab9ea4 commit 84ee676

13 files changed

+851
-70
lines changed

‎app/globals.css

Lines changed: 59 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -2,32 +2,68 @@
22
@tailwind components;
33
@tailwind utilities;
44

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) {
5+
@layer base {
126
:root {
13-
--foreground-rgb: 255, 255, 255;
14-
--background-start-rgb: 0, 0, 0;
15-
--background-end-rgb: 0, 0, 0;
7+
--background: 0 0% 100%;
8+
--foreground: 240 10% 3.9%;
9+
--card: 0 0% 100%;
10+
--card-foreground: 240 10% 3.9%;
11+
--popover: 0 0% 100%;
12+
--popover-foreground: 240 10% 3.9%;
13+
--primary: 240 5.9% 10%;
14+
--primary-foreground: 0 0% 98%;
15+
--secondary: 240 4.8% 95.9%;
16+
--secondary-foreground: 240 5.9% 10%;
17+
--muted: 240 4.8% 95.9%;
18+
--muted-foreground: 240 3.8% 46.1%;
19+
--accent: 240 4.8% 95.9%;
20+
--accent-foreground: 240 5.9% 10%;
21+
--destructive: 0 84.2% 60.2%;
22+
--destructive-foreground: 0 0% 98%;
23+
--border: 240 5.9% 90%;
24+
--input: 240 5.9% 90%;
25+
--ring: 240 10% 3.9%;
26+
--radius: 0.5rem;
27+
--chart-1: 12 76% 61%;
28+
--chart-2: 173 58% 39%;
29+
--chart-3: 197 37% 24%;
30+
--chart-4: 43 74% 66%;
31+
--chart-5: 27 87% 67%;
1632
}
17-
}
1833

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));
34+
.dark {
35+
--background: 240 10% 3.9%;
36+
--foreground: 0 0% 98%;
37+
--card: 240 10% 3.9%;
38+
--card-foreground: 0 0% 98%;
39+
--popover: 240 10% 3.9%;
40+
--popover-foreground: 0 0% 98%;
41+
--primary: 0 0% 98%;
42+
--primary-foreground: 240 5.9% 10%;
43+
--secondary: 240 3.7% 15.9%;
44+
--secondary-foreground: 0 0% 98%;
45+
--muted: 240 3.7% 15.9%;
46+
--muted-foreground: 240 5% 64.9%;
47+
--accent: 240 3.7% 15.9%;
48+
--accent-foreground: 0 0% 98%;
49+
--destructive: 0 62.8% 30.6%;
50+
--destructive-foreground: 0 0% 98%;
51+
--border: 240 3.7% 15.9%;
52+
--input: 240 3.7% 15.9%;
53+
--ring: 240 4.9% 83.9%;
54+
--chart-1: 220 70% 50%;
55+
--chart-2: 160 60% 45%;
56+
--chart-3: 30 80% 55%;
57+
--chart-4: 280 65% 60%;
58+
--chart-5: 340 75% 55%;
59+
}
2760
}
2861

29-
@layer utilities {
30-
.text-balance {
31-
text-wrap: balance;
62+
@layer base {
63+
* {
64+
@apply border-border;
3265
}
33-
}
66+
body {
67+
@apply bg-background text-foreground;
68+
}
69+
}

‎app/layout.tsx

Lines changed: 18 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
1-
import type { Metadata } from "next";
2-
import { Inter } from "next/font/google";
3-
import "./globals.css";
1+
import type { Metadata } from 'next';
2+
import { Inter } from 'next/font/google';
3+
import './globals.css';
4+
import { ThemeProvider } from 'next-themes';
45

5-
const inter = Inter({ subsets: ["latin"] });
6+
const inter = Inter({ subsets: ['latin'] });
67

78
export const metadata: Metadata = {
8-
title: "Create Next App",
9-
description: "Generated by create next app",
9+
title: 'Create Next App',
10+
description: 'Generated by create next app',
1011
};
1112

1213
export default function RootLayout({
@@ -15,8 +16,17 @@ export default function RootLayout({
1516
children: React.ReactNode;
1617
}>) {
1718
return (
18-
<html lang="en">
19-
<body className={inter.className}>{children}</body>
19+
<html lang="en" suppressHydrationWarning>
20+
<body className={inter.className}>
21+
<ThemeProvider
22+
attribute="class"
23+
defaultTheme="system"
24+
enableSystem
25+
disableTransitionOnChange
26+
>
27+
{children}
28+
</ThemeProvider>
29+
</body>
2030
</html>
2131
);
2232
}

‎components.json

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

‎components/createtodo.tsx

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -20,10 +20,7 @@ export default function CreateTodo() {
2020
return (
2121
<form ref={formRef} onSubmit={handleSubmit} className="space-y-4">
2222
<div>
23-
<label
24-
htmlFor="title"
25-
className="block text-sm font-medium text-gray-700"
26-
>
23+
<label htmlFor="title" className="block text-sm font-medium ">
2724
Title
2825
</label>
2926
<input
@@ -35,10 +32,7 @@ export default function CreateTodo() {
3532
/>
3633
</div>
3734
<div>
38-
<label
39-
htmlFor="description"
40-
className="block text-sm font-medium text-gray-700"
41-
>
35+
<label htmlFor="description" className="block text-sm font-medium ">
4236
Description
4337
</label>
4438
<textarea
@@ -50,7 +44,7 @@ export default function CreateTodo() {
5044
</div>
5145
<button
5246
type="submit"
53-
className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
47+
className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
5448
>
5549
Create Todo
5650
</button>

‎components/mode-toggle.tsx

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
'use client';
2+
3+
import * as React from 'react';
4+
import { Moon, Sun } from 'lucide-react';
5+
import { useTheme } from 'next-themes';
6+
7+
import { Button } from '@/components/ui/button';
8+
import {
9+
DropdownMenu,
10+
DropdownMenuContent,
11+
DropdownMenuItem,
12+
DropdownMenuTrigger,
13+
} from '@/components/ui/dropdown-menu';
14+
15+
export function ModeToggle() {
16+
const { setTheme } = useTheme();
17+
18+
return (
19+
<DropdownMenu>
20+
<DropdownMenuTrigger asChild>
21+
<Button variant="outline" size="icon">
22+
<Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
23+
<Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
24+
<span className="sr-only">Toggle theme</span>
25+
</Button>
26+
</DropdownMenuTrigger>
27+
<DropdownMenuContent align="end">
28+
<DropdownMenuItem onClick={() => setTheme('light')}>
29+
Light
30+
</DropdownMenuItem>
31+
<DropdownMenuItem onClick={() => setTheme('dark')}>
32+
Dark
33+
</DropdownMenuItem>
34+
<DropdownMenuItem onClick={() => setTheme('system')}>
35+
System
36+
</DropdownMenuItem>
37+
</DropdownMenuContent>
38+
</DropdownMenu>
39+
);
40+
}

‎components/signup.tsx

Lines changed: 4 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -27,10 +27,7 @@ export default function SignUp() {
2727
className="space-y-4 max-w-md mx-auto"
2828
>
2929
<div>
30-
<label
31-
htmlFor="username"
32-
className="block text-sm font-medium text-gray-700"
33-
>
30+
<label htmlFor="username" className="block text-sm font-medium ">
3431
Username
3532
</label>
3633
<input
@@ -42,10 +39,7 @@ export default function SignUp() {
4239
/>
4340
</div>
4441
<div>
45-
<label
46-
htmlFor="password"
47-
className="block text-sm font-medium text-gray-700"
48-
>
42+
<label htmlFor="password" className="block text-sm font-medium ">
4943
Password
5044
</label>
5145
<input
@@ -57,10 +51,7 @@ export default function SignUp() {
5751
/>
5852
</div>
5953
<div>
60-
<label
61-
htmlFor="firstName"
62-
className="block text-sm font-medium text-gray-700"
63-
>
54+
<label htmlFor="firstName" className="block text-sm font-medium ">
6455
First Name
6556
</label>
6657
<input
@@ -72,10 +63,7 @@ export default function SignUp() {
7263
/>
7364
</div>
7465
<div>
75-
<label
76-
htmlFor="lastName"
77-
className="block text-sm font-medium text-gray-700"
78-
>
66+
<label htmlFor="lastName" className="block text-sm font-medium ">
7967
Last Name
8068
</label>
8169
<input

‎components/theme-provider.tsx

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
'use client';
2+
3+
import * as React from 'react';
4+
import { ThemeProvider as NextThemesProvider } from 'next-themes';
5+
import { type ThemeProviderProps } from 'next-themes/dist/types';
6+
7+
export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
8+
return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
9+
}

‎components/ui/button.tsx

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

0 commit comments

Comments
 (0)