shadcn

Author: StackOverflowIsBetterThanAnyAI

components.json

@@ -0,0 +1,22 @@
+{
+    "$schema": "https://ui.shadcn.com/schema.json",
+    "style": "new-york",
+    "rsc": true,
+    "tsx": true,
+    "tailwind": {
+        "config": "",
+        "css": "src/app/globals.css",
+        "baseColor": "zinc",
+        "cssVariables": true,
+        "prefix": ""
+    },
+    "iconLibrary": "lucide",
+    "aliases": {
+        "components": "@/components",
+        "utils": "@/lib/utils",
+        "ui": "@/components/ui",
+        "lib": "@/lib",
+        "hooks": "@/hooks"
+    },
+    "registries": {}
+}

package-lock.json

@@ -9,10 +9,11 @@
         "lint": "eslint"
     },
     "dependencies": {
-        "lint": "next lint",
+        "clsx": "^2.1.1",
         "next": "15.5.2",
         "react": "19.1.0",
-        "react-dom": "19.1.0"
+        "react-dom": "19.1.0",
+        "tailwind-merge": "^3.3.1"
     },
     "prettier": "prettier-es5",
     "devDependencies": {

package.json

@@ -1,10 +1,5 @@
 @import 'tailwindcss';
 
-:root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-}
-
 a:hover,
 button:not(:disabled):hover,
 input[type='checkbox']:not(:disabled):hover,
@@ -20,10 +15,35 @@ input[type='button']:not(:disabled):active {
 }
 
 body {
-    background: var(--background);
-    color: var(--foreground);
     border: none;
     font-family: Arial, Helvetica, sans-serif;
     margin: 0;
     padding: 0;
 }
+
+@theme inline {
+    --radius-sm: calc(var(--radius) - 4px);
+    --radius-md: calc(var(--radius) - 2px);
+    --radius-lg: var(--radius);
+    --radius-xl: calc(var(--radius) + 4px);
+    --color-background: var(--background);
+    --color-foreground: var(--foreground);
+    --color-card: var(--card);
+    --color-card-foreground: var(--card-foreground);
+    --color-muted-foreground: var(--muted-foreground);
+}
+
+:root {
+    --radius: 0.625rem;
+    --background: oklch(1 0 0);
+    --foreground: oklch(0.141 0.005 285.823);
+    --card: oklch(1 0 0);
+    --card-foreground: oklch(0.141 0.005 285.823);
+    --muted-foreground: oklch(0.552 0.016 285.938);
+}
+
+@layer base {
+    body {
+        @apply bg-background text-foreground;
+    }
+}

src/app/globals.css

@@ -0,0 +1,71 @@
+import * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+function Card({ className, ...props }: React.ComponentProps<'div'>) {
+    return (
+        <div
+            data-slot="card"
+            className={cn(
+                'bg-card text-card-foreground flex flex-col gap-6 rounded-xl py-6 shadow-sm',
+                className
+            )}
+            {...props}
+        />
+    )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<'div'>) {
+    return (
+        <div
+            data-slot="card-header"
+            className={cn(
+                '@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto]',
+                className
+            )}
+            {...props}
+        />
+    )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<'div'>) {
+    return (
+        <div
+            data-slot="card-title"
+            className={cn('leading-none font-semibold', className)}
+            {...props}
+        />
+    )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<'div'>) {
+    return (
+        <div
+            data-slot="card-description"
+            className={cn('text-muted-foreground text-sm', className)}
+            {...props}
+        />
+    )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<'div'>) {
+    return (
+        <div
+            data-slot="card-content"
+            className={cn('px-6', className)}
+            {...props}
+        />
+    )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<'div'>) {
+    return (
+        <div
+            data-slot="card-footer"
+            className={cn('flex items-center px-6', className)}
+            {...props}
+        />
+    )
+}
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

src/components/ui/card.tsx

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+    return twMerge(clsx(inputs))
+}