Update styling, utilities, routes, and add UI components

.mcp.json

@@ -0,0 +1,11 @@
+{
+  "mcpServers": {
+    "shadcn": {
+      "command": "npx",
+      "args": [
+        "shadcn@latest",
+        "mcp"
+      ]
+    }
+  }
+}

app/app.css

@@ -1,4 +1,7 @@
 @import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
 
 @theme {
   --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif,
@@ -13,3 +16,119 @@ body {
     color-scheme: 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.141 0.005 285.823);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.141 0.005 285.823);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.141 0.005 285.823);
+  --primary: oklch(0.21 0.006 285.885);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.967 0.001 286.375);
+  --secondary-foreground: oklch(0.21 0.006 285.885);
+  --muted: oklch(0.967 0.001 286.375);
+  --muted-foreground: oklch(0.552 0.016 285.938);
+  --accent: oklch(0.967 0.001 286.375);
+  --accent-foreground: oklch(0.21 0.006 285.885);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.92 0.004 286.32);
+  --input: oklch(0.92 0.004 286.32);
+  --ring: oklch(0.705 0.015 286.067);
+  --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.141 0.005 285.823);
+  --sidebar-primary: oklch(0.21 0.006 285.885);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.967 0.001 286.375);
+  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
+  --sidebar-border: oklch(0.92 0.004 286.32);
+  --sidebar-ring: oklch(0.705 0.015 286.067);
+}
+
+.dark {
+  --background: oklch(0.141 0.005 285.823);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.21 0.006 285.885);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.21 0.006 285.885);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.92 0.004 286.32);
+  --primary-foreground: oklch(0.21 0.006 285.885);
+  --secondary: oklch(0.274 0.006 286.033);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.274 0.006 286.033);
+  --muted-foreground: oklch(0.705 0.015 286.067);
+  --accent: oklch(0.274 0.006 286.033);
+  --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.552 0.016 285.938);
+  --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.21 0.006 285.885);
+  --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.274 0.006 286.033);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.552 0.016 285.938);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

app/components/ui/alert.tsx

@@ -0,0 +1,66 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "~/lib/utils"
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive:
+          "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Alert, AlertTitle, AlertDescription }

app/components/ui/avatar.tsx

@@ -0,0 +1,51 @@
+import * as React from "react"
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+
+import { cn } from "~/lib/utils"
+
+function Avatar({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      className={cn(
+        "relative flex size-8 shrink-0 overflow-hidden rounded-full",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarImage({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn("aspect-square size-full", className)}
+      {...props}
+    />
+  )
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn(
+        "bg-muted flex size-full items-center justify-center rounded-full",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Avatar, AvatarImage, AvatarFallback }

app/components/ui/badge.tsx

@@ -0,0 +1,46 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "~/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive:
+          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "span"
+
+  return (
+    <Comp
+      data-slot="badge"
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+export { Badge, badgeVariants }

app/components/ui/dialog.tsx

@@ -0,0 +1,143 @@
+"use client"
+
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { XIcon } from "lucide-react"
+
+import { cn } from "~/lib/utils"
+
+function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <DialogPortal data-slot="dialog-portal">
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            data-slot="dialog-close"
+            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+          >
+            <XIcon />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn("text-lg leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}

app/components/ui/separator.tsx

@@ -0,0 +1,26 @@
+import * as React from "react"
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+
+import { cn } from "~/lib/utils"
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Separator }

app/lib/utils.ts

@@ -1,4 +1,4 @@
-import { type ClassValue, clsx } from "clsx"
+import { clsx, type ClassValue } from "clsx"
 import { twMerge } from "tailwind-merge"
 
 export function cn(...inputs: ClassValue[]) {

app/root.tsx

@@ -9,6 +9,9 @@ import {
 
 import type { Route } from "./+types/root";
 import "./app.css";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/components/ui/card";
+import { Alert, AlertDescription } from "~/components/ui/alert";
+import { AlertCircle } from "lucide-react";
 
 export const links: Route.LinksFunction = () => [
   { rel: "icon", type: "image/svg+xml", href: "/favicon.svg" },
@@ -63,14 +66,25 @@ export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
   }
 
   return (
-    <main className="pt-16 p-4 container mx-auto">
-      <h1>{message}</h1>
-      <p>{details}</p>
-      {stack && (
-        <pre className="w-full p-4 overflow-x-auto">
-          <code>{stack}</code>
-        </pre>
-      )}
-    </main>
+    <div className="min-h-screen bg-background flex items-center justify-center p-4">
+      <Card className="max-w-lg w-full">
+        <CardHeader>
+          <CardTitle className="text-2xl">{message}</CardTitle>
+          <CardDescription>{details}</CardDescription>
+        </CardHeader>
+        {stack && (
+          <CardContent>
+            <Alert>
+              <AlertCircle className="h-4 w-4" />
+              <AlertDescription>
+                <pre className="text-xs overflow-x-auto mt-2 p-2 bg-muted rounded">
+                  <code>{stack}</code>
+                </pre>
+              </AlertDescription>
+            </Alert>
+          </CardContent>
+        )}
+      </Card>
+    </div>
   );
 }

app/routes/home.tsx

@@ -1,6 +1,9 @@
 import type { Route } from "./+types/home";
 import { Link } from "react-router";
 import { useState, useEffect } from "react";
+import { Button } from "~/components/ui/button";
+import { Card, CardContent } from "~/components/ui/card";
+import { Activity, BarChart3, Zap, ArrowRight, ExternalLink } from "lucide-react";
 
 export function meta({}: Route.MetaArgs) {
   return [
@@ -22,84 +25,97 @@ export default function Home() {
   // Show "Open in New Tab" message if in iframe
   if (isInIframe) {
     return (
-      <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-gray-900 dark:to-gray-800 flex items-center justify-center">
-        <div className="max-w-md mx-auto p-8 bg-white dark:bg-gray-800 rounded-lg shadow-2xl text-center">
-          <div className="text-6xl mb-6">🔗</div>
-          <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-4">
-            Open in New Tab
-          </h2>
-          <p className="text-gray-600 dark:text-gray-300 mb-8">
-            For the best experience, please open this application in a new tab.
-          </p>
-          <a
-            href={window.location.href}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="inline-flex items-center px-8 py-4 bg-indigo-600 hover:bg-indigo-700 text-white font-semibold rounded-lg shadow-lg transition-all transform hover:scale-105"
-          >
-            Open in New Tab
-            <svg className="ml-2 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
-            </svg>
-          </a>
-        </div>
+      <div className="min-h-screen bg-background flex items-center justify-center p-4">
+        <Card className="max-w-md w-full">
+          <CardContent className="pt-6 text-center">
+            <div className="mb-6 flex justify-center">
+              <ExternalLink className="h-16 w-16 text-muted-foreground" />
+            </div>
+            <h2 className="text-2xl font-semibold mb-3">
+              Open in New Tab
+            </h2>
+            <p className="text-muted-foreground mb-6">
+              For the best experience, please open this application in a new tab.
+            </p>
+            <Button asChild className="w-full">
+              <a
+                href={window.location.href}
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                Open in New Tab
+                <ExternalLink className="ml-2 h-4 w-4" />
+              </a>
+            </Button>
+          </CardContent>
+        </Card>
       </div>
     );
   }
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-gray-900 dark:to-gray-800">
-      <div className="container mx-auto px-4 py-16">
-        <div className="max-w-4xl mx-auto text-center">
-          <h1 className="text-6xl font-bold text-gray-900 dark:text-white mb-6">
-            Always Uptime
-          </h1>
-          <p className="text-xl text-gray-600 dark:text-gray-300 mb-8">
-            Monitor your services 24/7 with real-time uptime checks every 30 seconds
-          </p>
-
-          <div className="flex justify-center gap-4 mb-16">
-            <Link
-              to="/login"
-              className="inline-flex items-center px-8 py-4 bg-indigo-600 hover:bg-indigo-700 text-white font-semibold rounded-lg shadow-lg transition-all transform hover:scale-105"
-            >
-              Get Started
-              <svg className="ml-2 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
-              </svg>
-            </Link>
+    <div className="min-h-screen bg-background">
+      <div className="container mx-auto px-4 py-20 sm:py-32">
+        <div className="max-w-4xl mx-auto">
+          {/* Hero Section */}
+          <div className="text-center mb-20">
+            <h1 className="text-5xl sm:text-6xl font-bold tracking-tight mb-6">
+              Always Uptime
+            </h1>
+            <p className="text-xl text-muted-foreground mb-8 max-w-2xl mx-auto">
+              Monitor your services 24/7 with real-time uptime checks every 30 seconds
+            </p>
+            <Button asChild size="lg" className="group">
+              <Link to="/login">
+                Get Started
+                <ArrowRight className="ml-2 h-4 w-4 transition-transform group-hover:translate-x-1" />
+              </Link>
+            </Button>
           </div>
 
-          <div className="grid md:grid-cols-3 gap-8 mt-16">
-            <div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6">
-              <div className="text-4xl mb-4">⚡</div>
-              <h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">
-                Real-time Monitoring
-              </h3>
-              <p className="text-gray-600 dark:text-gray-400">
-                Automated checks every 30 seconds to ensure your services are always available
-              </p>
-            </div>
+          {/* Features */}
+          <div className="grid sm:grid-cols-3 gap-6">
+            <Card className="border-border/50">
+              <CardContent className="pt-6">
+                <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
+                  <Activity className="h-6 w-6 text-primary" />
+                </div>
+                <h3 className="text-lg font-semibold mb-2">
+                  Real-time Monitoring
+                </h3>
+                <p className="text-sm text-muted-foreground">
+                  Automated checks every 30 seconds to ensure your services are always available
+                </p>
+              </CardContent>
+            </Card>
 
-            <div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6">
-              <div className="text-4xl mb-4">📊</div>
-              <h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">
-                Detailed Analytics
-              </h3>
-              <p className="text-gray-600 dark:text-gray-400">
-                Track uptime percentage, response times, and historical data
-              </p>
-            </div>
+            <Card className="border-border/50">
+              <CardContent className="pt-6">
+                <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
+                  <BarChart3 className="h-6 w-6 text-primary" />
+                </div>
+                <h3 className="text-lg font-semibold mb-2">
+                  Detailed Analytics
+                </h3>
+                <p className="text-sm text-muted-foreground">
+                  Track uptime percentage, response times, and historical data
+                </p>
+              </CardContent>
+            </Card>
 
-            <div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6">
-              <div className="text-4xl mb-4">🚀</div>
-              <h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">
-                Simple & Fast
-              </h3>
-              <p className="text-gray-600 dark:text-gray-400">
-                Clean dashboard with instant insights into your service health
-              </p>
-            </div>
+            <Card className="border-border/50">
+              <CardContent className="pt-6">
+                <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
+                  <Zap className="h-6 w-6 text-primary" />
+                </div>
+                <h3 className="text-lg font-semibold mb-2">
+                  Simple & Fast
+                </h3>
+                <p className="text-sm text-muted-foreground">
+                  Clean dashboard with instant insights into your service health
+                </p>
+              </CardContent>
+            </Card>
           </div>
         </div>
       </div>

app/routes/uptime.tsx

@@ -4,6 +4,15 @@ import { useRevalidator, redirect, Form } from "react-router";
 import { useEffect, useState } from "react";
 import { lucia } from "~/lib/auth.server";
 import { Button } from "~/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/components/ui/card";
+import { Input } from "~/components/ui/input";
+import { Label } from "~/components/ui/label";
+import { Badge } from "~/components/ui/badge";
+import { Separator } from "~/components/ui/separator";
+import { Alert, AlertDescription } from "~/components/ui/alert";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "~/components/ui/dialog";
+import { Avatar, AvatarFallback } from "~/components/ui/avatar";
+import { Plus, LogOut, Pencil, Trash2, Activity, Clock, TrendingUp, AlertCircle } from "lucide-react";
 
 export async function loader({ request }: Route.LoaderArgs) {
   // Check authentication
@@ -157,353 +166,337 @@ export default function Uptime({ loaderData, actionData }: Route.ComponentProps)
   }, [actionData, revalidator]);
 
   return (
-    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
-      <div className="container mx-auto px-4 py-8">
+    <div className="min-h-screen bg-background">
+      <div className="container mx-auto px-4 py-8 max-w-7xl">
+        {/* Header */}
         <header className="mb-8 flex items-center justify-between">
           <div>
-            <h1 className="text-4xl font-bold text-gray-900 dark:text-white mb-2">
+            <h1 className="text-3xl font-bold tracking-tight mb-1">
               Always Uptime
             </h1>
-            <p className="text-gray-600 dark:text-gray-400">
+            <p className="text-sm text-muted-foreground">
               Monitoring your services every 30 seconds
             </p>
           </div>
-          <div className="flex items-center gap-4">
-            <span className="text-sm text-gray-600 dark:text-gray-400">{user.username}</span>
+          <div className="flex items-center gap-3">
+            <Avatar className="h-9 w-9">
+              <AvatarFallback className="text-xs">
+                {user.username.slice(0, 2).toUpperCase()}
+              </AvatarFallback>
+            </Avatar>
+            <span className="text-sm font-medium hidden sm:inline">{user.username}</span>
             <Form method="post" action="/logout">
               <Button variant="outline" size="sm" type="submit">
-                Logout
+                <LogOut className="h-4 w-4 sm:mr-2" />
+                <span className="hidden sm:inline">Logout</span>
               </Button>
             </Form>
           </div>
         </header>
 
+        <Separator className="mb-8" />
+
         {/* Add Monitor Button */}
         <div className="mb-6">
-          <Button
-            onClick={() => setShowAddForm(!showAddForm)}
-            className="bg-indigo-600 hover:bg-indigo-700 text-white"
-          >
-            {showAddForm ? "Cancel" : "+ Add New Monitor"}
+          <Button onClick={() => setShowAddForm(!showAddForm)}>
+            <Plus className="h-4 w-4 mr-2" />
+            {showAddForm ? "Cancel" : "Add New Monitor"}
           </Button>
         </div>
 
         {/* Add Monitor Form */}
         {showAddForm && (
-          <div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 mb-6">
-            <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
-              Add New Monitor
-            </h2>
-            {actionData?.error && (
-              <div className="bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200 p-3 rounded mb-4">
-                {actionData.error}
-              </div>
-            )}
-            <Form method="post" className="space-y-4">
-              <input type="hidden" name="intent" value="create" />
-
-              <div>
-                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-                  URL to Monitor
-                </label>
-                <input
-                  type="url"
-                  name="url"
-                  required
-                  placeholder="https://example.com"
-                  className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700 dark:text-white"
-                />
-              </div>
-
-              <div>
-                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-                  Check Interval (seconds)
-                </label>
-                <input
-                  type="number"
-                  name="interval"
-                  required
-                  min="10"
-                  defaultValue="30"
-                  placeholder="30"
-                  className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700 dark:text-white"
-                />
-                <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
-                  Minimum 10 seconds
-                </p>
-              </div>
-
-              <div className="flex gap-3">
-                <Button type="submit" className="bg-indigo-600 hover:bg-indigo-700 text-white">
-                  Create Monitor
-                </Button>
-                <Button
-                  type="button"
-                  variant="outline"
-                  onClick={() => setShowAddForm(false)}
-                >
-                  Cancel
-                </Button>
-              </div>
-            </Form>
-          </div>
+          <Card className="mb-6">
+            <CardHeader>
+              <CardTitle>Add New Monitor</CardTitle>
+              <CardDescription>
+                Start monitoring a new service endpoint
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              {actionData?.error && (
+                <Alert variant="destructive" className="mb-4">
+                  <AlertCircle className="h-4 w-4" />
+                  <AlertDescription>{actionData.error}</AlertDescription>
+                </Alert>
+              )}
+              <Form method="post" className="space-y-4">
+                <input type="hidden" name="intent" value="create" />
+
+                <div className="space-y-2">
+                  <Label htmlFor="url">URL to Monitor</Label>
+                  <Input
+                    id="url"
+                    type="url"
+                    name="url"
+                    required
+                    placeholder="https://example.com"
+                  />
+                </div>
+
+                <div className="space-y-2">
+                  <Label htmlFor="interval">Check Interval (seconds)</Label>
+                  <Input
+                    id="interval"
+                    type="number"
+                    name="interval"
+                    required
+                    min="10"
+                    defaultValue="30"
+                    placeholder="30"
+                  />
+                  <p className="text-xs text-muted-foreground">
+                    Minimum 10 seconds
+                  </p>
+                </div>
+
+                <div className="flex gap-3">
+                  <Button type="submit">Create Monitor</Button>
+                  <Button
+                    type="button"
+                    variant="outline"
+                    onClick={() => setShowAddForm(false)}
+                  >
+                    Cancel
+                  </Button>
+                </div>
+              </Form>
+            </CardContent>
+          </Card>
         )}
 
         {stats.length === 0 ? (
-          <div className="bg-white dark:bg-gray-800 rounded-lg shadow p-8 text-center">
-            <p className="text-gray-600 dark:text-gray-400">
-              No uptime data available yet. Checks will appear here shortly...
-            </p>
-          </div>
+          <Card>
+            <CardContent className="pt-6 text-center py-12">
+              <Activity className="h-12 w-12 mx-auto text-muted-foreground mb-4" />
+              <p className="text-muted-foreground">
+                No monitors yet. Add your first monitor to start tracking uptime.
+              </p>
+            </CardContent>
+          </Card>
         ) : (
           <div className="space-y-6">
             {stats.map((stat: UptimeStats) => (
-              <div
-                key={stat.url}
-                className="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden"
-              >
-                <div className="p-6">
-                  <div className="flex items-center justify-between mb-4">
+              <Card key={stat.url}>
+                <CardHeader>
+                  <div className="flex items-start justify-between">
                     <div className="flex-1">
-                      <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-1">
-                        {stat.name}
-                      </h2>
-                      <p className="text-sm text-gray-500 dark:text-gray-400 mb-2">
-                        {stat.url}
-                      </p>
-                      <div className="flex items-center gap-2">
-                        <span
-                          className={`inline-flex items-center px-3 py-1 rounded-full text-sm font-medium ${
-                            stat.lastCheck?.status === "up"
-                              ? "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200"
-                              : "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200"
-                          }`}
-                        >
-                          {stat.lastCheck?.status === "up" ? "🟢 Online" : "🔴 Offline"}
-                        </span>
-                        {stat.lastCheck?.statusCode && (
-                          <span className="text-sm text-gray-500 dark:text-gray-400">
-                            Status: {stat.lastCheck.statusCode}
-                          </span>
-                        )}
+                      <div className="flex items-center gap-2 mb-1">
+                        <CardTitle className="text-xl">{stat.name}</CardTitle>
+                        <Badge variant={stat.lastCheck?.status === "up" ? "default" : "destructive"}>
+                          {stat.lastCheck?.status === "up" ? "Online" : "Offline"}
+                        </Badge>
                       </div>
+                      <CardDescription className="text-sm">{stat.url}</CardDescription>
+                      {stat.lastCheck?.statusCode && (
+                        <p className="text-xs text-muted-foreground mt-1">
+                          Status Code: {stat.lastCheck.statusCode}
+                        </p>
+                      )}
                     </div>
-                    <div className="text-right">
-                      <div className="text-3xl font-bold text-gray-900 dark:text-white">
-                        {stat.uptime.toFixed(2)}%
-                      </div>
-                      <div className="text-sm text-gray-500 dark:text-gray-400 mb-3">
+                    <div className="flex items-center gap-2">
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => setEditingMonitor(stat)}
+                      >
+                        <Pencil className="h-4 w-4" />
+                      </Button>
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => setDeletingMonitor(stat.id)}
+                      >
+                        <Trash2 className="h-4 w-4 text-destructive" />
+                      </Button>
+                    </div>
+                  </div>
+                </CardHeader>
+                <CardContent>
+                  {/* Stats Grid */}
+                  <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
+                    <div className="space-y-1">
+                      <div className="flex items-center text-sm text-muted-foreground">
+                        <TrendingUp className="h-4 w-4 mr-1" />
                         Uptime
                       </div>
-                      {/* Action Buttons */}
-                      <div className="flex gap-2 justify-end">
-                        <Button
-                          variant="outline"
-                          size="sm"
-                          onClick={() => setEditingMonitor(stat)}
-                        >
-                          Edit
-                        </Button>
-                        <Button
-                          variant="outline"
-                          size="sm"
-                          onClick={() => setDeletingMonitor(stat.id)}
-                          className="text-red-600 hover:text-red-700 hover:bg-red-50 dark:hover:bg-red-900"
-                        >
-                          Delete
-                        </Button>
+                      <div className="text-2xl font-bold">
+                        {stat.uptime.toFixed(2)}%
                       </div>
                     </div>
-                  </div>
-
-                  <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
-                    <div className="bg-gray-50 dark:bg-gray-700 rounded-lg p-4">
-                      <div className="text-sm text-gray-500 dark:text-gray-400 mb-1">
+                    <div className="space-y-1">
+                      <div className="flex items-center text-sm text-muted-foreground">
+                        <Activity className="h-4 w-4 mr-1" />
                         Total Checks
                       </div>
-                      <div className="text-2xl font-semibold text-gray-900 dark:text-white">
+                      <div className="text-2xl font-bold">
                         {stat.totalChecks}
                       </div>
                     </div>
-                    <div className="bg-gray-50 dark:bg-gray-700 rounded-lg p-4">
-                      <div className="text-sm text-gray-500 dark:text-gray-400 mb-1">
+                    <div className="space-y-1">
+                      <div className="text-sm text-muted-foreground">
                         Successful
                       </div>
-                      <div className="text-2xl font-semibold text-green-600 dark:text-green-400">
+                      <div className="text-2xl font-bold text-green-600 dark:text-green-400">
                         {stat.successfulChecks}
                       </div>
                     </div>
-                    <div className="bg-gray-50 dark:bg-gray-700 rounded-lg p-4">
-                      <div className="text-sm text-gray-500 dark:text-gray-400 mb-1">
-                        Failed
-                      </div>
-                      <div className="text-2xl font-semibold text-red-600 dark:text-red-400">
-                        {stat.failedChecks}
-                      </div>
-                    </div>
-                    <div className="bg-gray-50 dark:bg-gray-700 rounded-lg p-4">
-                      <div className="text-sm text-gray-500 dark:text-gray-400 mb-1">
+                    <div className="space-y-1">
+                      <div className="flex items-center text-sm text-muted-foreground">
+                        <Clock className="h-4 w-4 mr-1" />
                         Avg Response
                       </div>
-                      <div className="text-2xl font-semibold text-gray-900 dark:text-white">
+                      <div className="text-2xl font-bold">
                         {Math.round(stat.averageResponseTime)}ms
                       </div>
                     </div>
                   </div>
 
                   {stat.lastCheck && (
-                    <div className="border-t border-gray-200 dark:border-gray-700 pt-4">
-                      <h3 className="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
-                        Last Check
-                      </h3>
-                      <div className="text-sm text-gray-600 dark:text-gray-400">
-                        <p>
-                          Time: {new Date(stat.lastCheck.timestamp).toLocaleString()}
-                        </p>
-                        {stat.lastCheck.responseTime && (
-                          <p>Response Time: {stat.lastCheck.responseTime}ms</p>
-                        )}
-                        {stat.lastCheck.error && (
-                          <p className="text-red-600 dark:text-red-400">
-                            Error: {stat.lastCheck.error}
-                          </p>
-                        )}
+                    <>
+                      <Separator className="mb-4" />
+                      <div className="space-y-1 mb-4">
+                        <h4 className="text-sm font-semibold">Last Check</h4>
+                        <div className="text-sm text-muted-foreground space-y-0.5">
+                          <p>Time: {new Date(stat.lastCheck.timestamp).toLocaleString()}</p>
+                          {stat.lastCheck.responseTime && (
+                            <p>Response Time: {stat.lastCheck.responseTime}ms</p>
+                          )}
+                          {stat.lastCheck.error && (
+                            <p className="text-destructive">
+                              Error: {stat.lastCheck.error}
+                            </p>
+                          )}
+                        </div>
                       </div>
-                    </div>
+                    </>
                   )}
 
                   {stat.checks.length > 0 && (
-                    <div className="border-t border-gray-200 dark:border-gray-700 pt-4 mt-4">
-                      <h3 className="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3">
-                        Recent Checks (Last {Math.min(stat.checks.length, 20)})
-                      </h3>
-                      <div className="flex gap-1 overflow-x-auto pb-2">
-                        {stat.checks
-                          .slice(-20)
-                          .reverse()
-                          .map((check, idx: number) => (
-                            <div
-                              key={idx}
-                              className={`w-3 h-16 rounded ${
-                                check.status === "up"
-                                  ? "bg-green-500"
-                                  : "bg-red-500"
-                              }`}
-                              title={`${new Date(check.timestamp).toLocaleString()} - ${
-                                check.status
-                              } (${check.responseTime}ms)`}
-                            />
-                          ))}
+                    <>
+                      <Separator className="mb-4" />
+                      <div>
+                        <h4 className="text-sm font-semibold mb-3">
+                          Recent Checks (Last {Math.min(stat.checks.length, 20)})
+                        </h4>
+                        <div className="flex gap-1 overflow-x-auto pb-2">
+                          {stat.checks
+                            .slice(-20)
+                            .reverse()
+                            .map((check, idx: number) => (
+                              <div
+                                key={idx}
+                                className={`w-3 h-16 rounded ${
+                                  check.status === "up"
+                                    ? "bg-green-500"
+                                    : "bg-red-500"
+                                }`}
+                                title={`${new Date(check.timestamp).toLocaleString()} - ${
+                                  check.status
+                                } (${check.responseTime}ms)`}
+                              />
+                            ))}
+                        </div>
                       </div>
-                    </div>
+                    </>
                   )}
-                </div>
-              </div>
+                </CardContent>
+              </Card>
             ))}
           </div>
         )}
 
         {/* Edit Monitor Modal */}
-        {editingMonitor && (
-          <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
-            <div className="bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6 max-w-md w-full">
-              <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
-                Edit Monitor
-              </h2>
-              {actionData?.error && (
-                <div className="bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200 p-3 rounded mb-4">
-                  {actionData.error}
-                </div>
-              )}
+        <Dialog open={!!editingMonitor} onOpenChange={() => setEditingMonitor(null)}>
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>Edit Monitor</DialogTitle>
+              <DialogDescription>
+                Update the URL or check interval for this monitor
+              </DialogDescription>
+            </DialogHeader>
+            {actionData?.error && (
+              <Alert variant="destructive">
+                <AlertCircle className="h-4 w-4" />
+                <AlertDescription>{actionData.error}</AlertDescription>
+              </Alert>
+            )}
+            {editingMonitor && (
               <Form method="post" className="space-y-4">
                 <input type="hidden" name="intent" value="update" />
                 <input type="hidden" name="monitorId" value={editingMonitor.id} />
 
-                <div>
-                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-                    URL to Monitor
-                  </label>
-                  <input
+                <div className="space-y-2">
+                  <Label htmlFor="edit-url">URL to Monitor</Label>
+                  <Input
+                    id="edit-url"
                     type="url"
                     name="url"
                     defaultValue={editingMonitor.url}
                     required
-                    className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700 dark:text-white"
                   />
                 </div>
 
-                <div>
-                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-                    Check Interval (seconds)
-                  </label>
-                  <input
+                <div className="space-y-2">
+                  <Label htmlFor="edit-interval">Check Interval (seconds)</Label>
+                  <Input
+                    id="edit-interval"
                     type="number"
                     name="interval"
                     defaultValue={editingMonitor.interval}
                     required
                     min="10"
-                    className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700 dark:text-white"
                   />
-                  <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
+                  <p className="text-xs text-muted-foreground">
                     Minimum 10 seconds
                   </p>
                 </div>
 
-                <div className="flex gap-3">
-                  <Button type="submit" className="bg-indigo-600 hover:bg-indigo-700 text-white">
-                    Update Monitor
-                  </Button>
-                  <Button
-                    type="button"
-                    variant="outline"
-                    onClick={() => setEditingMonitor(null)}
-                  >
+                <DialogFooter>
+                  <Button type="button" variant="outline" onClick={() => setEditingMonitor(null)}>
                     Cancel
                   </Button>
-                </div>
+                  <Button type="submit">Update Monitor</Button>
+                </DialogFooter>
               </Form>
-            </div>
-          </div>
-        )}
+            )}
+          </DialogContent>
+        </Dialog>
 
         {/* Delete Confirmation Modal */}
-        {deletingMonitor && (
-          <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
-            <div className="bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6 max-w-md w-full">
-              <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
-                Delete Monitor
-              </h2>
-              <p className="text-gray-600 dark:text-gray-400 mb-6">
+        <Dialog open={!!deletingMonitor} onOpenChange={() => setDeletingMonitor(null)}>
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>Delete Monitor</DialogTitle>
+              <DialogDescription>
                 Are you sure you want to delete this monitor? This action cannot be undone.
-              </p>
-              {actionData?.error && (
-                <div className="bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200 p-3 rounded mb-4">
-                  {actionData.error}
-                </div>
-              )}
-              <Form method="post" className="flex gap-3">
-                <input type="hidden" name="intent" value="delete" />
-                <input type="hidden" name="monitorId" value={deletingMonitor} />
-                <Button
-                  type="submit"
-                  className="bg-red-600 hover:bg-red-700 text-white"
-                >
-                  Delete
-                </Button>
-                <Button
-                  type="button"
-                  variant="outline"
-                  onClick={() => setDeletingMonitor(null)}
-                >
+              </DialogDescription>
+            </DialogHeader>
+            {actionData?.error && (
+              <Alert variant="destructive">
+                <AlertCircle className="h-4 w-4" />
+                <AlertDescription>{actionData.error}</AlertDescription>
+              </Alert>
+            )}
+            <Form method="post">
+              <input type="hidden" name="intent" value="delete" />
+              <input type="hidden" name="monitorId" value={deletingMonitor || ""} />
+              <DialogFooter>
+                <Button type="button" variant="outline" onClick={() => setDeletingMonitor(null)}>
                   Cancel
                 </Button>
-              </Form>
-            </div>
-          </div>
-        )}
+                <Button type="submit" variant="destructive">
+                  Delete
+                </Button>
+              </DialogFooter>
+            </Form>
+          </DialogContent>
+        </Dialog>
 
-        <footer className="mt-8 text-center text-sm text-gray-500 dark:text-gray-400">
-          Auto-refreshing every 30 seconds
+        <footer className="mt-12 text-center">
+          <p className="text-sm text-muted-foreground">
+            Auto-refreshing every 30 seconds
+          </p>
         </footer>
       </div>
     </div>

components.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "app/app.css",
+    "baseColor": "zinc",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "~/components",
+    "utils": "~/lib/utils",
+    "ui": "~/components/ui",
+    "lib": "~/lib",
+    "hooks": "~/hooks"
+  },
+  "registries": {}
+}

package.json

@@ -12,6 +12,10 @@
     "@libsql/client": "^0.15.15",
     "@lucia-auth/adapter-drizzle": "^1.1.0",
     "@node-rs/argon2": "^2.0.2",
+    "@radix-ui/react-avatar": "^1.1.10",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-separator": "^1.1.7",
+    "@radix-ui/react-slot": "^1.2.3",
     "@react-router/node": "^7.9.2",
     "@react-router/serve": "^7.9.2",
     "class-variance-authority": "^0.7.1",
@@ -34,7 +38,9 @@
     "@types/node": "^22",
     "@types/react": "^19.1.13",
     "@types/react-dom": "^19.1.9",
+    "shadcn": "^3.4.2",
     "tailwindcss": "^4.1.13",
+    "tw-animate-css": "^1.4.0",
     "typescript": "^5.9.2",
     "vite": "^7.1.7",
     "vite-tsconfig-paths": "^5.1.4"