Add @shadcn/ui

README.md

@@ -11,6 +11,7 @@
 - [Prisma](https://prisma.io) database ORM, ready for use with [PostgreSQL](https://www.postgresql.org/).
 - [ESLint](https://eslint.org/) + [Prettier](https://prettier.io/) for readable, safe code.
 - [TailwindCSS](https://tailwindcss.com/) for utility-first CSS.
+- Gorgeous UI built with [Radix](https://www.radix-ui.com/) and [shadcn/ui](https://ui.shadcn.com/).
 - Authentication via [Next Auth](https://next-auth.js.org/).
 - Email via [Resend](https://resend.com) and [react email](https://react.email/).
 - The beautiful [Inter](https://rsms.me/inter/) typeface.
@@ -72,6 +73,22 @@ NEXTAUTH_SECRET="OgGQPvTtjXu7DvOYKekP8mw9OBJi5FD/ObcYipZFdw0=
 
 (NOTE: Do NOT use the value above in your app!)
 
+### Browsing the database
+
+Prisma offers a simple UI for inspecting the database. To launch it, run:
+
+```sh
+pnpm prisma studio
+```
+
+## Running the server
+
+```bash
+pnpm dev
+```
+
+The app will be running at [http://localhost:3000](http://localhost:3000).
+
 ## Database
 
 The Prisma adapter is set up to use PostgreSQL by default, but any database will work. Simply set `DATABASE_URL` in your `.env` file to work.
@@ -101,21 +118,20 @@ When you feel comfortable with the changes, you can make a migration file by run
 pnpm prisma migrate dev
 ```
 
-### Browsing the database
+## UI components
 
-Prisma offers a simple UI for inspecting the database. To launch it, run:
+By default, this project includes the following components from [shadcn/ui](https://ui.shadcn.com/):
 
-```sh
-pnpm prisma studio
-```
+- [Button](https://ui.shadcn.com/docs/components/button)
+- [Toast](https://ui.shadcn.com/docs/components/toast)
 
-## Running the server
+To add new UI components from [shadcn/ui](https://ui.shadcn.com/), run:
 
-```bash
-pnpm dev
+```sh
+pnpx shadcn-ui@latest add button
 ```
 
-The app will be running at [http://localhost:3000](http://localhost:3000).
+where `button` can be any UI element from the project.
 
 ## Linting / Checking the codebase
 

app/(auth)/layout.tsx

@@ -1,12 +1,21 @@
+import { redirect } from "next/navigation"
+
 import { Footer } from "@/components/marketing/layout"
+import { getCurrentUser } from "@/lib/auth/session"
 
 import type { ReactNode } from "react"
 
 type Props = {
   children?: ReactNode
 }
 
-export default function AuthLayout({ children }: Props) {
+export default async function AuthLayout({ children }: Props) {
+  const user = await getCurrentUser()
+
+  if (user) {
+    redirect("/")
+  }
+
   return (
     <div className="flex min-h-screen flex-col">
       <main className="flex flex-1 flex-col px-4">{children}</main>

app/(auth)/register/page.tsx

@@ -1,6 +1,6 @@
 import { HazeIcon } from "lucide-react"
 
-import { UserAuthForm } from "@/components/auth/UserAuthForm"
+import { UserAuthForm } from "@/components/auth/user-auth-form"
 import { Link } from "@/components/elements"
 
 export const metadata = {
@@ -25,14 +25,14 @@ export default function RegisterPage() {
           <h1 className="text-2xl font-semibold tracking-tight">
             Create an account
           </h1>
-          <p className="text-sm text-neutral-500 dark:text-neutral-400">
+          <p className="text-sm text-zinc-500 dark:text-zinc-400">
             Enter your email below to create your account
           </p>
         </div>
 
         <UserAuthForm />
 
-        <p className="px-8 text-center text-sm text-neutral-500 dark:text-neutral-400">
+        <p className="px-8 text-center text-sm text-zinc-500 dark:text-zinc-400">
           By clicking continue, you agree to our{" "}
           <Link href="/terms" className="underline underline-offset-4">
             Terms of Service

app/(auth)/signin/page.tsx

@@ -1,6 +1,6 @@
 import { ChevronLeftIcon, HazeIcon } from "lucide-react"
 
-import { UserAuthForm } from "@/components/auth/UserAuthForm"
+import { UserAuthForm } from "@/components/auth/user-auth-form"
 import { Link } from "@/components/elements"
 import { seo } from "@/lib/seo"
 
@@ -29,14 +29,14 @@ export default function SigninPage() {
           <h1 className="text-2xl font-semibold tracking-tight">
             Welcome back
           </h1>
-          <p className="text-sm text-neutral-500 dark:text-neutral-400">
+          <p className="text-sm text-zinc-500 dark:text-zinc-400">
             Enter your email to sign in to your account
           </p>
         </div>
 
         <UserAuthForm />
 
-        <p className="px-8 text-center text-sm text-neutral-500 dark:text-neutral-400">
+        <p className="px-8 text-center text-sm text-zinc-500 dark:text-zinc-400">
           <Link href="/register" className="underline underline-offset-4">
             Don&apos;t have an account? Sign Up
           </Link>

app/(marketing)/Features.tsx

@@ -1,54 +1,61 @@
 "use client"
 
 import { CheckIcon } from "lucide-react"
+import { useMemo } from "react"
 
-import { Button } from "@/components/elements"
-import { toast } from "@/hooks/use-toast"
-import { cls } from "@/lib/utils"
-
-const FEATURES = [
-  { title: "Next 13.4" },
-  { title: "App Directory" },
-  { title: "API Route Handlers" },
-  { title: "Typescript (Strict)" },
-  { title: "ESLint + Prettier" },
-  { title: "TailwindCSS" },
-  { title: "Authentication" },
-  { title: "Prisma ORM" },
-  { title: "PostgreSQL" },
-  { title: "Resend Email" },
-  { title: "Metadata API" },
-  { title: "Inter Font" },
-  { title: "Jest" },
-  { title: "Dark Mode" },
-  {
-    title: "Toasts",
-    onClick: () =>
-      toast({
-        title: "Wait. Toasts?",
-        description: "Yep! You can use them anywhere in your app."
-      })
-  },
-  { title: "and much more..." }
-]
+import { useToast } from "@/components/ui/use-toast"
+import { cn } from "@/lib/utils"
 
 export function Features() {
+  const { toast } = useToast()
+
+  const FEATURES = useMemo(
+    () => [
+      { title: "Next 13.4" },
+      { title: "App Directory" },
+      { title: "API Route Handlers" },
+      { title: "Typescript (Strict)" },
+      { title: "ESLint + Prettier" },
+      { title: "TailwindCSS" },
+      { title: "Radix UI" },
+      { title: "shadcn/ui" },
+      { title: "Authentication" },
+      { title: "Prisma" },
+      { title: "PostgreSQL" },
+      { title: "Resend Email" },
+      { title: "Metadata API" },
+      { title: "Inter Font" },
+      { title: "Jest" },
+      { title: "Dark Mode" },
+      {
+        title: "Toasts",
+        onClick: () =>
+          toast({
+            title: "Wait. Toasts, too?",
+            description: "Yep! You can use them anywhere in your app."
+          })
+      },
+      { title: "and much more..." }
+    ],
+    [toast]
+  )
+
   return (
     <div className="grid grid-cols-2 gap-2 sm:gap-4">
       {FEATURES.map((f, i) => (
-        <Button
+        <a
           key={i}
-          className={cls(
-            "flex flex-row items-center space-x-2 text-left",
-            f.onClick ? "cursor-pointer" : "cursor-default"
+          className={cn(
+            "flex flex-row items-center space-x-2 text-left underline-offset-8",
+            f.onClick ? "cursor-pointer hover:underline" : "cursor-default"
           )}
           onClick={() => {
             if (f.onClick) f.onClick()
           }}
         >
           <CheckIcon className="h-4 w-4" />
           <span>{f.title}</span>
-        </Button>
+        </a>
       ))}
     </div>
   )

app/(marketing)/page.tsx

@@ -11,16 +11,16 @@ export default function Home() {
     <>
       <section className="mx-auto mt-12 flex h-full w-full max-w-4xl grow flex-col sm:flex-row sm:items-center">
         <div className="flex flex-1 flex-col items-center text-center">
-          <h2 className="rounded-2xl bg-neutral-100 px-4 py-1.5 text-sm font-bold text-neutral-800 dark:bg-neutral-800 dark:text-neutral-100">
+          <h2 className="rounded-2xl bg-zinc-100 px-4 py-1.5 text-sm font-bold text-zinc-800 dark:bg-zinc-800 dark:text-zinc-100">
             StartKit
           </h2>
-          <h1 className="mb-5 text-center text-4xl font-extrabold leading-none tracking-tight text-neutral-900 dark:text-neutral-100 md:text-6xl">
+          <h1 className="mb-5 text-center text-4xl font-extrabold leading-none tracking-tight text-zinc-900 dark:text-zinc-100 md:text-6xl">
             A sane way to start your next{" "}
             <Link
               href="https://nextjs.org/"
               target="_blank"
               rel="noreferrer"
-              className="text-neutral-600 transition-colors hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-neutral-100"
+              className="text-zinc-600 transition-colors hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-100"
             >
               next
             </Link>{" "}
@@ -36,7 +36,7 @@ export default function Home() {
             href={siteConfig.links.github}
             target="_blank"
             rel="noreferrer"
-            variant="subtle"
+            variant="secondary"
             size="lg"
             className="text-lg font-semibold tracking-tighter"
           >
@@ -69,7 +69,7 @@ export default function Home() {
             href={siteConfig.links.github}
             target="_blank"
             rel="noreferrer"
-            variant="subtle"
+            variant="secondary"
           >
             <GithubIcon className="mr-2 h-4 w-4" />
             <span>

app/layout.tsx

@@ -3,9 +3,9 @@ import { Inter } from "next/font/google"
 
 import { TailwindIndicator } from "@/components/debug/TailwindIndicator"
 import { Analytics } from "@/components/layout/Analytics"
-import { Toaster } from "@/components/toast"
+import { Toaster } from "@/components/ui/toaster"
 import { seo } from "@/lib/seo/extend"
-import { cls } from "@/lib/utils"
+import { cn } from "@/lib/utils"
 
 import type { ReactNode } from "react"
 
@@ -21,11 +21,11 @@ export default function RootLayout({ children }: Props) {
   return (
     <html
       lang="en"
-      className={cls(inter.variable, "font-sans antialiased")}
+      className={cn(inter.variable, "font-sans antialiased")}
       suppressHydrationWarning
     >
       <head />
-      <body className="min-h-screen bg-white text-neutral-900 dark:bg-neutral-900 dark:text-white">
+      <body className="min-h-screen bg-white text-zinc-900 dark:bg-zinc-900 dark:text-white">
         {children}
         <Analytics />
         <Toaster />

components.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "app/globals.css",
+    "baseColor": "zinc",
+    "cssVariables": false
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  }
+}