create-ej-app 4.0.0 → 6.0.0

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2023 Ekansh Jain
+Copyright (c) 2025 Ekansh Jain
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/cli.js

@@ -49,6 +49,10 @@ commander_1.program.action(() => __awaiter(void 0, void 0, void 0, function* ()
                 {
                     name: 'prisma-advanced',
                     message: 'Advanced setup with User Types and ACLs (roles & permissions)'
+                },
+                {
+                    name: 'new',
+                    message: 'Advanced new setup with next 16, Better Auth and Drizzle ORM'
                 }
             ]
         }

package/cli.ts

@@ -45,6 +45,11 @@ program.action(async () => {
           name: 'prisma-advanced',
           message:
             'Advanced setup with User Types and ACLs (roles & permissions)'
+        },
+        {
+          name: 'new',
+          message:
+            'Advanced new setup with next 16, Better Auth and Drizzle ORM'
         }
       ]
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-ej-app",
-  "version": "4.0.0",
+  "version": "6.0.0",
   "description": "Bootstrap a next.js app with my preferred setup",
   "main": "cli.js",
   "scripts": {
@@ -30,12 +30,12 @@
   },
   "homepage": "https://github.com/ejekanshjain/create-ej-app#readme",
   "dependencies": {
-    "commander": "^12.1.0",
+    "commander": "^14.0.2",
     "copy-dir": "^1.3.0",
     "enquirer": "^2.4.1"
   },
   "devDependencies": {
-    "@types/node": "^20.14.9",
-    "typescript": "^5.5.2"
+    "@types/node": "^24.10.0",
+    "typescript": "^5.9.3"
   }
 }

package/template/new/.env.example

@@ -0,0 +1,13 @@
+NODE_ENV="production"
+DATABASE_URL="postgresql://postgres:postgres@localhost:5432/postgres"
+BETTER_AUTH_URL="http://localhost:3000"
+BETTER_AUTH_SECRET="secret"
+BETTER_AUTH_GITHUB_ID="github_id"
+BETTER_AUTH_GITHUB_SECRET="github_secret"
+BETTER_AUTH_GOOGLE_ID="google_id"
+BETTER_AUTH_GOOGLE_SECRET="google_secret"
+EMAIL_SERVER_USER="username"
+EMAIL_SERVER_PASSWORD="password"
+EMAIL_SERVER_HOST="smtp.example.com"
+EMAIL_SERVER_PORT="465"
+EMAIL_FROM="no-reply@example.com"

package/template/new/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": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "~/components",
+    "utils": "~/lib/cn",
+    "ui": "~/components/ui",
+    "lib": "~/lib",
+    "hooks": "~/hooks"
+  },
+  "registries": {}
+}

package/template/new/drizzle.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from 'drizzle-kit'
+import { env } from '~/env'
+
+export default defineConfig({
+  schema: './src/db/schema.ts',
+  dialect: 'postgresql',
+  dbCredentials: {
+    url: env.DATABASE_URL
+  }
+})

package/template/new/eslint.config.mjs

@@ -0,0 +1,18 @@
+// @ts-ignore
+import nextVitals from 'eslint-config-next/core-web-vitals'
+// import nextTs from 'eslint-config-next/typescript'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+const eslintConfig = defineConfig([
+  ...nextVitals,
+  // ...nextTs,
+  globalIgnores([
+    'node_modules/**',
+    '.next/**',
+    'out/**',
+    'build/**',
+    'next-env.d.ts'
+  ])
+])
+
+export default eslintConfig

package/template/new/next.config.ts

@@ -0,0 +1,14 @@
+import bundleAnalyzer from '@next/bundle-analyzer'
+import type { NextConfig } from 'next'
+import { withWorkflow } from 'workflow/next'
+import { env } from '~/env'
+
+const nextConfig: NextConfig = {
+  reactCompiler: true
+}
+
+const withBundleAnalyzer = bundleAnalyzer({
+  enabled: env.ANALYZE === 'true'
+})
+
+export default withWorkflow(withBundleAnalyzer(nextConfig))

package/template/new/package.json

@@ -0,0 +1,81 @@
+{
+  "name": "my-app",
+  "description": "A Legendary Next.js App",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "analyze": "ANALYZE=true next build --webpack",
+    "start": "next start",
+    "lint": "eslint",
+    "format": "prettier --write \"./src/**/*.{js,cjs,mjs,jsx,ts,tsx}\"",
+    "db:push": "drizzle-kit push",
+    "db:studio": "drizzle-kit studio",
+    "gen:auth": "bunx @better-auth/cli generate"
+  },
+  "dependencies": {
+    "@hookform/resolvers": "5.2.2",
+    "@next/third-parties": "16.0.1",
+    "@paralleldrive/cuid2": "3.0.4",
+    "@radix-ui/react-avatar": "1.1.11",
+    "@radix-ui/react-checkbox": "1.3.3",
+    "@radix-ui/react-collapsible": "1.1.12",
+    "@radix-ui/react-dialog": "1.1.15",
+    "@radix-ui/react-dropdown-menu": "2.1.16",
+    "@radix-ui/react-label": "2.1.8",
+    "@radix-ui/react-popover": "1.1.15",
+    "@radix-ui/react-radio-group": "1.3.8",
+    "@radix-ui/react-select": "2.2.6",
+    "@radix-ui/react-separator": "1.1.8",
+    "@radix-ui/react-slider": "1.3.6",
+    "@radix-ui/react-slot": "1.2.4",
+    "@t3-oss/env-nextjs": "0.13.8",
+    "@tanstack/react-query": "5.90.7",
+    "better-auth": "1.3.34",
+    "class-variance-authority": "0.7.1",
+    "clsx": "2.1.1",
+    "date-fns": "4.1.0",
+    "decimal.js": "10.6.0",
+    "drizzle-orm": "0.44.7",
+    "lucide-react": "0.552.0",
+    "next": "16.0.1",
+    "next-safe-action": "8.0.11",
+    "next-themes": "0.4.6",
+    "nextjs-toploader": "3.9.17",
+    "nodemailer": "7.0.10",
+    "postgres": "3.4.7",
+    "react": "19.2.0",
+    "react-day-picker": "9.11.1",
+    "react-dom": "19.2.0",
+    "react-hook-form": "7.66.0",
+    "sonner": "2.0.7",
+    "tailwind-merge": "3.3.1",
+    "tw-animate-css": "1.4.0",
+    "workflow": "4.0.1-beta.11",
+    "zod": "4.1.12"
+  },
+  "devDependencies": {
+    "@next/bundle-analyzer": "16.0.1",
+    "@tailwindcss/postcss": "4.1.16",
+    "@types/bun": "1.3.1",
+    "@types/react": "19.2.2",
+    "@types/react-dom": "19.2.2",
+    "babel-plugin-react-compiler": "1.0.0",
+    "drizzle-kit": "0.31.6",
+    "eslint": "9.39.1",
+    "eslint-config-next": "16.0.1",
+    "prettier": "3.6.2",
+    "prettier-plugin-organize-imports": "4.3.0",
+    "prettier-plugin-tailwindcss": "0.7.1",
+    "tailwindcss": "4.1.16",
+    "typescript": "5.9.3"
+  },
+  "trustedDependencies": [
+    "@swc/core",
+    "@tailwindcss/oxide",
+    "esbuild",
+    "sharp",
+    "unrs-resolver"
+  ]
+}

package/template/new/postcss.config.mjs

@@ -0,0 +1,5 @@
+const config = {
+  plugins: ['@tailwindcss/postcss']
+}
+
+export default config

package/template/new/prettier.config.mjs

@@ -0,0 +1,11 @@
+/** @type {import('prettier').Config & import('prettier-plugin-tailwindcss').PluginOptions} */
+const config = {
+  plugins: ['prettier-plugin-organize-imports', 'prettier-plugin-tailwindcss'],
+  arrowParens: 'avoid',
+  trailingComma: 'none',
+  semi: false,
+  singleQuote: true,
+  tabWidth: 2
+}
+
+export default config

package/template/new/public/placeholder.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="1200" fill="none"><rect width="1200" height="1200" fill="#EAEAEA" rx="3"/><g opacity=".5"><g opacity=".5"><path fill="#FAFAFA" d="M600.709 736.5c-75.454 0-136.621-61.167-136.621-136.62 0-75.454 61.167-136.621 136.621-136.621 75.453 0 136.62 61.167 136.62 136.621 0 75.453-61.167 136.62-136.62 136.62Z"/><path stroke="#C9C9C9" stroke-width="2.418" d="M600.709 736.5c-75.454 0-136.621-61.167-136.621-136.62 0-75.454 61.167-136.621 136.621-136.621 75.453 0 136.62 61.167 136.62 136.621 0 75.453-61.167 136.62-136.62 136.62Z"/></g><path stroke="url(#a)" stroke-width="2.418" d="M0-1.209h553.581" transform="scale(1 -1) rotate(45 1163.11 91.165)"/><path stroke="url(#b)" stroke-width="2.418" d="M404.846 598.671h391.726"/><path stroke="url(#c)" stroke-width="2.418" d="M599.5 795.742V404.017"/><path stroke="url(#d)" stroke-width="2.418" d="m795.717 796.597-391.441-391.44"/><path fill="#fff" d="M600.709 656.704c-31.384 0-56.825-25.441-56.825-56.824 0-31.384 25.441-56.825 56.825-56.825 31.383 0 56.824 25.441 56.824 56.825 0 31.383-25.441 56.824-56.824 56.824Z"/><g clip-path="url(#e)"><path fill="#666" fill-rule="evenodd" d="M616.426 586.58h-31.434v16.176l3.553-3.554.531-.531h9.068l.074-.074 8.463-8.463h2.565l7.18 7.181V586.58Zm-15.715 14.654 3.698 3.699 1.283 1.282-2.565 2.565-1.282-1.283-5.2-5.199h-6.066l-5.514 5.514-.073.073v2.876a2.418 2.418 0 0 0 2.418 2.418h26.598a2.418 2.418 0 0 0 2.418-2.418v-8.317l-8.463-8.463-7.181 7.181-.071.072Zm-19.347 5.442v4.085a6.045 6.045 0 0 0 6.046 6.045h26.598a6.044 6.044 0 0 0 6.045-6.045v-7.108l1.356-1.355-1.282-1.283-.074-.073v-17.989h-38.689v23.43l-.146.146.146.147Z" clip-rule="evenodd"/></g><path stroke="#C9C9C9" stroke-width="2.418" d="M600.709 656.704c-31.384 0-56.825-25.441-56.825-56.824 0-31.384 25.441-56.825 56.825-56.825 31.383 0 56.824 25.441 56.824 56.825 0 31.383-25.441 56.824-56.824 56.824Z"/></g><defs><linearGradient id="a" x1="554.061" x2="-.48" y1=".083" y2=".087" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="b" x1="796.912" x2="404.507" y1="599.963" y2="599.965" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="c" x1="600.792" x2="600.794" y1="403.677" y2="796.082" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="d" x1="404.85" x2="796.972" y1="403.903" y2="796.02" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><clipPath id="e"><path fill="#fff" d="M581.364 580.535h38.689v38.689h-38.689z"/></clipPath></defs></svg>

package/template/new/src/app/(auth)/login/email-login-form.tsx

@@ -0,0 +1,97 @@
+'use client'
+
+import { zodResolver } from '@hookform/resolvers/zod'
+import { Mail } from 'lucide-react'
+import { useState } from 'react'
+import { useForm } from 'react-hook-form'
+import { z } from 'zod'
+import { Button } from '~/components/ui/button'
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage
+} from '~/components/ui/form'
+import { Input } from '~/components/ui/input'
+import { signIn } from '~/lib/auth-client'
+import { toastSuccessMessage } from '~/lib/toast-message'
+
+const emailLoginFormSchema = z.object({
+  email: z.email()
+})
+
+export const EmailLoginForm = () => {
+  const form = useForm<z.infer<typeof emailLoginFormSchema>>({
+    resolver: zodResolver(emailLoginFormSchema),
+    defaultValues: {
+      email: ''
+    }
+  })
+
+  const [isLoading, setIsLoading] = useState(false)
+  const [isSent, setIsSent] = useState('')
+
+  async function onSubmit(values: z.infer<typeof emailLoginFormSchema>) {
+    const email = values.email
+
+    if (!email) return
+
+    setIsLoading(true)
+    try {
+      const res = await signIn.magicLink({
+        email,
+        name: ''
+      })
+      if (res?.error) throw res.error
+      setIsSent(email)
+      toastSuccessMessage('Magic link sent! Check your email.')
+    } catch (err) {
+      console.error('Error sending magic link:', err)
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  if (isSent) {
+    return (
+      <div className="rounded-lg border p-4 text-center">
+        <Mail className="text-primary mx-auto mb-2 size-6" />
+        <h3 className="mb-1 text-sm font-medium">Check your email</h3>
+        <p className="text-muted-foreground text-xs">
+          We&apos;ve sent a magic link to <strong>{isSent}</strong>
+        </p>
+      </div>
+    )
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+        <FormField
+          control={form.control}
+          name="email"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Email</FormLabel>
+              <FormControl>
+                <Input
+                  placeholder="name@example.com"
+                  autoCapitalize="off"
+                  autoComplete="email"
+                  autoFocus
+                  {...field}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <Button type="submit" className="w-full" disabled={isLoading}>
+          {isLoading ? 'Sending...' : 'Send Magic Link'}
+        </Button>
+      </form>
+    </Form>
+  )
+}

package/template/new/src/app/(auth)/login/page.tsx

@@ -0,0 +1,72 @@
+import { ShoppingBag } from 'lucide-react'
+import Link from 'next/link'
+import { redirect } from 'next/navigation'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle
+} from '~/components/ui/card'
+import { Separator } from '~/components/ui/separator'
+import { getAuthSession } from '~/lib/auth'
+import { EmailLoginForm } from './email-login-form'
+import { SocialLoginButtons } from './social-login-buttons'
+
+export default async function LoginPage() {
+  const session = await getAuthSession()
+
+  if (session?.user) redirect('/')
+
+  return (
+    <div className="flex min-h-screen items-center justify-center px-4 py-12 sm:px-6 lg:px-8">
+      <Card className="w-full max-w-md">
+        <CardHeader className="space-y-1 text-center">
+          <div className="bg-primary/10 mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full">
+            <ShoppingBag className="text-primary size-6" />
+          </div>
+          <CardTitle className="text-2xl font-bold">Welcome back</CardTitle>
+          <CardDescription className="text-muted-foreground text-sm">
+            Sign in to your account to continue
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="border-muted-foreground/50 bg-muted/50 rounded-lg border border-dashed p-4">
+            <p className="text-muted-foreground text-sm">
+              <strong>New to our site?</strong> No need to create a separate
+              account. Simply use one of the options below to both sign up and
+              log in.
+            </p>
+          </div>
+
+          <EmailLoginForm />
+
+          <div className="relative">
+            <div className="absolute inset-0 flex items-center">
+              <span className="w-full border-t" />
+            </div>
+            <div className="relative flex justify-center text-xs uppercase">
+              <span className="bg-background text-muted-foreground px-2">
+                Or continue with
+              </span>
+            </div>
+          </div>
+
+          <SocialLoginButtons />
+        </CardContent>
+        <CardFooter className="flex flex-col space-y-4">
+          <Separator className="my-2" />
+          <div className="text-muted-foreground text-center text-sm">
+            <Link
+              href="/"
+              className="text-primary underline-offset-4 hover:underline"
+            >
+              Return to home page
+            </Link>
+          </div>
+        </CardFooter>
+      </Card>
+    </div>
+  )
+}

package/template/new/src/app/(auth)/login/social-login-buttons.tsx

@@ -0,0 +1,69 @@
+'use client'
+
+import { Button } from '~/components/ui/button'
+import { getLastUsedLoginMethod, signIn } from '~/lib/auth-client'
+
+export const SocialLoginButtons = () => {
+  const lastUsedLoginMethod = getLastUsedLoginMethod()
+
+  return (
+    <div className="flex flex-col space-y-2">
+      <Button
+        variant="outline"
+        onClick={async () => {
+          await signIn.social({
+            provider: 'google'
+          })
+        }}
+      >
+        <svg
+          viewBox="0 0 24 24"
+          width="16"
+          height="16"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <g transform="matrix(1, 0, 0, 1, 27.009001, -39.238998)">
+            <path
+              fill="#4285F4"
+              d="M -3.264 51.509 C -3.264 50.719 -3.334 49.969 -3.454 49.239 L -14.754 49.239 L -14.754 53.749 L -8.284 53.749 C -8.574 55.229 -9.424 56.479 -10.684 57.329 L -10.684 60.329 L -6.824 60.329 C -4.564 58.239 -3.264 55.159 -3.264 51.509 Z"
+            />
+            <path
+              fill="#34A853"
+              d="M -14.754 63.239 C -11.514 63.239 -8.804 62.159 -6.824 60.329 L -10.684 57.329 C -11.764 58.049 -13.134 58.489 -14.754 58.489 C -17.884 58.489 -20.534 56.379 -21.484 53.529 L -25.464 53.529 L -25.464 56.619 C -23.494 60.539 -19.444 63.239 -14.754 63.239 Z"
+            />
+            <path
+              fill="#FBBC05"
+              d="M -21.484 53.529 C -21.734 52.809 -21.864 52.039 -21.864 51.239 C -21.864 50.439 -21.724 49.669 -21.484 48.949 L -21.484 45.859 L -25.464 45.859 C -26.284 47.479 -26.754 49.299 -26.754 51.239 C -26.754 53.179 -26.284 54.999 -25.464 56.619 L -21.484 53.529 Z"
+            />
+            <path
+              fill="#EA4335"
+              d="M -14.754 43.989 C -12.984 43.989 -11.404 44.599 -10.154 45.789 L -6.734 42.369 C -8.804 40.429 -11.514 39.239 -14.754 39.239 C -19.444 39.239 -23.494 41.939 -25.464 45.859 L -21.484 48.949 C -20.534 46.099 -17.884 43.989 -14.754 43.989 Z"
+            />
+          </g>
+        </svg>
+        Continue with Google
+        {lastUsedLoginMethod === 'google' ? ' (last used)' : ''}
+      </Button>
+
+      <Button
+        variant="outline"
+        onClick={async () => {
+          await signIn.social({
+            provider: 'github'
+          })
+        }}
+      >
+        <svg
+          viewBox="0 0 24 24"
+          width="16"
+          height="16"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
+        </svg>
+        Continue with GitHub
+        {lastUsedLoginMethod === 'github' ? ' (last used)' : ''}
+      </Button>
+    </div>
+  )
+}

package/template/new/src/app/api/auth/[...all]/route.ts

@@ -0,0 +1,4 @@
+import { toNextJsHandler } from 'better-auth/next-js'
+import { auth } from '~/lib/auth'
+
+export const { GET, POST } = toNextJsHandler(auth.handler)

package/template/new/src/app/globals.css

@@ -0,0 +1,128 @@
+@import 'tailwindcss';
+@import 'tw-animate-css';
+
+@custom-variant dark (&:is(.dark *));
+
+@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-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply text-foreground bg-background min-h-screen font-sans antialiased;
+  }
+  button:not([disabled]),
+  [role='button']:not([disabled]) {
+    cursor: pointer;
+  }
+}
+
+@utility container {
+  @apply mx-auto p-4;
+}