Moved shadcn ui library to separate ui package

apps/web/components.json

@@ -4,12 +4,14 @@
 	"rsc": true,
 	"tailwind": {
 		"config": "tailwind.config.js",
-		"css": "src/app/globals.css",
+		"css": "../../packages/ui/src/styles/globals.css",
 		"baseColor": "zinc",
 		"cssVariables": true
 	},
 	"aliases": {
-		"components": "@/components/shadcn",
-		"utils": "@/lib/utils/client/cn"
+		"components": "ui/components",
+		"hooks": "ui/hooks",
+		"lib": "ui/lib",
+		"utils": "ui/lib/utils"
 	}
 }

apps/web/next.config.mjs

@@ -7,7 +7,7 @@ jiti("./src/env");
 /** @type {import('next').NextConfig} */
 const nextConfig = {
 	swcMinify: true,
-	transpilePackages: ["db"],
+	transpilePackages: ["db", "ui"],
 	images: {
 		remotePatterns: [
 			{

apps/web/package.json

@@ -15,61 +15,38 @@
     "@clerk/nextjs": "^6.12.12",
     "@hookform/resolvers": "^3.9.0",
     "@internationalized/date": "^3.5.4",
-    "@planetscale/database": "^1.18.0",
-    "@radix-ui/react-accordion": "^1.1.2",
-    "@radix-ui/react-alert-dialog": "^1.1.1",
-    "@radix-ui/react-avatar": "^1.0.3",
-    "@radix-ui/react-checkbox": "^1.0.4",
-    "@radix-ui/react-collapsible": "^1.1.12",
-    "@radix-ui/react-dialog": "^1.0.4",
-    "@radix-ui/react-dropdown-menu": "^2.0.5",
-    "@radix-ui/react-label": "^2.0.2",
-    "@radix-ui/react-popover": "^1.0.6",
-    "@radix-ui/react-select": "^1.2.2",
-    "@radix-ui/react-separator": "^1.1.8",
-    "@radix-ui/react-slot": "^1.0.2",
-    "@radix-ui/react-switch": "^1.0.3",
-    "@radix-ui/react-tooltip": "^1.2.8",
     "@t3-oss/env-nextjs": "^0.10.1",
     "@tanstack/match-sorter-utils": "^8.19.4",
     "@tanstack/react-table": "^8.19.3",
     "@upstash/redis": "^1.34.4",
     "@yudiel/react-qr-scanner": "^2.1.0",
-    "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
-    "cmdk": "^1.0.0",
     "config": "workspace:*",
     "date-fns": "^3.6.0",
     "date-fns-tz": "^3.1.3",
     "db": "workspace:*",
     "drizzle-orm": "^0.39.3",
     "drizzle-zod": "^0.7.0",
-    "embla-carousel": "8.1.7",
-    "embla-carousel-react": "8.1.7",
     "lucide-react": "^0.411.0",
-    "nanoid": "^5.0.7",
     "next": "14.2.35",
     "next-safe-action": "^7.9.3",
     "no-profanity": "^1.5.1",
     "react": "18.3.1",
-    "react-aria": "^3.33.1",
     "react-confetti": "^6.1.0",
     "react-dom": "18.3.1",
     "react-dropzone": "^14.2.3",
     "react-hook-form": "7.52.1",
     "react-loader-spinner": "^6.1.6",
     "react-parallax-tilt": "^1.7.232",
     "react-qr-code": "^2.0.15",
-    "react-stately": "^3.31.1",
     "react-timer-hook": "^3.0.7",
     "react-wrap-balancer": "^1.1.1",
     "recharts": "^2.12.7",
     "sonner": "^1.5.0",
     "superjson": "^2.2.1",
-    "tailwind-merge": "^2.4.0",
+    "ui": "workspace:*",
     "use-debounce": "^10.0.1",
     "usehooks-ts": "^3.1.0",
-    "vaul": "^0.9.1",
     "zod": "^3.25.67"
   },
   "devDependencies": {

apps/web/src/app/admin/events/page.tsx

@@ -2,7 +2,7 @@
 
 import { EventDataTable } from "@/components/events/shared/EventDataTable";
 import { columns } from "@/components/events/shared/EventColumns";
-import { Button } from "@/components/shadcn/ui/button";
+import { Button } from "ui/components/button";
 import { PlusCircle } from "lucide-react";
 import Link from "next/link";
 import { getAllEvents } from "db/functions";

apps/web/src/app/admin/layout.tsx

@@ -4,12 +4,12 @@ import ClientToast from "@/components/shared/ClientToast";
 import { isUserAdmin } from "../../lib/utils/server/admin";
 import { getCurrentUser } from "@/lib/utils/server/user";
 import { AdminSidebar } from "@/components/admin/shared/sidebar/AdminSidebar";
-import { Separator } from "@/components/shadcn/ui/separator";
+import { Separator } from "ui/components/separator";
 import {
 	SidebarInset,
 	SidebarProvider,
 	SidebarTrigger,
-} from "@/components/shadcn/ui/sidebar";
+} from "ui/components/sidebar";
 import { AdminBreadcrumbs } from "@/components/admin/shared/AdminBreadcrumbs";
 import { NavUserProfile } from "@/components/admin/shared/NavUserProfile";
 

apps/web/src/app/admin/page.tsx

@@ -5,7 +5,7 @@ import {
 	CardContent,
 	CardTitle,
 	CardDescription,
-} from "@/components/shadcn/ui/card";
+} from "ui/components/card";
 import { Users, UserCheck, User2, TimerReset, MailCheck } from "lucide-react";
 import type { User } from "db/types";
 import c from "config";

apps/web/src/app/admin/users/[slug]/page.tsx

@@ -1,6 +1,6 @@
 import Image from "next/image";
-import { Button } from "@/components/shadcn/ui/button";
-import { Badge } from "@/components/shadcn/ui/badge";
+import { Button } from "ui/components/button";
+import { Badge } from "ui/components/badge";
 import { Info, CalendarCheck } from "lucide-react";
 import Link from "next/link";
 import UpdateRoleDialog from "@/components/admin/users/UpdateRoleDialog";
@@ -15,7 +15,7 @@ import {
 	DropdownMenuContent,
 	DropdownMenuItem,
 	DropdownMenuSeparator,
-} from "@/components/shadcn/ui/dropdown-menu";
+} from "ui/components/dropdown-menu";
 import { notFound } from "next/navigation";
 import { userHasPermission } from "@/lib/utils/server/admin";
 import ApproveUserButton from "@/components/admin/users/ApproveUserButton";

apps/web/src/app/admin/users/page.tsx

@@ -1,7 +1,7 @@
 import { db, ilike, or, and, eq } from "db";
 import { DataTable } from "@/components/admin/users/UserDataTable";
 import { columns } from "@/components/admin/users/UserColumns";
-import { Button } from "@/components/shadcn/ui/button";
+import { Button } from "ui/components/button";
 import { FolderInput } from "lucide-react";
 import { getAllUsers } from "db/functions";
 import { notFound } from "next/navigation";

apps/web/src/app/dash/layout.tsx

@@ -3,7 +3,7 @@ import Image from "next/image";
 
 import { currentUser } from "@clerk/nextjs/server";
 import Link from "next/link";
-import { Button } from "@/components/shadcn/ui/button";
+import { Button } from "ui/components/button";
 import DashNavItem from "@/components/dash/shared/DashNavItem";
 import { redirect } from "next/navigation";
 import ProfileButton from "@/components/shared/ProfileButton";

apps/web/src/app/dash/pass/page.tsx

@@ -5,11 +5,7 @@ import c from "config";
 import { format } from "date-fns";
 import TiltWrapper from "@/components/dash/shared/TiltWrapper";
 import { createQRpayload } from "@/lib/utils/shared/qr";
-import {
-	Drawer,
-	DrawerContent,
-	DrawerTrigger,
-} from "@/components/shadcn/ui/drawer";
+import { Drawer, DrawerContent, DrawerTrigger } from "ui/components/drawer";
 import { getHacker } from "db/functions";
 import { Hacker } from "db/types";
 

apps/web/src/app/dash/schedule/schedule-timeline.tsx

@@ -1,6 +1,6 @@
-import { Badge } from "@/components/shadcn/ui/badge";
+import { Badge } from "ui/components/badge";
 import { type EventType as Event } from "@/lib/types/events";
-import { cn } from "@/lib/utils/client/cn";
+import { cn } from "ui/lib/utils";
 import c from "config";
 import { formatInTimeZone } from "date-fns-tz";
 import Link from "next/link";

apps/web/src/app/discord-verify/linked/page.tsx

@@ -1,5 +1,5 @@
 import c from "config";
-import { Button } from "@/components/shadcn/ui/button";
+import { Button } from "ui/components/button";
 import Link from "next/link";
 import { CheckCircleIcon } from "lucide-react";
 

apps/web/src/app/i/approval/page.tsx

@@ -1,6 +1,6 @@
 import c from "config";
 import Link from "next/link";
-import { Button } from "@/components/shadcn/ui/button";
+import { Button } from "ui/components/button";
 
 export default function Page() {
 	return (

apps/web/src/app/layout.tsx

@@ -1,4 +1,4 @@
-import "./globals.css";
+import "ui/styles/globals.css";
 import { ClerkProvider } from "@clerk/nextjs";
 import { cookies } from "next/headers";
 import { defaultTheme } from "config";

apps/web/src/app/register/page.tsx

@@ -6,7 +6,7 @@ import Navbar from "@/components/shared/Navbar";
 import Link from "next/link";
 import { redisMGet } from "@/lib/utils/server/redis";
 import { parseRedisBoolean } from "@/lib/utils/server/redis";
-import { Button } from "@/components/shadcn/ui/button";
+import { Button } from "ui/components/button";
 import { getUser } from "db/functions";
 
 export default async function Page() {

apps/web/src/app/rsvp/page.tsx

@@ -13,7 +13,7 @@ import {
 	redisGet,
 } from "@/lib/utils/server/redis";
 import Link from "next/link";
-import { Button } from "@/components/shadcn/ui/button";
+import { Button } from "ui/components/button";
 import { getUser } from "db/functions";
 
 export default async function RsvpPage({

apps/web/src/app/sign-up/[[...sign-up]]/page.tsx

@@ -2,7 +2,7 @@ import { SignUp } from "@clerk/nextjs";
 import { redisMGet } from "@/lib/utils/server/redis";
 import { parseRedisBoolean } from "@/lib/utils/server/redis";
 import c from "config";
-import { Button } from "@/components/shadcn/ui/button";
+import { Button } from "ui/components/button";
 import Link from "next/link";
 
 export default async function Page() {

apps/web/src/components/admin/roles/CreateRoleDialog.tsx

@@ -7,10 +7,10 @@ import {
 	DialogHeader,
 	DialogTitle,
 	DialogTrigger,
-} from "@/components/shadcn/ui/dialog";
-import { Button } from "@/components/shadcn/ui/button";
-import { Input } from "@/components/shadcn/ui/input";
-import { Label } from "@/components/shadcn/ui/label";
+} from "ui/components/dialog";
+import { Button } from "ui/components/button";
+import { Input } from "ui/components/input";
+import { Label } from "ui/components/label";
 import { PermissionType } from "@/lib/constants/permission";
 import { PermissionMask } from "@/lib/utils/shared/permission";
 import { useAction } from "next-safe-action/hooks";

apps/web/src/components/admin/roles/DeleteRoleDialog.tsx

@@ -1,14 +1,14 @@
 "use client";
 
 import { useState } from "react";
-import { Button } from "@/components/shadcn/ui/button";
+import { Button } from "ui/components/button";
 import {
 	Dialog,
 	DialogContent,
 	DialogHeader,
 	DialogTitle,
 	DialogTrigger,
-} from "@/components/shadcn/ui/dialog";
+} from "ui/components/dialog";
 import { useAction } from "next-safe-action/hooks";
 import { deleteRole } from "@/actions/admin/role-actions";
 import { toast } from "sonner";

apps/web/src/components/admin/roles/RoleCard.tsx

@@ -1,12 +1,12 @@
 "use client";
 
 import { useState, useEffect } from "react";
-import { Button } from "@/components/shadcn/ui/button";
+import { Button } from "ui/components/button";
 import {
 	AccordionItem,
 	AccordionTrigger,
 	AccordionContent,
-} from "@/components/shadcn/ui/accordion";
+} from "ui/components/accordion";
 import Restricted from "@/components/Restricted";
 import { PermissionType } from "@/lib/constants/permission";
 import { PermissionMask } from "@/lib/utils/shared/permission";

apps/web/src/components/admin/roles/RolesManager.tsx

@@ -2,8 +2,8 @@
 
 import { useState, useEffect } from "react";
 import RoleCard from "@/components/admin/roles/RoleCard";
-import { Accordion } from "@/components/shadcn/ui/accordion";
-import { Button } from "@/components/shadcn/ui/button";
+import { Accordion } from "ui/components/accordion";
+import { Button } from "ui/components/button";
 import { useAction } from "next-safe-action/hooks";
 import { editRole } from "@/actions/admin/role-actions";
 import { toast } from "sonner";

apps/web/src/components/admin/scanner/CheckinScanner.tsx

@@ -15,8 +15,8 @@ import {
 	DrawerFooter,
 	DrawerHeader,
 	DrawerTitle,
-} from "@/components/shadcn/ui/drawer";
-import { Button } from "@/components/shadcn/ui/button";
+} from "ui/components/drawer";
+import { Button } from "ui/components/button";
 import { useRouter, usePathname, useSearchParams } from "next/navigation";
 import { toast } from "sonner";
 import { FIVE_MINUTES_IN_MILLISECONDS } from "@/lib/constants";

apps/web/src/components/admin/scanner/PassScanner.tsx

@@ -16,8 +16,8 @@ import {
 	DrawerFooter,
 	DrawerHeader,
 	DrawerTitle,
-} from "@/components/shadcn/ui/drawer";
-import { Button } from "@/components/shadcn/ui/button";
+} from "ui/components/drawer";
+import { Button } from "ui/components/button";
 import Link from "next/link";
 import { useRouter, usePathname, useSearchParams } from "next/navigation";
 import { toast } from "sonner";

apps/web/src/components/admin/shared/AdminBreadcrumbs.tsx

@@ -10,7 +10,7 @@ import {
 	BreadcrumbList,
 	BreadcrumbPage,
 	BreadcrumbSeparator,
-} from "@/components/shadcn/ui/breadcrumb";
+} from "ui/components/breadcrumb";
 import { BreadcrumbLabels } from "@/lib/constants/admin";
 import React from "react";
 

apps/web/src/components/admin/shared/NavUserProfile.tsx

@@ -2,24 +2,20 @@
 
 import { ChevronsUpDown } from "lucide-react";
 
-import {
-	Avatar,
-	AvatarFallback,
-	AvatarImage,
-} from "@/components/shadcn/ui/avatar";
+import { Avatar, AvatarFallback, AvatarImage } from "ui/components/avatar";
 import {
 	DropdownMenu,
 	DropdownMenuContent,
 	DropdownMenuGroup,
 	DropdownMenuItem,
 	DropdownMenuSeparator,
 	DropdownMenuTrigger,
-} from "@/components/shadcn/ui/dropdown-menu";
+} from "ui/components/dropdown-menu";
 import {
 	SidebarMenu,
 	SidebarMenuButton,
 	SidebarMenuItem,
-} from "@/components/shadcn/ui/sidebar";
+} from "ui/components/sidebar";
 import { UserWithRole } from "db/types";
 import { SignOutButton } from "@clerk/nextjs";
 import Link from "next/link";

apps/web/src/components/admin/shared/sidebar/AdminSidebar.tsx

@@ -14,7 +14,7 @@ import {
 	SidebarMenu,
 	SidebarMenuButton,
 	SidebarMenuItem,
-} from "@/components/shadcn/ui/sidebar";
+} from "ui/components/sidebar";
 import c from "config";
 import { UserWithRole } from "db/types";
 import { userHasPermission } from "@/lib/utils/server/admin";

apps/web/src/components/admin/shared/sidebar/NavMain.tsx

@@ -7,7 +7,7 @@ import {
 	Collapsible,
 	CollapsibleContent,
 	CollapsibleTrigger,
-} from "@/components/shadcn/ui/collapsible";
+} from "ui/components/collapsible";
 import {
 	SidebarGroup,
 	SidebarMenu,
@@ -17,7 +17,7 @@ import {
 	SidebarMenuSub,
 	SidebarMenuSubButton,
 	SidebarMenuSubItem,
-} from "@/components/shadcn/ui/sidebar";
+} from "ui/components/sidebar";
 
 export function NavMain({
 	items,

apps/web/src/components/admin/shared/sidebar/NavSecondary.tsx

@@ -10,7 +10,7 @@ import {
 	SidebarMenu,
 	SidebarMenuButton,
 	SidebarMenuItem,
-} from "@/components/shadcn/ui/sidebar";
+} from "ui/components/sidebar";
 
 export function NavSecondary({
 	items,