feat: migrate to new shadcn

Author: lorenzocorallo

components.json

@@ -1,6 +1,6 @@
 {
   "$schema": "https://ui.shadcn.com/schema.json",
-  "style": "default",
+  "style": "base-nova",
   "rsc": true,
   "tsx": true,
   "tailwind": {
@@ -10,12 +10,16 @@
     "cssVariables": true,
     "prefix": ""
   },
+  "iconLibrary": "lucide",
+  "rtl": false,
   "aliases": {
     "components": "@/components",
-    "utils": "@/lib/utils",
+    "utils": "@/lib/utils/shadcn",
     "ui": "@/components/ui",
     "lib": "@/lib",
     "hooks": "@/hooks"
   },
-  "iconLibrary": "lucide"
+  "menuColor": "default",
+  "menuAccent": "subtle",
+  "registries": {}
 }

package.json

@@ -13,6 +13,7 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
+    "@base-ui/react": "^1.3.0",
     "@better-auth/passkey": "^1.5.5",
     "@hookform/resolvers": "^3.9.1",
     "@polinetwork/backend": "^0.15.5",
@@ -41,11 +42,13 @@
     "react-error-boundary": "^6.1.0",
     "react-hook-form": "^7.55.0",
     "server-only": "^0.0.1",
+    "shadcn": "^4.2.0",
     "sonner": "^2.0.3",
     "superjson": "^2.2.1",
     "tailwind-merge": "^3.0.1",
     "tailwind-scrollbar": "^4.0.2",
     "tailwindcss-animate": "^1.0.7",
+    "tw-animate-css": "^1.4.0",
     "zod": "^4.3.5"
   },
   "devDependencies": {

pnpm-lock.yaml

@@ -8,7 +8,7 @@ import { Code } from "@/components/code"
 import { InputWithPrefix } from "@/components/input-prefix"
 import { Button } from "@/components/ui/button"
 import { Label } from "@/components/ui/label"
-import { Progress } from "@/components/ui/progress"
+import { Progress, ProgressIndicator, ProgressTrack } from "@/components/ui/progress"
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
 import { useLocalStorage } from "@/hooks/use-local-storage"
 import { auth, useSession } from "@/lib/auth"
@@ -143,8 +143,8 @@ export function TelegramLink({ botUsername }: { botUsername: string }) {
       <Timer ttl={savedLink.ttl} timeLeft={timeLeft} onEnd={() => setExpired(true)} />
 
       <div className="flex items-center gap-2">
-        <Tooltip delayDuration={0}>
-          <TooltipTrigger asChild>
+        <Tooltip>
+          <TooltipTrigger delay={0}>
             <Button variant="outline">
               <a aria-label="open telegram bot" href={`tg://resolve?domain=${botUsername}`}>
                 Start the bot
@@ -211,11 +211,11 @@ function Timer({ ttl, timeLeft: pTimeLeft, onEnd }: { ttl: number; timeLeft: num
 
   return (
     <>
-      <Progress
-        value={percentage}
-        className="h-2 w-64"
-        indicatorClassname={timeLeft < 31_000 ? "bg-red-600 dark:bg-red-400" : "bg-primary"}
-      />
+      <Progress value={percentage} className="h-2 w-64">
+        <ProgressTrack>
+          <ProgressIndicator className={timeLeft < 31_000 ? "bg-red-600 dark:bg-red-400" : "bg-primary"} />
+        </ProgressTrack>
+      </Progress>
       <span className="text-foreground/70 text-sm">
         Time left:
         <span className="inline-block w-10 text-end">{Math.floor(timeLeft / 1000)}s</span>

src/app/(auth)/onboarding/link/telegram.tsx

@@ -30,7 +30,7 @@ export function DeletePasskey({ id }: { id: string }) {
 
   return (
     <AlertDialog>
-      <AlertDialogTrigger asChild>
+      <AlertDialogTrigger>
         <Button variant="destructive">Delete</Button>
       </AlertDialogTrigger>
       <AlertDialogContent size="sm">

src/app/dashboard/(active)/account/delete-passkey.tsx

@@ -31,7 +31,7 @@ export function SetName({ initialName }: { initialName?: string }) {
 
   return (
     <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>
+      <DialogTrigger>
         <Button variant="outline">Set name</Button>
       </DialogTrigger>
       <DialogContent className="sm:max-w-[425px]">
@@ -54,7 +54,7 @@ export function SetName({ initialName }: { initialName?: string }) {
             </div>
           </div>
           <DialogFooter>
-            <DialogClose asChild>
+            <DialogClose>
               <Button variant="outline">Cancel</Button>
             </DialogClose>
             <Button type="submit">Save changes</Button>

src/app/dashboard/(active)/account/set-name.tsx

@@ -52,7 +52,7 @@ export function SetAssocNumberDialog({ userId, children }: { userId: string; chi
 
   return (
     <Dialog onOpenChange={handleOpenChange} open={open}>
-      <DialogTrigger asChild>{children ?? <Button variant="outline">Set</Button>}</DialogTrigger>
+      <DialogTrigger>{children ?? <Button variant="outline">Set</Button>}</DialogTrigger>
       <DialogContent className="sm:max-w-sm">
         <DialogHeader>
           <DialogTitle>Set Assoc Number</DialogTitle>
@@ -75,7 +75,7 @@ export function SetAssocNumberDialog({ userId, children }: { userId: string; chi
             />
           </div>
           <DialogFooter>
-            <DialogClose asChild>
+            <DialogClose>
               <Button disabled={isPending} variant="outline">
                 Cancel
               </Button>

src/app/dashboard/(active)/assoc/_components/set-assoc-number-dialog.tsx

@@ -1,12 +1,15 @@
 import type { Metadata } from "next"
-import { Poppins } from "next/font/google"
+import { Poppins, Geist } from "next/font/google"
 import "@/index.css"
 import { HEADER_HEIGHT } from "@/components/header"
 import { ThemeProvider } from "@/components/theme-provider"
 import { Toaster } from "@/components/ui/sonner"
 import { TooltipProvider } from "@/components/ui/tooltip"
 import { TRPCReactProvider } from "@/lib/trpc/client"
 import { HydrateClient } from "@/lib/trpc/server"
+import { cn } from "@/lib/utils/shadcn"
+
+const geist = Geist({ subsets: ["latin"], variable: "--font-sans" })
 
 const desc = "PoliNetwork Admin Dashboard"
 
@@ -23,7 +26,7 @@ const poppins = Poppins({ weight: ["100", "200", "300", "400", "500", "600", "70
 
 export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
   return (
-    <html lang="en" suppressHydrationWarning className={poppins.className}>
+    <html lang="en" suppressHydrationWarning className={cn(poppins.className, "font-sans", geist.variable)}>
       <body
         style={
           {

src/app/layout.tsx

@@ -2,7 +2,7 @@
 
 import { type MouseEvent, type ReactNode, useCallback, useRef } from "react"
 import { toast } from "sonner"
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils/shadcn"
 
 type Props = React.HTMLAttributes<HTMLElement> & {
   block?: boolean
@@ -27,18 +27,18 @@ export function Code({ block = false, copyOnClick = false, children, className,
 
   const InteractiveWrapper = copyOnClick
     ? ({ children: content }: { children: ReactNode }) => (
-        <button
-          type="button"
-          onClick={copy}
-          className={cn(
-            "appearance-none border-0 bg-transparent p-0 text-left outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
-            block ? "block w-full" : "inline"
-          )}
-          aria-label={block ? "Copy code block" : "Copy code"}
-        >
-          {content}
-        </button>
-      )
+      <button
+        type="button"
+        onClick={copy}
+        className={cn(
+          "appearance-none border-0 bg-transparent p-0 text-left outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+          block ? "block w-full" : "inline"
+        )}
+        aria-label={block ? "Copy code block" : "Copy code"}
+      >
+        {content}
+      </button>
+    )
     : ({ children: content }: { children: ReactNode }) => <>{content}</>
 
   if (block) {

src/components/code.tsx

@@ -58,7 +58,7 @@ export function CreateAssocUser({ trigger }: Props) {
 
   return (
     <Sheet open={open} onOpenChange={handleOpenChange}>
-      <SheetTrigger asChild>{trigger ?? <Button variant="outline">New Member</Button>}</SheetTrigger>
+      <SheetTrigger>{trigger ?? <Button variant="outline">New Member</Button>}</SheetTrigger>
       <SheetContent className="sm:max-w-[40rem]">
         <SheetHeader>
           <SheetTitle>New Assoc Member</SheetTitle>
@@ -124,7 +124,7 @@ export function CreateAssocUser({ trigger }: Props) {
             </div>
           </div>
           <SheetFooter className="mt-4">
-            <SheetClose asChild>
+            <SheetClose>
               <Button variant="secondary" disabled={isPending}>
                 Cancel
               </Button>