Convert website to modern shadcn/ui components

Major updates:
- Updated all core components (Button, Avatar, Tabs, DropdownMenu, etc.) to latest shadcn/ui versions
- Added modern components: Skeleton, Badge, Card, Separator, Toast with hooks
- Modernized typography components to use semantic CSS variables (text-foreground, text-primary)
- Replaced custom Loader with Skeleton component for better animations
- Enhanced CopyButton using modern Button component patterns
- Updated Spinner with size variants and consistent theming
- Fixed import system to use lowercase naming convention and named exports
- Improved theming with CSS variables instead of hardcoded dark mode classes
- Added better accessibility features across all components

Breaking changes resolved:
- Updated Avatar component size handling with CSS classes
- Fixed component imports to use named exports where required
- Resolved case-sensitivity issues in file naming
- Updated toast system path references

All components now follow latest shadcn/ui conventions and patterns.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <[email protected]>

Author: kiwicopple

website/components/access-tokens/AccessTokenCard.tsx

@@ -1,7 +1,7 @@
 import dayjs from 'dayjs'
 import { toast } from 'react-hot-toast'
 import { useDeleteAccessTokenMutation } from '~/data/access-tokens/delete-access-token'
-import { Button } from '~/components/ui/Button'
+import { Button } from '~/components/ui/button'
 
 export interface ApiTokenCardProps {
   tokenId: string

website/components/forms/FormButton.tsx

@@ -1,7 +1,7 @@
 import { forwardRef } from 'react'
 import { useFormState } from 'react-final-form'
 import { cn } from '~/lib/utils'
-import { Button, ButtonProps } from '~/components/ui/Button'
+import { Button, ButtonProps } from '~/components/ui/button'
 
 export interface FormButtonProps extends ButtonProps {}
 

website/components/forms/FormInput.tsx

@@ -1,7 +1,7 @@
 import { ComponentPropsWithoutRef, forwardRef, PropsWithoutRef } from 'react'
 import { useField, UseFieldConfig } from 'react-final-form'
 import { Input } from '~/components/ui/input'
-import Label from '../ui/Label'
+import { Label } from '../ui/label'
 import { cn } from '~/lib/utils'
 
 export interface FormInputProps

website/components/layouts/Navbar.tsx

@@ -3,21 +3,22 @@ import { useRouter } from 'next/router'
 import { useCallback, useMemo } from 'react'
 import { toast } from 'react-hot-toast'
 import Search from '~/components/search/Search'
-import { Avatar, AvatarFallback, AvatarImage } from '~/components/ui/Avatar'
-import DropdownMenu, {
+import { Avatar, AvatarFallback, AvatarImage } from '~/components/ui/avatar'
+import {
+  DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-} from '~/components/ui/DropdownMenu'
+} from '~/components/ui/dropdown-menu'
 import { useSignOutMutation } from '~/data/auth/sign-out-mutation'
 import { useUsersOrganizationsQuery } from '~/data/organizations/users-organizations-query'
 import { useUser } from '~/lib/auth'
 import { getAvatarUrl } from '~/lib/avatars'
 import { useTheme } from '../themes/ThemeContext'
 import ThemeSwitcher from '../themes/ThemeSwitcher'
-import { Button } from '~/components/ui/Button'
+import { Button } from '~/components/ui/button'
 
 const Navbar = () => {
   const router = useRouter()
@@ -66,11 +67,15 @@ const Navbar = () => {
 
   const AvatarWrapper = ({ size = 'sm' }: { size?: 'sm' | 'md' }) =>
     user?.user_metadata.avatar_path === undefined ? (
-      <div className="flex items-center justify-center w-6 h-6 text-gray-600 bg-gray-300 border-gray-400 rounded-full border-1 dark:border-slate-400 dark:bg-slate-500 dark:text-white">
+      <div
+        className={`flex items-center justify-center text-gray-600 bg-gray-300 border-gray-400 rounded-full border-1 dark:border-slate-400 dark:bg-slate-500 dark:text-white ${size === 'sm' ? 'w-6 h-6' : 'w-10 h-10'}`}
+      >
         {displayName[0].toUpperCase()}
       </div>
     ) : (
-      <Avatar size={size} className="border dark:border-slate-700">
+      <Avatar
+        className={`border dark:border-slate-700 ${size === 'sm' ? 'w-6 h-6' : 'w-10 h-10'}`}
+      >
         <AvatarImage src={avatarUrl} alt={avatarName} />
         <AvatarFallback>{avatarFallback}</AvatarFallback>
       </Avatar>

website/components/ui/Avatar.tsx

@@ -1,68 +1,48 @@
-'use client'
-
+import * as React from 'react'
 import * as AvatarPrimitive from '@radix-ui/react-avatar'
-import { cva, VariantProps } from 'class-variance-authority'
-import { ComponentPropsWithoutRef, ElementRef, forwardRef } from 'react'
-import { cn } from '~/lib/utils'
-
-const avatarVariants = cva(
-  'relative flex shrink-0 overflow-hidden rounded-full',
-  {
-    variants: {
-      size: {
-        sm: 'w-6 h-6',
-        md: 'w-10 h-10',
-      },
-    },
-    defaultVariants: {
-      size: 'md',
-    },
-  }
-)
-
-export interface AvatarProps
-  extends ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>,
-    VariantProps<typeof avatarVariants> {}
 
-const Avatar = forwardRef<ElementRef<typeof AvatarPrimitive.Root>, AvatarProps>(
-  ({ className, size, ...props }, ref) => (
-    <AvatarPrimitive.Root
-      ref={ref}
-      className={cn(avatarVariants({ size, className }))}
-      {...props}
-    />
-  )
-)
+import { cn } from '~/lib/utils'
 
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn(
+      'relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full',
+      className
+    )}
+    {...props}
+  />
+))
 Avatar.displayName = AvatarPrimitive.Root.displayName
 
-const AvatarImage = forwardRef<
-  ElementRef<typeof AvatarPrimitive.Image>,
-  ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
 >(({ className, ...props }, ref) => (
   <AvatarPrimitive.Image
     ref={ref}
     className={cn('aspect-square h-full w-full', className)}
     {...props}
   />
 ))
-
 AvatarImage.displayName = AvatarPrimitive.Image.displayName
 
-const AvatarFallback = forwardRef<
-  ElementRef<typeof AvatarPrimitive.Fallback>,
-  ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
 >(({ className, ...props }, ref) => (
   <AvatarPrimitive.Fallback
     ref={ref}
     className={cn(
-      'flex h-full w-full items-center justify-center rounded-full bg-slate-100 dark:bg-slate-700',
+      'flex h-full w-full items-center justify-center rounded-full bg-muted',
       className
     )}
     {...props}
   />
 ))
-
 AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
 
 export { Avatar, AvatarImage, AvatarFallback }

website/components/ui/Button.tsx

@@ -5,7 +5,7 @@ import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '~/lib/utils'
 
 const buttonVariants = cva(
-  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
   {
     variants: {
       variant: {

website/components/ui/CopyButton.tsx

@@ -4,26 +4,11 @@ import { CheckIcon, ClipboardDocumentIcon } from '@heroicons/react/24/outline'
 import { cva, VariantProps } from 'class-variance-authority'
 import { HTMLAttributes, useEffect, useState } from 'react'
 import { cn } from '~/lib/utils'
+import { Button } from './button'
 
-export const copyButtonVariants = cva(
-  'inline-flex items-center justify-center rounded-md p-2 text-sm font-medium transition-all',
-  {
-    variants: {
-      variant: {
-        light: 'text-slate-900 border-slate-200 hover:bg-slate-100',
-        dark: 'text-white border-slate-900 hover:bg-slate-900',
-      },
-    },
-    defaultVariants: {
-      variant: 'light',
-    },
-  }
-)
-
-interface CopyButtonProps
-  extends HTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof copyButtonVariants> {
+interface CopyButtonProps extends HTMLAttributes<HTMLButtonElement> {
   getValue: () => string
+  variant?: 'light' | 'dark'
 }
 
 async function copyToClipboardWithMeta(value: string) {
@@ -33,7 +18,7 @@ async function copyToClipboardWithMeta(value: string) {
 const CopyButton = ({
   getValue,
   className,
-  variant,
+  variant = 'light',
   ...props
 }: CopyButtonProps) => {
   const [hasCopied, setHasCopied] = useState(false)
@@ -54,10 +39,12 @@ const CopyButton = ({
   }, [hasCopied])
 
   return (
-    <button
+    <Button
+      variant="ghost"
+      size="icon"
       className={cn(
-        copyButtonVariants({ variant }),
-        'bg-gray-50 text-slate-700 dark:text-slate-100 dark:bg-gray-700 dark:hover:bg-gray-900 transition-colors',
+        'h-8 w-8',
+        variant === 'dark' && 'text-muted-foreground hover:text-foreground',
         className
       )}
       onClick={() => {
@@ -68,11 +55,11 @@ const CopyButton = ({
     >
       <span className="sr-only">Copy</span>
       {hasCopied ? (
-        <CheckIcon className="w-5 h-5" />
+        <CheckIcon className="h-4 w-4" />
       ) : (
-        <ClipboardDocumentIcon className="w-5 h-5" />
+        <ClipboardDocumentIcon className="h-4 w-4" />
       )}
-    </button>
+    </Button>
   )
 }