feat: Extract UI components into shared package (#2097)

Author: ritoban23

CLAUDE.md

@@ -8,6 +8,7 @@ Full-stack React application template optimized for Cloudflare Workers deploymen
 - `apps/api/` - tRPC API server
 - `apps/edge/` - Cloudflare Workers edge deployment
 - `packages/core/` - Shared core utilities and WebSocket functionality
+- `packages/ui/` - Shared UI components and ShadCN management scripts
 - `db/` - Drizzle ORM schemas and migrations
 - `infra/` - Terraform infrastructure configuration
 - `docs/` - VitePress documentation site
@@ -43,6 +44,12 @@ bun test:web                   # Test web app (shortcut)
 bun test:api                   # Test API (shortcut)
 bun test:edge                  # Test edge (shortcut)
 
+# UI Components
+bun ui:add <component>         # Add ShadCN component
+bun ui:list                    # List installed components
+bun ui:update                  # Update all components
+bun ui:essentials              # Install essential components
+
 # Other
 bun lint                       # Lint all code
 bun --filter @repo/db push     # Apply DB schema changes

README.md

@@ -38,7 +38,7 @@ This starter kit uses a thoughtfully organized monorepo structure that promotes
 - [`docs/`](./docs) — VitePress documentation site
 - [`infra/`](./infra) — Terraform infrastructure configurations for multi-environment deployment
 - [`scripts/`](./scripts) — Build automation and development tools
-- [`apps/web/scripts/`](./apps/web/scripts) — ShadCN UI component management utilities
+- [`packages/ui/`](./packages/ui) — Shared UI components with ShadCN management utilities
 
 **Why Monorepo?** This structure enables seamless code sharing between frontend and backend, ensures type consistency across your entire stack, and simplifies dependency management. When you update a type definition, both client and server stay in sync automatically.
 

apps/web/README.md

@@ -38,7 +38,7 @@ app/
 ├── styles/               # Global styles and theme configuration
 ├── index.html            # HTML template
 ├── index.tsx             # Main application entry point
-├── tailwind.config.js    # Tailwind CSS configuration
+├── tailwind.config.css   # Tailwind CSS v4 configuration
 └── vite.config.ts        # Vite configuration
 ```
 
@@ -92,7 +92,7 @@ export const Route = createFileRoute("/dashboard/$orgId")({
 
 ## Component Architecture
 
-### UI Components (`components/ui/`)
+### UI Components (`@repo/ui`)
 
 ShadCN UI components that you can copy, paste, and own:
 
@@ -267,26 +267,6 @@ We use CSS variables and Tailwind utilities for consistent theming:
 }
 ```
 
-### Component Styling
-
-Components use Tailwind classes with the `cn()` utility for conditional styling:
-
-```typescript
-import { cn } from '@/lib/utils';
-
-function Card({ className, ...props }: CardProps) {
-  return (
-    <div
-      className={cn(
-        'rounded-lg border bg-card text-card-foreground shadow-sm',
-        className
-      )}
-      {...props}
-    />
-  );
-}
-```
-
 ## Authentication Flow
 
 ### Better Auth Integration
@@ -414,14 +394,6 @@ VITE_APP_NAME="React Starter Kit"
 
 ## Best Practices
 
-### Component Design
-
-1. **Keep components focused** on single responsibilities
-2. **Use TypeScript** for prop validation and documentation
-3. **Implement proper error boundaries** for graceful failures
-4. **Follow accessibility guidelines** with proper ARIA attributes
-5. **Test user interactions** not implementation details
-
 ### State Management
 
 1. **Keep atoms small** and focused
@@ -433,8 +405,8 @@ VITE_APP_NAME="React Starter Kit"
 
 1. **Lazy load routes** and heavy components
 2. **Optimize images** with proper sizing and formats
-3. **Use React.memo** judiciously for expensive components
-4. **Implement virtualization** for long lists
+3. **Implement code splitting** for better load times
+4. **Use React DevTools Profiler** to identify unnecessary renders
 
 ## Package Exports
 
@@ -445,7 +417,7 @@ Clean imports thanks to our package.json exports:
 import { cn, formatDate } from "@/lib/utils";
 
 // Import components
-import { Button, Card } from "@/components/ui";
+import { Button, Card } from "@repo/ui";
 
 // Import hooks
 import { useAuth, useLocalStorage } from "@/hooks";

apps/web/components.json

@@ -4,7 +4,6 @@
   "rsc": false,
   "tsx": true,
   "tailwind": {
-    "config": "tailwind.config.js",
     "css": "styles/globals.css",
     "baseColor": "neutral",
     "cssVariables": true,
@@ -13,7 +12,7 @@
   "aliases": {
     "components": "@/components",
     "utils": "@/lib/utils",
-    "ui": "@/components/ui",
+    "ui": "@repo/ui",
     "lib": "@/lib",
     "hooks": "@/hooks"
   },

apps/web/components/layout.tsx

@@ -1,9 +1,8 @@
 /* SPDX-FileCopyrightText: 2014-present Kriasoft */
 /* SPDX-License-Identifier: MIT */
 
+import { Button, Separator } from "@repo/ui";
 import { Link } from "@tanstack/react-router";
-import { Button } from "@/components/ui/button";
-import { Separator } from "@/components/ui/separator";
 
 export function Layout({ children }: { children: React.ReactNode }) {
   return (

apps/web/lib/auth.ts

@@ -1,12 +1,23 @@
 /* SPDX-FileCopyrightText: 2014-present Kriasoft */
 /* SPDX-License-Identifier: MIT */
 
-import { createAuthClient } from "better-auth/react";
 import {
   anonymousClient,
   organizationClient,
 } from "better-auth/client/plugins";
+import { createAuthClient } from "better-auth/react";
+
+// Explicitly type the auth client to avoid TypeScript inference issues
+// in composite builds
+type AuthClient = ReturnType<
+  typeof createAuthClient<{
+    plugins: [
+      ReturnType<typeof anonymousClient>,
+      ReturnType<typeof organizationClient>,
+    ];
+  }>
+>;
 
-export const auth = createAuthClient({
+export const auth: AuthClient = createAuthClient({
   plugins: [anonymousClient(), organizationClient()],
 });

apps/web/lib/utils.ts

@@ -1,6 +1,4 @@
-import { type ClassValue, clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
+/* SPDX-FileCopyrightText: 2014-present Kriasoft */
+/* SPDX-License-Identifier: MIT */
 
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
-}
+export { cn } from "@repo/ui";

apps/web/package.json

@@ -8,11 +8,7 @@
     "build": "vite build",
     "preview": "vite preview",
     "test": "vitest",
-    "coverage": "vitest --coverage",
-    "ui:list": "bun scripts/ui-list.ts",
-    "ui:update": "bun scripts/ui-update.ts",
-    "ui:add": "bun scripts/ui-add.ts",
-    "ui:essentials": "bun scripts/ui-essentials.ts"
+    "coverage": "vitest --coverage"
   },
   "dependencies": {
     "@radix-ui/react-checkbox": "^1.3.2",
@@ -22,6 +18,7 @@
     "@radix-ui/react-separator": "^1.1.7",
     "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-switch": "^1.2.5",
+    "@repo/ui": "*",
     "@tanstack/react-router": "^1.130.12",
     "better-auth": "^1.3.4",
     "class-variance-authority": "^0.7.1",

apps/web/routes/about.tsx

@@ -1,15 +1,15 @@
 /* SPDX-FileCopyrightText: 2014-present Kriasoft */
 /* SPDX-License-Identifier: MIT */
 
-import { Button } from "@/components/ui/button";
 import {
+  Button,
   Card,
   CardContent,
   CardDescription,
   CardHeader,
   CardTitle,
-} from "@/components/ui/card";
-import { Separator } from "@/components/ui/separator";
+  Separator,
+} from "@repo/ui";
 import { createFileRoute } from "@tanstack/react-router";
 
 export const Route = createFileRoute("/about")({

apps/web/routes/index.tsx

@@ -1,14 +1,14 @@
 /* SPDX-FileCopyrightText: 2014-present Kriasoft */
 /* SPDX-License-Identifier: MIT */
 
-import { Button } from "@/components/ui/button";
 import {
+  Button,
   Card,
   CardContent,
   CardDescription,
   CardHeader,
   CardTitle,
-} from "@/components/ui/card";
+} from "@repo/ui";
 import { createFileRoute } from "@tanstack/react-router";
 
 export const Route = createFileRoute("/")({