diff --git a/components.json b/components.json
deleted file mode 100644
index 90f5d46d..00000000
--- a/components.json
+++ /dev/null
@@ -1,20 +0,0 @@
-{
-  "$schema": "https://shadcn-vue.com/schema.json",
-  "style": "default",
-  "typescript": true,
-  "tailwind": {
-    "config": "tailwind.config.js",
-    "css": "resources/css/app.css",
-    "baseColor": "neutral",
-    "cssVariables": true,
-    "prefix": ""
-  },
-  "aliases": {
-    "components": "@/components",
-    "composables": "@/composables",
-    "utils": "@/lib/utils",
-    "ui": "@/components/ui",
-    "lib": "@/lib"
-  },
-  "iconLibrary": "lucide"
-}
diff --git a/package-lock.json b/package-lock.json
index 0421eb2f..4702949a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,5 +1,5 @@
 {
-    "name": "vue-starter-kit",
+    "name": "laravel-vuetify-starter-kit",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
diff --git a/resources/css/app.css b/resources/css/app.css
index 874ff630..05d3d191 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -1,6 +1,5 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'vuetify/styles';
+@import 'vuetify/src/styles/main.sass';
 
 body,
 html {
diff --git a/resources/js/app.ts b/resources/js/app.ts
index 5670d9e8..15af6ac1 100644
--- a/resources/js/app.ts
+++ b/resources/js/app.ts
@@ -6,6 +6,8 @@ import type { DefineComponent } from 'vue';
 import { createApp, h } from 'vue';
 import { ZiggyVue } from 'ziggy-js';
 import { initializeTheme } from './composables/useAppearance';
+import { createVuetify } from 'vuetify';
+import 'vuetify/styles';
 
 // Extend ImportMeta interface for Vite...
 declare module 'vite/client' {
@@ -22,6 +24,8 @@ declare module 'vite/client' {
 
 const appName = import.meta.env.VITE_APP_NAME || 'Laravel';
 
+const vuetify = createVuetify();
+
 createInertiaApp({
     title: (title) => `${title} - ${appName}`,
     resolve: (name) => resolvePageComponent(`./pages/${name}.vue`, import.meta.glob<DefineComponent>('./pages/**/*.vue')),
@@ -29,6 +33,7 @@ createInertiaApp({
         createApp({ render: () => h(App, props) })
             .use(plugin)
             .use(ZiggyVue)
+            .use(vuetify)
             .mount(el);
     },
     progress: {
diff --git a/resources/js/components/AppContent.vue b/resources/js/components/AppContent.vue
index 96e3d2a9..b6e7bd97 100644
--- a/resources/js/components/AppContent.vue
+++ b/resources/js/components/AppContent.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { SidebarInset } from '@/components/ui/sidebar';
 import { computed } from 'vue';
 
 interface Props {
@@ -12,10 +11,10 @@ const className = computed(() => props.class);
 </script>
 
 <template>
-    <SidebarInset v-if="props.variant === 'sidebar'" :class="className">
+    <v-main v-if="props.variant === 'sidebar'" :class="className">
         <slot />
-    </SidebarInset>
-    <main v-else class="mx-auto flex h-full w-full max-w-7xl flex-1 flex-col gap-4 rounded-xl" :class="className">
+    </v-main>
+    <v-main v-else class="mx-auto flex h-full w-full max-w-7xl flex-1 flex-col gap-4 rounded-xl" :class="className">
         <slot />
-    </main>
+    </v-main>
 </template>
diff --git a/resources/js/components/AppHeader.vue b/resources/js/components/AppHeader.vue
index 84902b2e..4f15cb75 100644
--- a/resources/js/components/AppHeader.vue
+++ b/resources/js/components/AppHeader.vue
@@ -2,23 +2,11 @@
 import AppLogo from '@/components/AppLogo.vue';
 import AppLogoIcon from '@/components/AppLogoIcon.vue';
 import Breadcrumbs from '@/components/Breadcrumbs.vue';
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
-import { Button } from '@/components/ui/button';
-import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
-import {
-    NavigationMenu,
-    NavigationMenuItem,
-    NavigationMenuLink,
-    NavigationMenuList,
-    navigationMenuTriggerStyle,
-} from '@/components/ui/navigation-menu';
-import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet';
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import UserMenuContent from '@/components/UserMenuContent.vue';
 import { getInitials } from '@/composables/useInitials';
 import type { BreadcrumbItem, NavItem } from '@/types';
 import { Link, usePage } from '@inertiajs/vue3';
-import { BookOpen, Folder, LayoutGrid, Menu, Search } from 'lucide-vue-next';
+import { BookOpen, Folder, LayoutGrid, Menu, Search } from 'vuetify/lib/components';
 import { computed } from 'vue';
 
 interface Props {
@@ -62,50 +50,13 @@ const rightNavItems: NavItem[] = [
 
 <template>
     <div>
-        <div class="border-b border-sidebar-border/80">
-            <div class="mx-auto flex h-16 items-center px-4 md:max-w-7xl">
+        <v-app-bar app>
+            <v-toolbar>
                 <!-- Mobile Menu -->
                 <div class="lg:hidden">
-                    <Sheet>
-                        <SheetTrigger :as-child="true">
-                            <Button variant="ghost" size="icon" class="mr-2 h-9 w-9">
-                                <Menu class="h-5 w-5" />
-                            </Button>
-                        </SheetTrigger>
-                        <SheetContent side="left" class="w-[300px] p-6">
-                            <SheetTitle class="sr-only">Navigation Menu</SheetTitle>
-                            <SheetHeader class="flex justify-start text-left">
-                                <AppLogoIcon class="size-6 fill-current text-black dark:text-white" />
-                            </SheetHeader>
-                            <div class="flex h-full flex-1 flex-col justify-between space-y-4 py-6">
-                                <nav class="-mx-3 space-y-1">
-                                    <Link
-                                        v-for="item in mainNavItems"
-                                        :key="item.title"
-                                        :href="item.href"
-                                        class="flex items-center gap-x-3 rounded-lg px-3 py-2 text-sm font-medium hover:bg-accent"
-                                        :class="activeItemStyles(item.href)"
-                                    >
-                                        <component v-if="item.icon" :is="item.icon" class="h-5 w-5" />
-                                        {{ item.title }}
-                                    </Link>
-                                </nav>
-                                <div class="flex flex-col space-y-4">
-                                    <a
-                                        v-for="item in rightNavItems"
-                                        :key="item.title"
-                                        :href="item.href"
-                                        target="_blank"
-                                        rel="noopener noreferrer"
-                                        class="flex items-center space-x-2 text-sm font-medium"
-                                    >
-                                        <component v-if="item.icon" :is="item.icon" class="h-5 w-5" />
-                                        <span>{{ item.title }}</span>
-                                    </a>
-                                </div>
-                            </div>
-                        </SheetContent>
-                    </Sheet>
+                    <v-btn icon @click="drawer = !drawer">
+                        <v-icon>mdi-menu</v-icon>
+                    </v-btn>
                 </div>
 
                 <Link :href="route('dashboard')" class="flex items-center gap-x-2">
@@ -114,75 +65,54 @@ const rightNavItems: NavItem[] = [
 
                 <!-- Desktop Menu -->
                 <div class="hidden h-full lg:flex lg:flex-1">
-                    <NavigationMenu class="ml-10 flex h-full items-stretch">
-                        <NavigationMenuList class="flex h-full items-stretch space-x-2">
-                            <NavigationMenuItem v-for="(item, index) in mainNavItems" :key="index" class="relative flex h-full items-center">
-                                <Link :href="item.href">
-                                    <NavigationMenuLink
-                                        :class="[navigationMenuTriggerStyle(), activeItemStyles(item.href), 'h-9 cursor-pointer px-3']"
-                                    >
-                                        <component v-if="item.icon" :is="item.icon" class="mr-2 h-4 w-4" />
-                                        {{ item.title }}
-                                    </NavigationMenuLink>
-                                </Link>
-                                <div
-                                    v-if="isCurrentRoute(item.href)"
-                                    class="absolute bottom-0 left-0 h-0.5 w-full translate-y-px bg-black dark:bg-white"
-                                ></div>
-                            </NavigationMenuItem>
-                        </NavigationMenuList>
-                    </NavigationMenu>
+                    <v-toolbar-items class="ml-10 flex h-full items-stretch">
+                        <v-btn
+                            v-for="(item, index) in mainNavItems"
+                            :key="index"
+                            :href="item.href"
+                            class="relative flex h-full items-center"
+                            :class="[activeItemStyles(item.href), 'h-9 cursor-pointer px-3']"
+                        >
+                            <v-icon v-if="item.icon">{{ item.icon }}</v-icon>
+                            {{ item.title }}
+                        </v-btn>
+                    </v-toolbar-items>
                 </div>
 
                 <div class="ml-auto flex items-center space-x-2">
                     <div class="relative flex items-center space-x-1">
-                        <Button variant="ghost" size="icon" class="group h-9 w-9 cursor-pointer">
-                            <Search class="size-5 opacity-80 group-hover:opacity-100" />
-                        </Button>
+                        <v-btn icon>
+                            <v-icon>mdi-magnify</v-icon>
+                        </v-btn>
 
                         <div class="hidden space-x-1 lg:flex">
-                            <template v-for="item in rightNavItems" :key="item.title">
-                                <TooltipProvider :delay-duration="0">
-                                    <Tooltip>
-                                        <TooltipTrigger>
-                                            <Button variant="ghost" size="icon" as-child class="group h-9 w-9 cursor-pointer">
-                                                <a :href="item.href" target="_blank" rel="noopener noreferrer">
-                                                    <span class="sr-only">{{ item.title }}</span>
-                                                    <component :is="item.icon" class="size-5 opacity-80 group-hover:opacity-100" />
-                                                </a>
-                                            </Button>
-                                        </TooltipTrigger>
-                                        <TooltipContent>
-                                            <p>{{ item.title }}</p>
-                                        </TooltipContent>
-                                    </Tooltip>
-                                </TooltipProvider>
-                            </template>
+                            <v-tooltip v-for="item in rightNavItems" :key="item.title">
+                                <template v-slot:activator="{ on, attrs }">
+                                    <v-btn icon v-bind="attrs" v-on="on" :href="item.href" target="_blank" rel="noopener noreferrer">
+                                        <v-icon>{{ item.icon }}</v-icon>
+                                    </v-btn>
+                                </template>
+                                <span>{{ item.title }}</span>
+                            </v-tooltip>
                         </div>
                     </div>
 
-                    <DropdownMenu>
-                        <DropdownMenuTrigger :as-child="true">
-                            <Button
-                                variant="ghost"
-                                size="icon"
-                                class="relative size-10 w-auto rounded-full p-1 focus-within:ring-2 focus-within:ring-primary"
-                            >
-                                <Avatar class="size-8 overflow-hidden rounded-full">
-                                    <AvatarImage v-if="auth.user.avatar" :src="auth.user.avatar" :alt="auth.user.name" />
-                                    <AvatarFallback class="rounded-lg bg-neutral-200 font-semibold text-black dark:bg-neutral-700 dark:text-white">
-                                        {{ getInitials(auth.user?.name) }}
-                                    </AvatarFallback>
-                                </Avatar>
-                            </Button>
-                        </DropdownMenuTrigger>
-                        <DropdownMenuContent align="end" class="w-56">
+                    <v-menu>
+                        <template v-slot:activator="{ on, attrs }">
+                            <v-btn icon v-bind="attrs" v-on="on">
+                                <v-avatar>
+                                    <v-img v-if="auth.user.avatar" :src="auth.user.avatar" :alt="auth.user.name" />
+                                    <span v-else>{{ getInitials(auth.user?.name) }}</span>
+                                </v-avatar>
+                            </v-btn>
+                        </template>
+                        <v-list>
                             <UserMenuContent :user="auth.user" />
-                        </DropdownMenuContent>
-                    </DropdownMenu>
+                        </v-list>
+                    </v-menu>
                 </div>
-            </div>
-        </div>
+            </v-toolbar>
+        </v-app-bar>
 
         <div v-if="props.breadcrumbs.length > 1" class="flex w-full border-b border-sidebar-border/70">
             <div class="mx-auto flex h-12 w-full items-center justify-start px-4 text-neutral-500 md:max-w-7xl">
diff --git a/resources/js/components/AppLogo.vue b/resources/js/components/AppLogo.vue
index 3ee328b2..69accd55 100644
--- a/resources/js/components/AppLogo.vue
+++ b/resources/js/components/AppLogo.vue
@@ -3,9 +3,9 @@ import AppLogoIcon from '@/components/AppLogoIcon.vue';
 </script>
 
 <template>
-    <div class="flex aspect-square size-8 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground">
-        <AppLogoIcon class="size-5 fill-current text-white dark:text-black" />
-    </div>
+    <VAvatar class="size-8">
+        <VImg src="path/to/logo.png" alt="App Logo" />
+    </VAvatar>
     <div class="ml-1 grid flex-1 text-left text-sm">
         <span class="mb-0.5 truncate font-semibold leading-none">Laravel Starter Kit</span>
     </div>
diff --git a/resources/js/components/AppLogoIcon.vue b/resources/js/components/AppLogoIcon.vue
index 6412a449..ba142e5e 100644
--- a/resources/js/components/AppLogoIcon.vue
+++ b/resources/js/components/AppLogoIcon.vue
@@ -13,12 +13,14 @@ defineProps<Props>();
 </script>
 
 <template>
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 42" :class="className" v-bind="$attrs">
-        <path
-            fill="currentColor"
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M17.2 5.633 8.6.855 0 5.633v26.51l16.2 9 16.2-9v-8.442l7.6-4.223V9.856l-8.6-4.777-8.6 4.777V18.3l-5.6 3.111V5.633ZM38 18.301l-5.6 3.11v-6.157l5.6-3.11V18.3Zm-1.06-7.856-5.54 3.078-5.54-3.079 5.54-3.078 5.54 3.079ZM24.8 18.3v-6.157l5.6 3.111v6.158L24.8 18.3Zm-1 1.732 5.54 3.078-13.14 7.302-5.54-3.078 13.14-7.3v-.002Zm-16.2 7.89 7.6 4.222V38.3L2 30.966V7.92l5.6 3.111v16.892ZM8.6 9.3 3.06 6.222 8.6 3.143l5.54 3.08L8.6 9.3Zm21.8 15.51-13.2 7.334V38.3l13.2-7.334v-6.156ZM9.6 11.034l5.6-3.11v14.6l-5.6 3.11v-14.6Z"
-        />
-    </svg>
+    <VIcon :class="className" v-bind="$attrs">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 42">
+            <path
+                fill="currentColor"
+                fill-rule="evenodd"
+                clip-rule="evenodd"
+                d="M17.2 5.633 8.6.855 0 5.633v26.51l16.2 9 16.2-9v-8.442l7.6-4.223V9.856l-8.6-4.777-8.6 4.777V18.3l-5.6 3.111V5.633ZM38 18.301l-5.6 3.11v-6.157l5.6-3.11V18.3Zm-1.06-7.856-5.54 3.078-5.54-3.079 5.54-3.078 5.54 3.079ZM24.8 18.3v-6.157l5.6 3.111v6.158L24.8 18.3Zm-1 1.732 5.54 3.078-13.14 7.302-5.54-3.078 13.14-7.3v-.002Zm-16.2 7.89 7.6 4.222V38.3L2 30.966V7.92l5.6 3.111v16.892ZM8.6 9.3 3.06 6.222 8.6 3.143l5.54 3.08L8.6 9.3Zm21.8 15.51-13.2 7.334V38.3l13.2-7.334v-6.156ZM9.6 11.034l5.6-3.11v14.6l-5.6 3.11v-14.6Z"
+            />
+        </svg>
+    </VIcon>
 </template>
diff --git a/resources/js/components/AppShell.vue b/resources/js/components/AppShell.vue
index 5c532032..d520730a 100644
--- a/resources/js/components/AppShell.vue
+++ b/resources/js/components/AppShell.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { SidebarProvider } from '@/components/ui/sidebar';
 import { onMounted, ref } from 'vue';
 
 interface Props {
@@ -21,10 +20,10 @@ const handleSidebarChange = (open: boolean) => {
 </script>
 
 <template>
-    <div v-if="variant === 'header'" class="flex min-h-screen w-full flex-col">
+    <VApp v-if="variant === 'header'" class="flex min-h-screen w-full flex-col">
         <slot />
-    </div>
-    <SidebarProvider v-else :default-open="isOpen" :open="isOpen" @update:open="handleSidebarChange">
+    </VApp>
+    <v-navigation-drawer v-else v-model="isOpen" @update:model="handleSidebarChange">
         <slot />
-    </SidebarProvider>
+    </v-navigation-drawer>
 </template>
diff --git a/resources/js/components/AppSidebar.vue b/resources/js/components/AppSidebar.vue
index 3ac41042..ea238426 100644
--- a/resources/js/components/AppSidebar.vue
+++ b/resources/js/components/AppSidebar.vue
@@ -2,7 +2,6 @@
 import NavFooter from '@/components/NavFooter.vue';
 import NavMain from '@/components/NavMain.vue';
 import NavUser from '@/components/NavUser.vue';
-import { Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from '@/components/ui/sidebar';
 import { type NavItem } from '@/types';
 import { Link } from '@inertiajs/vue3';
 import { BookOpen, Folder, LayoutGrid } from 'lucide-vue-next';
@@ -31,27 +30,25 @@ const footerNavItems: NavItem[] = [
 </script>
 
 <template>
-    <Sidebar collapsible="icon" variant="inset">
-        <SidebarHeader>
-            <SidebarMenu>
-                <SidebarMenuItem>
-                    <SidebarMenuButton size="lg" as-child>
-                        <Link :href="route('dashboard')">
-                            <AppLogo />
-                        </Link>
-                    </SidebarMenuButton>
-                </SidebarMenuItem>
-            </SidebarMenu>
-        </SidebarHeader>
+    <VNavigationDrawer app>
+        <VList>
+            <VListItem>
+                <VListItemIcon>
+                    <Link :href="route('dashboard')">
+                        <AppLogo />
+                    </Link>
+                </VListItemIcon>
+            </VListItem>
+        </VList>
 
-        <SidebarContent>
+        <VList>
             <NavMain :items="mainNavItems" />
-        </SidebarContent>
+        </VList>
 
-        <SidebarFooter>
+        <VList>
             <NavFooter :items="footerNavItems" />
             <NavUser />
-        </SidebarFooter>
-    </Sidebar>
+        </VList>
+    </VNavigationDrawer>
     <slot />
 </template>
diff --git a/resources/js/components/AppSidebarHeader.vue b/resources/js/components/AppSidebarHeader.vue
index 1ff2baa7..0b21d05d 100644
--- a/resources/js/components/AppSidebarHeader.vue
+++ b/resources/js/components/AppSidebarHeader.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import Breadcrumbs from '@/components/Breadcrumbs.vue';
-import { SidebarTrigger } from '@/components/ui/sidebar';
 import type { BreadcrumbItemType } from '@/types';
 
 defineProps<{
@@ -9,14 +7,18 @@ defineProps<{
 </script>
 
 <template>
-    <header
-        class="flex h-16 shrink-0 items-center gap-2 border-b border-sidebar-border/70 px-6 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12 md:px-4"
-    >
+    <v-toolbar class="flex h-16 shrink-0 items-center gap-2 border-b border-sidebar-border/70 px-6 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12 md:px-4">
         <div class="flex items-center gap-2">
-            <SidebarTrigger class="-ml-1" />
+            <v-btn icon>
+                <v-icon>mdi-menu</v-icon>
+            </v-btn>
             <template v-if="breadcrumbs.length > 0">
-                <Breadcrumbs :breadcrumbs="breadcrumbs" />
+                <v-breadcrumbs>
+                    <v-breadcrumbs-item v-for="(breadcrumb, index) in breadcrumbs" :key="index" :to="breadcrumb.href">
+                        {{ breadcrumb.title }}
+                    </v-breadcrumbs-item>
+                </v-breadcrumbs>
             </template>
         </div>
-    </header>
+    </v-toolbar>
 </template>
diff --git a/resources/js/components/AppearanceTabs.vue b/resources/js/components/AppearanceTabs.vue
index f795dd32..8c759cf1 100644
--- a/resources/js/components/AppearanceTabs.vue
+++ b/resources/js/components/AppearanceTabs.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { useAppearance } from '@/composables/useAppearance';
 import { Monitor, Moon, Sun } from 'lucide-vue-next';
+import { ref } from 'vue';
 
 interface Props {
     class?: string;
@@ -15,23 +16,15 @@ const tabs = [
     { value: 'dark', Icon: Moon, label: 'Dark' },
     { value: 'system', Icon: Monitor, label: 'System' },
 ] as const;
+
+const activeTab = ref(appearance);
 </script>
 
 <template>
-    <div :class="['inline-flex gap-1 rounded-lg bg-neutral-100 p-1 dark:bg-neutral-800', containerClass]">
-        <button
-            v-for="{ value, Icon, label } in tabs"
-            :key="value"
-            @click="updateAppearance(value)"
-            :class="[
-                'flex items-center rounded-md px-3.5 py-1.5 transition-colors',
-                appearance === value
-                    ? 'bg-white shadow-sm dark:bg-neutral-700 dark:text-neutral-100'
-                    : 'text-neutral-500 hover:bg-neutral-200/60 hover:text-black dark:text-neutral-400 dark:hover:bg-neutral-700/60',
-            ]"
-        >
-            <component :is="Icon" class="-ml-1 h-4 w-4" />
+    <v-tabs v-model="activeTab" background-color="neutral-100" dark-background-color="neutral-800" class="rounded-lg p-1" :class="containerClass">
+        <v-tab v-for="{ value, Icon, label } in tabs" :key="value" @click="updateAppearance(value)">
+            <v-icon :icon="Icon" class="-ml-1 h-4 w-4" />
             <span class="ml-1.5 text-sm">{{ label }}</span>
-        </button>
-    </div>
+        </v-tab>
+    </v-tabs>
 </template>
diff --git a/resources/js/components/Breadcrumbs.vue b/resources/js/components/Breadcrumbs.vue
index 92fe6ced..3ef7cc01 100644
--- a/resources/js/components/Breadcrumbs.vue
+++ b/resources/js/components/Breadcrumbs.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from '@/components/ui/breadcrumb';
 import { Link } from '@inertiajs/vue3';
 
 interface BreadcrumbItem {
@@ -13,21 +12,16 @@ defineProps<{
 </script>
 
 <template>
-    <Breadcrumb>
-        <BreadcrumbList>
-            <template v-for="(item, index) in breadcrumbs" :key="index">
-                <BreadcrumbItem>
-                    <template v-if="index === breadcrumbs.length - 1">
-                        <BreadcrumbPage>{{ item.title }}</BreadcrumbPage>
-                    </template>
-                    <template v-else>
-                        <BreadcrumbLink as-child>
-                            <Link :href="item.href ?? '#'">{{ item.title }}</Link>
-                        </BreadcrumbLink>
-                    </template>
-                </BreadcrumbItem>
-                <BreadcrumbSeparator v-if="index !== breadcrumbs.length - 1" />
-            </template>
-        </BreadcrumbList>
-    </Breadcrumb>
+    <v-breadcrumbs>
+        <template v-for="(item, index) in breadcrumbs" :key="index">
+            <v-breadcrumbs-item :to="item.href" :exact="index === breadcrumbs.length - 1">
+                <template v-if="index === breadcrumbs.length - 1">
+                    {{ item.title }}
+                </template>
+                <template v-else>
+                    <Link :href="item.href ?? '#'">{{ item.title }}</Link>
+                </template>
+            </v-breadcrumbs-item>
+        </template>
+    </v-breadcrumbs>
 </template>
diff --git a/resources/js/components/DeleteUser.vue b/resources/js/components/DeleteUser.vue
index 550610cb..c29a08a1 100644
--- a/resources/js/components/DeleteUser.vue
+++ b/resources/js/components/DeleteUser.vue
@@ -5,19 +5,6 @@ import { ref } from 'vue';
 // Components
 import HeadingSmall from '@/components/HeadingSmall.vue';
 import InputError from '@/components/InputError.vue';
-import { Button } from '@/components/ui/button';
-import {
-    Dialog,
-    DialogClose,
-    DialogContent,
-    DialogDescription,
-    DialogFooter,
-    DialogHeader,
-    DialogTitle,
-    DialogTrigger,
-} from '@/components/ui/dialog';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
 
 const passwordInput = ref<HTMLInputElement | null>(null);
 
@@ -50,38 +37,29 @@ const closeModal = () => {
                 <p class="font-medium">Warning</p>
                 <p class="text-sm">Please proceed with caution, this cannot be undone.</p>
             </div>
-            <Dialog>
-                <DialogTrigger as-child>
-                    <Button variant="destructive">Delete account</Button>
-                </DialogTrigger>
-                <DialogContent>
+            <VDialog v-model="dialog" max-width="500px">
+                <template v-slot:activator="{ on, attrs }">
+                    <VBtn color="red" dark v-bind="attrs" v-on="on">Delete account</VBtn>
+                </template>
+                <VDialogTitle>Are you sure you want to delete your account?</VDialogTitle>
+                <VDialogContent>
                     <form class="space-y-6" @submit="deleteUser">
-                        <DialogHeader class="space-y-3">
-                            <DialogTitle>Are you sure you want to delete your account?</DialogTitle>
-                            <DialogDescription>
-                                Once your account is deleted, all of its resources and data will also be permanently deleted. Please enter your
-                                password to confirm you would like to permanently delete your account.
-                            </DialogDescription>
-                        </DialogHeader>
+                        <div class="space-y-3">
+                            <p>Once your account is deleted, all of its resources and data will also be permanently deleted. Please enter your password to confirm you would like to permanently delete your account.</p>
+                        </div>
 
                         <div class="grid gap-2">
-                            <Label for="password" class="sr-only">Password</Label>
-                            <Input id="password" type="password" name="password" ref="passwordInput" v-model="form.password" placeholder="Password" />
+                            <VTextField id="password" type="password" name="password" ref="passwordInput" v-model="form.password" label="Password" />
                             <InputError :message="form.errors.password" />
                         </div>
 
-                        <DialogFooter class="gap-2">
-                            <DialogClose as-child>
-                                <Button variant="secondary" @click="closeModal"> Cancel </Button>
-                            </DialogClose>
-
-                            <Button variant="destructive" :disabled="form.processing">
-                                <button type="submit">Delete account</button>
-                            </Button>
-                        </DialogFooter>
+                        <VDialogActions class="gap-2">
+                            <VBtn color="secondary" @click="closeModal">Cancel</VBtn>
+                            <VBtn color="red" dark :disabled="form.processing" type="submit">Delete account</VBtn>
+                        </VDialogActions>
                     </form>
-                </DialogContent>
-            </Dialog>
+                </VDialogContent>
+            </VDialog>
         </div>
     </div>
 </template>
diff --git a/resources/js/components/ui/avatar/Avatar.vue b/resources/js/components/ui/avatar/Avatar.vue
index b2fd9660..59c71cec 100644
--- a/resources/js/components/ui/avatar/Avatar.vue
+++ b/resources/js/components/ui/avatar/Avatar.vue
@@ -1,24 +1,21 @@
 <script setup lang="ts">
-import { cn } from '@/lib/utils';
-import { AvatarRoot } from 'radix-vue';
 import type { HTMLAttributes } from 'vue';
-import { avatarVariant, type AvatarVariants } from '.';
 
 const props = withDefaults(
     defineProps<{
         class?: HTMLAttributes['class'];
-        size?: AvatarVariants['size'];
-        shape?: AvatarVariants['shape'];
+        size?: 'small' | 'large';
+        shape?: 'circle' | 'square';
     }>(),
     {
-        size: 'sm',
+        size: 'small',
         shape: 'circle',
     },
 );
 </script>
 
 <template>
-    <AvatarRoot :class="cn(avatarVariant({ size, shape }), props.class)">
+    <VAvatar :class="props.class" :size="props.size" :rounded="props.shape === 'circle'">
         <slot />
-    </AvatarRoot>
+    </VAvatar>
 </template>
diff --git a/resources/js/components/ui/avatar/AvatarFallback.vue b/resources/js/components/ui/avatar/AvatarFallback.vue
deleted file mode 100644
index 02d65e18..00000000
--- a/resources/js/components/ui/avatar/AvatarFallback.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<script setup lang="ts">
-import { AvatarFallback, type AvatarFallbackProps } from 'radix-vue';
-
-const props = defineProps<AvatarFallbackProps>();
-</script>
-
-<template>
-    <AvatarFallback v-bind="props">
-        <slot />
-    </AvatarFallback>
-</template>
diff --git a/resources/js/components/ui/avatar/AvatarImage.vue b/resources/js/components/ui/avatar/AvatarImage.vue
index e2c75ed6..e855429d 100644
--- a/resources/js/components/ui/avatar/AvatarImage.vue
+++ b/resources/js/components/ui/avatar/AvatarImage.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
-import { AvatarImage, type AvatarImageProps } from 'radix-vue';
-
-const props = defineProps<AvatarImageProps>();
+const props = defineProps<{
+    src: string;
+    alt?: string;
+}>();
 </script>
 
 <template>
-    <AvatarImage v-bind="props" class="h-full w-full object-cover" />
+    <VImg :src="props.src" :alt="props.alt" class="h-full w-full object-cover" />
 </template>
diff --git a/resources/js/components/ui/avatar/index.ts b/resources/js/components/ui/avatar/index.ts
deleted file mode 100644
index b11cf34e..00000000
--- a/resources/js/components/ui/avatar/index.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { cva, type VariantProps } from 'class-variance-authority';
-
-export { default as Avatar } from './Avatar.vue';
-export { default as AvatarFallback } from './AvatarFallback.vue';
-export { default as AvatarImage } from './AvatarImage.vue';
-
-export const avatarVariant = cva(
-    'inline-flex items-center justify-center font-normal text-foreground select-none shrink-0 bg-secondary overflow-hidden',
-    {
-        variants: {
-            size: {
-                sm: 'h-10 w-10 text-xs',
-                base: 'h-16 w-16 text-2xl',
-                lg: 'h-32 w-32 text-5xl',
-            },
-            shape: {
-                circle: 'rounded-full',
-                square: 'rounded-md',
-            },
-        },
-    },
-);
-
-export type AvatarVariants = VariantProps<typeof avatarVariant>;
diff --git a/resources/js/components/ui/breadcrumb/Breadcrumb.vue b/resources/js/components/ui/breadcrumb/Breadcrumb.vue
deleted file mode 100644
index 55d0c943..00000000
--- a/resources/js/components/ui/breadcrumb/Breadcrumb.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<script lang="ts" setup>
-import type { HTMLAttributes } from 'vue';
-
-const props = defineProps<{
-    class?: HTMLAttributes['class'];
-}>();
-</script>
-
-<template>
-    <nav aria-label="breadcrumb" :class="props.class">
-        <slot />
-    </nav>
-</template>
diff --git a/resources/js/components/ui/breadcrumb/BreadcrumbEllipsis.vue b/resources/js/components/ui/breadcrumb/BreadcrumbEllipsis.vue
deleted file mode 100644
index 77815cb5..00000000
--- a/resources/js/components/ui/breadcrumb/BreadcrumbEllipsis.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<script lang="ts" setup>
-import { cn } from '@/lib/utils';
-import { MoreHorizontal } from 'lucide-vue-next';
-import type { HTMLAttributes } from 'vue';
-
-const props = defineProps<{
-    class?: HTMLAttributes['class'];
-}>();
-</script>
-
-<template>
-    <span role="presentation" aria-hidden="true" :class="cn('flex h-9 w-9 items-center justify-center', props.class)">
-        <slot>
-            <MoreHorizontal class="h-4 w-4" />
-        </slot>
-        <span class="sr-only">More</span>
-    </span>
-</template>
diff --git a/resources/js/components/ui/breadcrumb/BreadcrumbItem.vue b/resources/js/components/ui/breadcrumb/BreadcrumbItem.vue
deleted file mode 100644
index 76b9149b..00000000
--- a/resources/js/components/ui/breadcrumb/BreadcrumbItem.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<script lang="ts" setup>
-import { cn } from '@/lib/utils';
-import type { HTMLAttributes } from 'vue';
-
-const props = defineProps<{
-    class?: HTMLAttributes['class'];
-}>();
-</script>
-
-<template>
-    <li :class="cn('inline-flex items-center gap-1.5', props.class)">
-        <slot />
-    </li>
-</template>
diff --git a/resources/js/components/ui/breadcrumb/BreadcrumbLink.vue b/resources/js/components/ui/breadcrumb/BreadcrumbLink.vue
index 2612d6d7..d151923a 100644
--- a/resources/js/components/ui/breadcrumb/BreadcrumbLink.vue
+++ b/resources/js/components/ui/breadcrumb/BreadcrumbLink.vue
@@ -1,15 +1,14 @@
 <script lang="ts" setup>
 import { cn } from '@/lib/utils';
-import { Primitive, type PrimitiveProps } from 'radix-vue';
 import type { HTMLAttributes } from 'vue';
 
-const props = withDefaults(defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>(), {
+const props = withDefaults(defineProps<{ class?: HTMLAttributes['class'] }>(), {
     as: 'a',
 });
 </script>
 
 <template>
-    <Primitive :as="as" :as-child="asChild" :class="cn('transition-colors hover:text-foreground', props.class)">
+    <VBtn :class="cn('transition-colors hover:text-foreground', props.class)">
         <slot />
-    </Primitive>
+    </VBtn>
 </template>
diff --git a/resources/js/components/ui/breadcrumb/BreadcrumbList.vue b/resources/js/components/ui/breadcrumb/BreadcrumbList.vue
deleted file mode 100644
index 2e6456eb..00000000
--- a/resources/js/components/ui/breadcrumb/BreadcrumbList.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<script lang="ts" setup>
-import { cn } from '@/lib/utils';
-import type { HTMLAttributes } from 'vue';
-
-const props = defineProps<{
-    class?: HTMLAttributes['class'];
-}>();
-</script>
-
-<template>
-    <ol :class="cn('flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5', props.class)">
-        <slot />
-    </ol>
-</template>
diff --git a/resources/js/components/ui/breadcrumb/BreadcrumbPage.vue b/resources/js/components/ui/breadcrumb/BreadcrumbPage.vue
deleted file mode 100644
index e67ebe8f..00000000
--- a/resources/js/components/ui/breadcrumb/BreadcrumbPage.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<script lang="ts" setup>
-import { cn } from '@/lib/utils';
-import type { HTMLAttributes } from 'vue';
-
-const props = defineProps<{
-    class?: HTMLAttributes['class'];
-}>();
-</script>
-
-<template>
-    <span role="link" aria-disabled="true" aria-current="page" :class="cn('font-normal text-foreground', props.class)">
-        <slot />
-    </span>
-</template>
diff --git a/resources/js/components/ui/breadcrumb/BreadcrumbSeparator.vue b/resources/js/components/ui/breadcrumb/BreadcrumbSeparator.vue
deleted file mode 100644
index d294b924..00000000
--- a/resources/js/components/ui/breadcrumb/BreadcrumbSeparator.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<script lang="ts" setup>
-import { cn } from '@/lib/utils';
-import { ChevronRight } from 'lucide-vue-next';
-import type { HTMLAttributes } from 'vue';
-
-const props = defineProps<{
-    class?: HTMLAttributes['class'];
-}>();
-</script>
-
-<template>
-    <li role="presentation" aria-hidden="true" :class="cn('[&>svg]:h-3.5 [&>svg]:w-3.5', props.class)">
-        <slot>
-            <ChevronRight />
-        </slot>
-    </li>
-</template>
diff --git a/resources/js/components/ui/breadcrumb/index.ts b/resources/js/components/ui/breadcrumb/index.ts
deleted file mode 100644
index d650f7e4..00000000
--- a/resources/js/components/ui/breadcrumb/index.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export { default as Breadcrumb } from './Breadcrumb.vue';
-export { default as BreadcrumbEllipsis } from './BreadcrumbEllipsis.vue';
-export { default as BreadcrumbItem } from './BreadcrumbItem.vue';
-export { default as BreadcrumbLink } from './BreadcrumbLink.vue';
-export { default as BreadcrumbList } from './BreadcrumbList.vue';
-export { default as BreadcrumbPage } from './BreadcrumbPage.vue';
-export { default as BreadcrumbSeparator } from './BreadcrumbSeparator.vue';
diff --git a/resources/js/components/ui/button/Button.vue b/resources/js/components/ui/button/Button.vue
index f42adfd5..7ffa139f 100644
--- a/resources/js/components/ui/button/Button.vue
+++ b/resources/js/components/ui/button/Button.vue
@@ -1,10 +1,9 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils';
-import { Primitive, type PrimitiveProps } from 'radix-vue';
 import type { HTMLAttributes } from 'vue';
 import { buttonVariants, type ButtonVariants } from '.';
 
-interface Props extends PrimitiveProps {
+interface Props {
     variant?: ButtonVariants['variant'];
     size?: ButtonVariants['size'];
     class?: HTMLAttributes['class'];
@@ -16,7 +15,7 @@ const props = withDefaults(defineProps<Props>(), {
 </script>
 
 <template>
-    <Primitive :as="as" :as-child="asChild" :class="cn(buttonVariants({ variant, size }), props.class)">
+    <VBtn :class="cn(buttonVariants({ variant, size }), props.class)">
         <slot />
-    </Primitive>
+    </VBtn>
 </template>
diff --git a/resources/js/components/ui/button/index.ts b/resources/js/components/ui/button/index.ts
deleted file mode 100644
index 1fa3735f..00000000
--- a/resources/js/components/ui/button/index.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import { cva, type VariantProps } from 'class-variance-authority';
-
-export { default as Button } from './Button.vue';
-
-export const buttonVariants = cva(
-    '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: {
-                default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
-                destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
-                outline: 'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
-                secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
-                ghost: 'hover:bg-accent hover:text-accent-foreground',
-                link: 'text-primary underline-offset-4 hover:underline',
-            },
-            size: {
-                default: 'h-9 px-4 py-2',
-                sm: 'h-8 rounded-md px-3 text-xs',
-                lg: 'h-10 rounded-md px-8',
-                icon: 'h-9 w-9',
-            },
-        },
-        defaultVariants: {
-            variant: 'default',
-            size: 'default',
-        },
-    },
-);
-
-export type ButtonVariants = VariantProps<typeof buttonVariants>;
diff --git a/resources/js/components/ui/card/Card.vue b/resources/js/components/ui/card/Card.vue
deleted file mode 100644
index d0581cdd..00000000
--- a/resources/js/components/ui/card/Card.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@/lib/utils';
-import type { HTMLAttributes } from 'vue';
-
-const props = defineProps<{
-    class?: HTMLAttributes['class'];
-}>();
-</script>
-
-<template>
-    <div :class="cn('rounded-lg border bg-card text-card-foreground shadow-sm', props.class)">
-        <slot />
-    </div>
-</template>
diff --git a/resources/js/components/ui/card/CardContent.vue b/resources/js/components/ui/card/CardContent.vue
deleted file mode 100644
index a1d59f87..00000000
--- a/resources/js/components/ui/card/CardContent.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@/lib/utils';
-import type { HTMLAttributes } from 'vue';
-
-const props = defineProps<{
-    class?: HTMLAttributes['class'];
-}>();
-</script>
-
-<template>
-    <div :class="cn('p-6 pt-0', props.class)">
-        <slot />
-    </div>
-</template>
diff --git a/resources/js/components/ui/card/CardDescription.vue b/resources/js/components/ui/card/CardDescription.vue
deleted file mode 100644
index 91b21793..00000000
--- a/resources/js/components/ui/card/CardDescription.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@/lib/utils';
-import type { HTMLAttributes } from 'vue';
-
-const props = defineProps<{
-    class?: HTMLAttributes['class'];
-}>();
-</script>
-
-<template>
-    <p :class="cn('text-sm text-muted-foreground', props.class)">
-        <slot />
-    </p>
-</template>
diff --git a/resources/js/components/ui/card/CardFooter.vue b/resources/js/components/ui/card/CardFooter.vue
deleted file mode 100644
index 2f055c52..00000000
--- a/resources/js/components/ui/card/CardFooter.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@/lib/utils';
-import type { HTMLAttributes } from 'vue';
-
-const props = defineProps<{
-    class?: HTMLAttributes['class'];
-}>();
-</script>
-
-<template>
-    <div :class="cn('flex items-center p-6 pt-0', props.class)">
-        <slot />
-    </div>
-</template>
diff --git a/resources/js/components/ui/card/CardHeader.vue b/resources/js/components/ui/card/CardHeader.vue
deleted file mode 100644
index c557b0f2..00000000
--- a/resources/js/components/ui/card/CardHeader.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@/lib/utils';
-import type { HTMLAttributes } from 'vue';
-
-const props = defineProps<{
-    class?: HTMLAttributes['class'];
-}>();
-</script>
-
-<template>
-    <div :class="cn('flex flex-col gap-y-1.5 p-6', props.class)">
-        <slot />
-    </div>
-</template>
diff --git a/resources/js/components/ui/card/CardTitle.vue b/resources/js/components/ui/card/CardTitle.vue
deleted file mode 100644
index 176d69cb..00000000
--- a/resources/js/components/ui/card/CardTitle.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@/lib/utils';
-import type { HTMLAttributes } from 'vue';
-
-const props = defineProps<{
-    class?: HTMLAttributes['class'];
-}>();
-</script>
-
-<template>
-    <h3 :class="cn('text-2xl font-semibold leading-none tracking-tight', props.class)">
-        <slot />
-    </h3>
-</template>
diff --git a/resources/js/components/ui/card/index.ts b/resources/js/components/ui/card/index.ts
deleted file mode 100644
index d652969f..00000000
--- a/resources/js/components/ui/card/index.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export { default as Card } from './Card.vue';
-export { default as CardContent } from './CardContent.vue';
-export { default as CardDescription } from './CardDescription.vue';
-export { default as CardFooter } from './CardFooter.vue';
-export { default as CardHeader } from './CardHeader.vue';
-export { default as CardTitle } from './CardTitle.vue';
diff --git a/resources/js/components/ui/checkbox/Checkbox.vue b/resources/js/components/ui/checkbox/Checkbox.vue
index 74d4c86d..2df999a6 100644
--- a/resources/js/components/ui/checkbox/Checkbox.vue
+++ b/resources/js/components/ui/checkbox/Checkbox.vue
@@ -1,33 +1,24 @@
 <script setup lang="ts">
-import type { CheckboxRootEmits, CheckboxRootProps } from 'radix-vue'
-import { cn } from '@/lib/utils'
-import { Check } from 'lucide-vue-next'
-import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'radix-vue'
-import { computed, type HTMLAttributes } from 'vue'
+import { Check } from 'lucide-vue-next';
+import { computed, type HTMLAttributes } from 'vue';
 
-const props = defineProps<CheckboxRootProps & { class?: HTMLAttributes['class'] }>()
-const emits = defineEmits<CheckboxRootEmits>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const props = defineProps<{
+    class?: HTMLAttributes['class'];
+}>();
 </script>
 
 <template>
-  <CheckboxRoot
-    v-bind="forwarded"
-    :class="
-      cn('peer size-5 shrink-0 rounded-sm border border-input ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-accent-foreground',
-         props.class)"
-  >
-    <CheckboxIndicator class="flex h-full w-full items-center justify-center text-current">
-      <slot>
-        <Check class="size-3.5 stroke-[3]" />
-      </slot>
-    </CheckboxIndicator>
-  </CheckboxRoot>
+    <VCheckbox
+        v-bind="props"
+        :class="[
+            'peer size-5 shrink-0 rounded-sm border border-input ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-accent-foreground',
+            props.class,
+        ]"
+    >
+        <template #default="{ isChecked }">
+            <VIcon v-if="isChecked" class="flex h-full w-full items-center justify-center text-current">
+                <Check class="size-3.5 stroke-[3]" />
+            </VIcon>
+        </template>
+    </VCheckbox>
 </template>
diff --git a/resources/js/components/ui/checkbox/index.ts b/resources/js/components/ui/checkbox/index.ts
deleted file mode 100644
index 8c28c286..00000000
--- a/resources/js/components/ui/checkbox/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as Checkbox } from './Checkbox.vue'
diff --git a/resources/js/components/ui/collapsible/Collapsible.vue b/resources/js/components/ui/collapsible/Collapsible.vue
deleted file mode 100644
index a2dba269..00000000
--- a/resources/js/components/ui/collapsible/Collapsible.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<script setup lang="ts">
-import type { CollapsibleRootEmits, CollapsibleRootProps } from 'radix-vue';
-import { CollapsibleRoot, useForwardPropsEmits } from 'radix-vue';
-
-const props = defineProps<CollapsibleRootProps>();
-const emits = defineEmits<CollapsibleRootEmits>();
-
-const forwarded = useForwardPropsEmits(props, emits);
-</script>
-
-<template>
-    <CollapsibleRoot v-slot="{ open }" v-bind="forwarded">
-        <slot :open="open" />
-    </CollapsibleRoot>
-</template>
diff --git a/resources/js/components/ui/collapsible/CollapsibleContent.vue b/resources/js/components/ui/collapsible/CollapsibleContent.vue
deleted file mode 100644
index 738d494e..00000000
--- a/resources/js/components/ui/collapsible/CollapsibleContent.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<script setup lang="ts">
-import { CollapsibleContent, type CollapsibleContentProps } from 'radix-vue';
-
-const props = defineProps<CollapsibleContentProps>();
-</script>
-
-<template>
-    <CollapsibleContent
-        v-bind="props"
-        class="data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down overflow-hidden transition-all"
-    >
-        <slot />
-    </CollapsibleContent>
-</template>
diff --git a/resources/js/components/ui/collapsible/CollapsibleTrigger.vue b/resources/js/components/ui/collapsible/CollapsibleTrigger.vue
deleted file mode 100644
index 83cb10e5..00000000
--- a/resources/js/components/ui/collapsible/CollapsibleTrigger.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<script setup lang="ts">
-import { CollapsibleTrigger, type CollapsibleTriggerProps } from 'radix-vue';
-
-const props = defineProps<CollapsibleTriggerProps>();
-</script>
-
-<template>
-    <CollapsibleTrigger v-bind="props">
-        <slot />
-    </CollapsibleTrigger>
-</template>
diff --git a/resources/js/components/ui/collapsible/index.ts b/resources/js/components/ui/collapsible/index.ts
deleted file mode 100644
index 56b5a955..00000000
--- a/resources/js/components/ui/collapsible/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export { default as Collapsible } from './Collapsible.vue';
-export { default as CollapsibleContent } from './CollapsibleContent.vue';
-export { default as CollapsibleTrigger } from './CollapsibleTrigger.vue';
diff --git a/resources/js/components/ui/dialog/Dialog.vue b/resources/js/components/ui/dialog/Dialog.vue
index 490fff1a..ff6b6be8 100644
--- a/resources/js/components/ui/dialog/Dialog.vue
+++ b/resources/js/components/ui/dialog/Dialog.vue
@@ -1,14 +1,9 @@
 <script setup lang="ts">
-import { DialogRoot, useForwardPropsEmits, type DialogRootEmits, type DialogRootProps } from 'radix-vue';
-
-const props = defineProps<DialogRootProps>();
-const emits = defineEmits<DialogRootEmits>();
-
-const forwarded = useForwardPropsEmits(props, emits);
+const props = defineProps();
 </script>
 
 <template>
-    <DialogRoot v-bind="forwarded">
+    <VDialog v-bind="props">
         <slot />
-    </DialogRoot>
+    </VDialog>
 </template>
diff --git a/resources/js/components/ui/dialog/DialogClose.vue b/resources/js/components/ui/dialog/DialogClose.vue
deleted file mode 100644
index 91734ff9..00000000
--- a/resources/js/components/ui/dialog/DialogClose.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<script setup lang="ts">
-import { DialogClose, type DialogCloseProps } from 'radix-vue';
-
-const props = defineProps<DialogCloseProps>();
-</script>
-
-<template>
-    <DialogClose v-bind="props">
-        <slot />
-    </DialogClose>
-</template>
diff --git a/resources/js/components/ui/dialog/DialogContent.vue b/resources/js/components/ui/dialog/DialogContent.vue
deleted file mode 100644
index 9ee28b75..00000000
--- a/resources/js/components/ui/dialog/DialogContent.vue
+++ /dev/null
@@ -1,51 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@/lib/utils';
-import { X } from 'lucide-vue-next';
-import {
-    DialogClose,
-    DialogContent,
-    DialogOverlay,
-    DialogPortal,
-    useForwardPropsEmits,
-    type DialogContentEmits,
-    type DialogContentProps,
-} from 'radix-vue';
-import { computed, type HTMLAttributes } from 'vue';
-
-const props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>();
-const emits = defineEmits<DialogContentEmits>();
-
-const delegatedProps = computed(() => {
-    const { class: _, ...delegated } = props;
-
-    return delegated;
-});
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits);
-</script>
-
-<template>
-    <DialogPortal>
-        <DialogOverlay
-            class="fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
-        />
-        <DialogContent
-            v-bind="forwarded"
-            :class="
-                cn(
-                    'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 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 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
-                    props.class,
-                )
-            "
-        >
-            <slot />
-
-            <DialogClose
-                class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
-            >
-                <X class="h-4 w-4" />
-                <span class="sr-only">Close</span>
-            </DialogClose>
-        </DialogContent>
-    </DialogPortal>
-</template>
diff --git a/resources/js/components/ui/dialog/DialogDescription.vue b/resources/js/components/ui/dialog/DialogDescription.vue
deleted file mode 100644
index d35f13ae..00000000
--- a/resources/js/components/ui/dialog/DialogDescription.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@/lib/utils';
-import { DialogDescription, useForwardProps, type DialogDescriptionProps } from 'radix-vue';
-import { computed, type HTMLAttributes } from 'vue';
-
-const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>();
-
-const delegatedProps = computed(() => {
-    const { class: _, ...delegated } = props;
-
-    return delegated;
-});
-
-const forwardedProps = useForwardProps(delegatedProps);
-</script>
-
-<template>
-    <DialogDescription v-bind="forwardedProps" :class="cn('text-sm text-muted-foreground', props.class)">
-        <slot />
-    </DialogDescription>
-</template>
diff --git a/resources/js/components/ui/dialog/DialogFooter.vue b/resources/js/components/ui/dialog/DialogFooter.vue
deleted file mode 100644
index 543a58a9..00000000
--- a/resources/js/components/ui/dialog/DialogFooter.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@/lib/utils';
-import type { HTMLAttributes } from 'vue';
-
-const props = defineProps<{ class?: HTMLAttributes['class'] }>();
-</script>
-
-<template>
-    <div :class="cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2', props.class)">
-        <slot />
-    </div>
-</template>
diff --git a/resources/js/components/ui/dialog/DialogHeader.vue b/resources/js/components/ui/dialog/DialogHeader.vue
deleted file mode 100644
index afb80911..00000000
--- a/resources/js/components/ui/dialog/DialogHeader.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@/lib/utils';
-import type { HTMLAttributes } from 'vue';
-
-const props = defineProps<{
-    class?: HTMLAttributes['class'];
-}>();
-</script>
-
-<template>
-    <div :class="cn('flex flex-col gap-y-1.5 text-center sm:text-left', props.class)">
-        <slot />
-    </div>
-</template>
diff --git a/resources/js/components/ui/dialog/DialogScrollContent.vue b/resources/js/components/ui/dialog/DialogScrollContent.vue
deleted file mode 100644
index d4fee126..00000000
--- a/resources/js/components/ui/dialog/DialogScrollContent.vue
+++ /dev/null
@@ -1,59 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@/lib/utils';
-import { X } from 'lucide-vue-next';
-import {
-    DialogClose,
-    DialogContent,
-    DialogOverlay,
-    DialogPortal,
-    useForwardPropsEmits,
-    type DialogContentEmits,
-    type DialogContentProps,
-} from 'radix-vue';
-import { computed, type HTMLAttributes } from 'vue';
-
-const props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>();
-const emits = defineEmits<DialogContentEmits>();
-
-const delegatedProps = computed(() => {
-    const { class: _, ...delegated } = props;
-
-    return delegated;
-});
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits);
-</script>
-
-<template>
-    <DialogPortal>
-        <DialogOverlay
-            class="fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
-        >
-            <DialogContent
-                :class="
-                    cn(
-                        'relative z-50 my-8 grid w-full max-w-lg gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',
-                        props.class,
-                    )
-                "
-                v-bind="forwarded"
-                @pointer-down-outside="
-                    (event) => {
-                        const originalEvent = event.detail.originalEvent;
-                        const target = originalEvent.target as HTMLElement;
-                        if (originalEvent.offsetX > target.clientWidth || originalEvent.offsetY > target.clientHeight) {
-                            event.preventDefault();
-                        }
-                    }
-                "
-            >
-                <slot />
-
-                <DialogClose class="absolute right-3 top-3 rounded-md p-0.5 transition-colors hover:bg-secondary">
-                    <X class="h-4 w-4" />
-                    <span class="sr-only">Close</span>
-                </DialogClose>
-            </DialogContent>
-        </DialogOverlay>
-    </DialogPortal>
-</template>
diff --git a/resources/js/components/ui/dialog/DialogTitle.vue b/resources/js/components/ui/dialog/DialogTitle.vue
deleted file mode 100644
index f68bbe30..00000000
--- a/resources/js/components/ui/dialog/DialogTitle.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@/lib/utils';
-import { DialogTitle, useForwardProps, type DialogTitleProps } from 'radix-vue';
-import { computed, type HTMLAttributes } from 'vue';
-
-const props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>();
-
-const delegatedProps = computed(() => {
-    const { class: _, ...delegated } = props;
-
-    return delegated;
-});
-
-const forwardedProps = useForwardProps(delegatedProps);
-</script>
-
-<template>
-    <DialogTitle v-bind="forwardedProps" :class="cn('text-lg font-semibold leading-none tracking-tight', props.class)">
-        <slot />
-    </DialogTitle>
-</template>
diff --git a/resources/js/components/ui/dialog/DialogTrigger.vue b/resources/js/components/ui/dialog/DialogTrigger.vue
deleted file mode 100644
index bbd7f36e..00000000
--- a/resources/js/components/ui/dialog/DialogTrigger.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<script setup lang="ts">
-import { DialogTrigger, type DialogTriggerProps } from 'radix-vue';
-
-const props = defineProps<DialogTriggerProps>();
-</script>
-
-<template>
-    <DialogTrigger v-bind="props">
-        <slot />
-    </DialogTrigger>
-</template>
diff --git a/resources/js/components/ui/dialog/index.ts b/resources/js/components/ui/dialog/index.ts
deleted file mode 100644
index e924dd4b..00000000
--- a/resources/js/components/ui/dialog/index.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export { default as Dialog } from './Dialog.vue';
-export { default as DialogClose } from './DialogClose.vue';
-export { default as DialogContent } from './DialogContent.vue';
-export { default as DialogDescription } from './DialogDescription.vue';
-export { default as DialogFooter } from './DialogFooter.vue';
-export { default as DialogHeader } from './DialogHeader.vue';
-export { default as DialogScrollContent } from './DialogScrollContent.vue';
-export { default as DialogTitle } from './DialogTitle.vue';
-export { default as DialogTrigger } from './DialogTrigger.vue';
diff --git a/resources/js/components/ui/dropdown-menu/DropdownMenu.vue b/resources/js/components/ui/dropdown-menu/DropdownMenu.vue
index e3cd9075..962afbcf 100644
--- a/resources/js/components/ui/dropdown-menu/DropdownMenu.vue
+++ b/resources/js/components/ui/dropdown-menu/DropdownMenu.vue
@@ -1,14 +1,9 @@
 <script setup lang="ts">
-import { DropdownMenuRoot, useForwardPropsEmits, type DropdownMenuRootEmits, type DropdownMenuRootProps } from 'radix-vue';
-
-const props = defineProps<DropdownMenuRootProps>();
-const emits = defineEmits<DropdownMenuRootEmits>();
-
-const forwarded = useForwardPropsEmits(props, emits);
+const props = defineProps();
 </script>
 
 <template>
-    <DropdownMenuRoot v-bind="forwarded">
+    <VMenu v-bind="props">
         <slot />
-    </DropdownMenuRoot>
+    </VMenu>
 </template>
diff --git a/resources/js/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue b/resources/js/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
deleted file mode 100644
index 85d5239c..00000000
--- a/resources/js/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@/lib/utils';
-import { Check } from 'lucide-vue-next';
-import {
-    DropdownMenuCheckboxItem,
-    DropdownMenuItemIndicator,
-    useForwardPropsEmits,
-    type DropdownMenuCheckboxItemEmits,
-    type DropdownMenuCheckboxItemProps,
-} from 'radix-vue';
-import { computed, type HTMLAttributes } from 'vue';
-
-const props = defineProps<DropdownMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>();
-const emits = defineEmits<DropdownMenuCheckboxItemEmits>();
-
-const delegatedProps = computed(() => {
-    const { class: _, ...delegated } = props;
-
-    return delegated;
-});
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits);
-</script>
-
-<template>
-    <DropdownMenuCheckboxItem
-        v-bind="forwarded"
-        :class="
-            cn(
-                'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-                props.class,
-            )
-        "
-    >
-        <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-            <DropdownMenuItemIndicator>
-                <Check class="h-4 w-4" />
-            </DropdownMenuItemIndicator>
-        </span>
-        <slot />
-    </DropdownMenuCheckboxItem>
-</template>
diff --git a/resources/js/components/ui/dropdown-menu/DropdownMenuContent.vue b/resources/js/components/ui/dropdown-menu/DropdownMenuContent.vue
deleted file mode 100644
index df0e7b06..00000000
--- a/resources/js/components/ui/dropdown-menu/DropdownMenuContent.vue
+++ /dev/null
@@ -1,40 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@/lib/utils';
-import {
-    DropdownMenuContent,
-    DropdownMenuPortal,
-    useForwardPropsEmits,
-    type DropdownMenuContentEmits,
-    type DropdownMenuContentProps,
-} from 'radix-vue';
-import { computed, type HTMLAttributes } from 'vue';
-
-const props = withDefaults(defineProps<DropdownMenuContentProps & { class?: HTMLAttributes['class'] }>(), {
-    sideOffset: 4,
-});
-const emits = defineEmits<DropdownMenuContentEmits>();
-
-const delegatedProps = computed(() => {
-    const { class: _, ...delegated } = props;
-
-    return delegated;
-});
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits);
-</script>
-
-<template>
-    <DropdownMenuPortal>
-        <DropdownMenuContent
-            v-bind="forwarded"
-            :class="
-                cn(
-                    'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
-                    props.class,
-                )
-            "
-        >
-            <slot />
-        </DropdownMenuContent>
-    </DropdownMenuPortal>
-</template>
diff --git a/resources/js/components/ui/dropdown-menu/DropdownMenuGroup.vue b/resources/js/components/ui/dropdown-menu/DropdownMenuGroup.vue
deleted file mode 100644
index 21026d14..00000000
--- a/resources/js/components/ui/dropdown-menu/DropdownMenuGroup.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<script setup lang="ts">
-import { DropdownMenuGroup, type DropdownMenuGroupProps } from 'radix-vue';
-
-const props = defineProps<DropdownMenuGroupProps>();
-</script>
-
-<template>
-    <DropdownMenuGroup v-bind="props">
-        <slot />
-    </DropdownMenuGroup>
-</template>
diff --git a/resources/js/components/ui/dropdown-menu/DropdownMenuItem.vue b/resources/js/components/ui/dropdown-menu/DropdownMenuItem.vue
deleted file mode 100644
index 76032a0d..00000000
--- a/resources/js/components/ui/dropdown-menu/DropdownMenuItem.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@/lib/utils';
-import { DropdownMenuItem, useForwardProps, type DropdownMenuItemProps } from 'radix-vue';
-import { computed, type HTMLAttributes } from 'vue';
-
-const props = defineProps<DropdownMenuItemProps & { class?: HTMLAttributes['class']; inset?: boolean }>();
-
-const delegatedProps = computed(() => {
-    const { class: _, ...delegated } = props;
-
-    return delegated;
-});
-
-const forwardedProps = useForwardProps(delegatedProps);
-</script>
-
-<template>
-    <DropdownMenuItem
-        v-bind="forwardedProps"
-        :class="
-            cn(
-                'relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0',
-                inset && 'pl-8',
-                props.class,
-            )
-        "
-    >
-        <slot />
-    </DropdownMenuItem>
-</template>
diff --git a/resources/js/components/ui/dropdown-menu/DropdownMenuLabel.vue b/resources/js/components/ui/dropdown-menu/DropdownMenuLabel.vue
deleted file mode 100644
index 32b8936e..00000000
--- a/resources/js/components/ui/dropdown-menu/DropdownMenuLabel.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@/lib/utils';
-import { DropdownMenuLabel, useForwardProps, type DropdownMenuLabelProps } from 'radix-vue';
-import { computed, type HTMLAttributes } from 'vue';
-
-const props = defineProps<DropdownMenuLabelProps & { class?: HTMLAttributes['class']; inset?: boolean }>();
-
-const delegatedProps = computed(() => {
-    const { class: _, ...delegated } = props;
-
-    return delegated;
-});
-
-const forwardedProps = useForwardProps(delegatedProps);
-</script>
-
-<template>
-    <DropdownMenuLabel v-bind="forwardedProps" :class="cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', props.class)">
-        <slot />
-    </DropdownMenuLabel>
-</template>
diff --git a/resources/js/components/ui/dropdown-menu/DropdownMenuRadioGroup.vue b/resources/js/components/ui/dropdown-menu/DropdownMenuRadioGroup.vue
deleted file mode 100644
index b0702b95..00000000
--- a/resources/js/components/ui/dropdown-menu/DropdownMenuRadioGroup.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<script setup lang="ts">
-import { DropdownMenuRadioGroup, useForwardPropsEmits, type DropdownMenuRadioGroupEmits, type DropdownMenuRadioGroupProps } from 'radix-vue';
-
-const props = defineProps<DropdownMenuRadioGroupProps>();
-const emits = defineEmits<DropdownMenuRadioGroupEmits>();
-
-const forwarded = useForwardPropsEmits(props, emits);
-</script>
-
-<template>
-    <DropdownMenuRadioGroup v-bind="forwarded">
-        <slot />
-    </DropdownMenuRadioGroup>
-</template>
diff --git a/resources/js/components/ui/dropdown-menu/DropdownMenuRadioItem.vue b/resources/js/components/ui/dropdown-menu/DropdownMenuRadioItem.vue
deleted file mode 100644
index 468c2f82..00000000
--- a/resources/js/components/ui/dropdown-menu/DropdownMenuRadioItem.vue
+++ /dev/null
@@ -1,43 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@/lib/utils';
-import { Circle } from 'lucide-vue-next';
-import {
-    DropdownMenuItemIndicator,
-    DropdownMenuRadioItem,
-    useForwardPropsEmits,
-    type DropdownMenuRadioItemEmits,
-    type DropdownMenuRadioItemProps,
-} from 'radix-vue';
-import { computed, type HTMLAttributes } from 'vue';
-
-const props = defineProps<DropdownMenuRadioItemProps & { class?: HTMLAttributes['class'] }>();
-
-const emits = defineEmits<DropdownMenuRadioItemEmits>();
-
-const delegatedProps = computed(() => {
-    const { class: _, ...delegated } = props;
-
-    return delegated;
-});
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits);
-</script>
-
-<template>
-    <DropdownMenuRadioItem
-        v-bind="forwarded"
-        :class="
-            cn(
-                'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-                props.class,
-            )
-        "
-    >
-        <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-            <DropdownMenuItemIndicator>
-                <Circle class="h-2 w-2 fill-current" />
-            </DropdownMenuItemIndicator>
-        </span>
-        <slot />
-    </DropdownMenuRadioItem>
-</template>
diff --git a/resources/js/components/ui/dropdown-menu/DropdownMenuSeparator.vue b/resources/js/components/ui/dropdown-menu/DropdownMenuSeparator.vue
deleted file mode 100644
index 0062e72c..00000000
--- a/resources/js/components/ui/dropdown-menu/DropdownMenuSeparator.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@/lib/utils';
-import { DropdownMenuSeparator, type DropdownMenuSeparatorProps } from 'radix-vue';
-import { computed, type HTMLAttributes } from 'vue';
-
-const props = defineProps<
-    DropdownMenuSeparatorProps & {
-        class?: HTMLAttributes['class'];
-    }
->();
-
-const delegatedProps = computed(() => {
-    const { class: _, ...delegated } = props;
-
-    return delegated;
-});
-</script>
-
-<template>
-    <DropdownMenuSeparator v-bind="delegatedProps" :class="cn('-mx-1 my-1 h-px bg-muted', props.class)" />
-</template>
diff --git a/resources/js/components/ui/dropdown-menu/DropdownMenuShortcut.vue b/resources/js/components/ui/dropdown-menu/DropdownMenuShortcut.vue
deleted file mode 100644
index ade230c7..00000000
--- a/resources/js/components/ui/dropdown-menu/DropdownMenuShortcut.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@/lib/utils';
-import type { HTMLAttributes } from 'vue';
-
-const props = defineProps<{
-    class?: HTMLAttributes['class'];
-}>();
-</script>
-
-<template>
-    <span :class="cn('ml-auto text-xs tracking-widest opacity-60', props.class)">
-        <slot />
-    </span>
-</template>
diff --git a/resources/js/components/ui/dropdown-menu/DropdownMenuSub.vue b/resources/js/components/ui/dropdown-menu/DropdownMenuSub.vue
deleted file mode 100644
index 01ec0a07..00000000
--- a/resources/js/components/ui/dropdown-menu/DropdownMenuSub.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<script setup lang="ts">
-import { DropdownMenuSub, useForwardPropsEmits, type DropdownMenuSubEmits, type DropdownMenuSubProps } from 'radix-vue';
-
-const props = defineProps<DropdownMenuSubProps>();
-const emits = defineEmits<DropdownMenuSubEmits>();
-
-const forwarded = useForwardPropsEmits(props, emits);
-</script>
-
-<template>
-    <DropdownMenuSub v-bind="forwarded">
-        <slot />
-    </DropdownMenuSub>
-</template>
diff --git a/resources/js/components/ui/dropdown-menu/DropdownMenuSubContent.vue b/resources/js/components/ui/dropdown-menu/DropdownMenuSubContent.vue
deleted file mode 100644
index 61a48a66..00000000
--- a/resources/js/components/ui/dropdown-menu/DropdownMenuSubContent.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@/lib/utils';
-import { DropdownMenuSubContent, useForwardPropsEmits, type DropdownMenuSubContentEmits, type DropdownMenuSubContentProps } from 'radix-vue';
-import { computed, type HTMLAttributes } from 'vue';
-
-const props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>();
-const emits = defineEmits<DropdownMenuSubContentEmits>();
-
-const delegatedProps = computed(() => {
-    const { class: _, ...delegated } = props;
-
-    return delegated;
-});
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits);
-</script>
-
-<template>
-    <DropdownMenuSubContent
-        v-bind="forwarded"
-        :class="
-            cn(
-                'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
-                props.class,
-            )
-        "
-    >
-        <slot />
-    </DropdownMenuSubContent>
-</template>
diff --git a/resources/js/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue b/resources/js/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue
deleted file mode 100644
index 0f89131e..00000000
--- a/resources/js/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@/lib/utils';
-import { ChevronRight } from 'lucide-vue-next';
-import { DropdownMenuSubTrigger, useForwardProps, type DropdownMenuSubTriggerProps } from 'radix-vue';
-import { computed, type HTMLAttributes } from 'vue';
-
-const props = defineProps<DropdownMenuSubTriggerProps & { class?: HTMLAttributes['class'] }>();
-
-const delegatedProps = computed(() => {
-    const { class: _, ...delegated } = props;
-
-    return delegated;
-});
-
-const forwardedProps = useForwardProps(delegatedProps);
-</script>
-
-<template>
-    <DropdownMenuSubTrigger
-        v-bind="forwardedProps"
-        :class="
-            cn(
-                'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent',
-                props.class,
-            )
-        "
-    >
-        <slot />
-        <ChevronRight class="ml-auto h-4 w-4" />
-    </DropdownMenuSubTrigger>
-</template>
diff --git a/resources/js/components/ui/dropdown-menu/DropdownMenuTrigger.vue b/resources/js/components/ui/dropdown-menu/DropdownMenuTrigger.vue
deleted file mode 100644
index 68455eae..00000000
--- a/resources/js/components/ui/dropdown-menu/DropdownMenuTrigger.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<script setup lang="ts">
-import { DropdownMenuTrigger, useForwardProps, type DropdownMenuTriggerProps } from 'radix-vue';
-
-const props = defineProps<DropdownMenuTriggerProps>();
-
-const forwardedProps = useForwardProps(props);
-</script>
-
-<template>
-    <DropdownMenuTrigger class="outline-none" v-bind="forwardedProps">
-        <slot />
-    </DropdownMenuTrigger>
-</template>
diff --git a/resources/js/components/ui/dropdown-menu/index.ts b/resources/js/components/ui/dropdown-menu/index.ts
deleted file mode 100644
index 0f94b82d..00000000
--- a/resources/js/components/ui/dropdown-menu/index.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-export { default as DropdownMenu } from './DropdownMenu.vue';
-
-export { DropdownMenuPortal } from 'radix-vue';
-export { default as DropdownMenuCheckboxItem } from './DropdownMenuCheckboxItem.vue';
-export { default as DropdownMenuContent } from './DropdownMenuContent.vue';
-export { default as DropdownMenuGroup } from './DropdownMenuGroup.vue';
-export { default as DropdownMenuItem } from './DropdownMenuItem.vue';
-export { default as DropdownMenuLabel } from './DropdownMenuLabel.vue';
-export { default as DropdownMenuRadioGroup } from './DropdownMenuRadioGroup.vue';
-export { default as DropdownMenuRadioItem } from './DropdownMenuRadioItem.vue';
-export { default as DropdownMenuSeparator } from './DropdownMenuSeparator.vue';
-export { default as DropdownMenuShortcut } from './DropdownMenuShortcut.vue';
-export { default as DropdownMenuSub } from './DropdownMenuSub.vue';
-export { default as DropdownMenuSubContent } from './DropdownMenuSubContent.vue';
-export { default as DropdownMenuSubTrigger } from './DropdownMenuSubTrigger.vue';
-export { default as DropdownMenuTrigger } from './DropdownMenuTrigger.vue';
diff --git a/resources/js/components/ui/input/Input.vue b/resources/js/components/ui/input/Input.vue
index 54cdffe5..486f1f31 100644
--- a/resources/js/components/ui/input/Input.vue
+++ b/resources/js/components/ui/input/Input.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { cn } from '@/lib/utils';
 import { useVModel } from '@vueuse/core';
 import type { HTMLAttributes } from 'vue';
 
@@ -20,13 +19,8 @@ const modelValue = useVModel(props, 'modelValue', emits, {
 </script>
 
 <template>
-    <input
+    <VTextField
         v-model="modelValue"
-        :class="
-            cn(
-                'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
-                props.class,
-            )
-        "
+        :class="props.class"
     />
 </template>
diff --git a/resources/js/components/ui/input/index.ts b/resources/js/components/ui/input/index.ts
deleted file mode 100644
index c5248c5c..00000000
--- a/resources/js/components/ui/input/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as Input } from './Input.vue';
diff --git a/resources/js/components/ui/label/Label.vue b/resources/js/components/ui/label/Label.vue
index 7bdb9b9f..5f68f55f 100644
--- a/resources/js/components/ui/label/Label.vue
+++ b/resources/js/components/ui/label/Label.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { cn } from '@/lib/utils';
-import { Label, type LabelProps } from 'radix-vue';
 import { computed, type HTMLAttributes } from 'vue';
 
-const props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>();
+const props = defineProps<{
+    class?: HTMLAttributes['class'];
+}>();
 
 const delegatedProps = computed(() => {
     const { class: _, ...delegated } = props;
@@ -13,10 +13,10 @@ const delegatedProps = computed(() => {
 </script>
 
 <template>
-    <Label
+    <VLabel
         v-bind="delegatedProps"
-        :class="cn('text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70', props.class)"
+        :class="['text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70', props.class]"
     >
         <slot />
-    </Label>
+    </VLabel>
 </template>
diff --git a/resources/js/components/ui/label/index.ts b/resources/js/components/ui/label/index.ts
deleted file mode 100644
index c98e59f8..00000000
--- a/resources/js/components/ui/label/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as Label } from './Label.vue';
diff --git a/resources/js/components/ui/navigation-menu/NavigationMenu.vue b/resources/js/components/ui/navigation-menu/NavigationMenu.vue
index a0b5bec8..5254138f 100644
--- a/resources/js/components/ui/navigation-menu/NavigationMenu.vue
+++ b/resources/js/components/ui/navigation-menu/NavigationMenu.vue
@@ -1,33 +1,13 @@
 <script setup lang="ts">
-import { cn } from '@/lib/utils'
-import {
-  NavigationMenuRoot,
-  type NavigationMenuRootEmits,
-  type NavigationMenuRootProps,
-  useForwardPropsEmits,
-} from 'radix-vue'
-import { computed, type HTMLAttributes } from 'vue'
-import NavigationMenuViewport from './NavigationMenuViewport.vue'
+import { computed, type HTMLAttributes } from 'vue';
+import NavigationMenuViewport from './NavigationMenuViewport.vue';
 
-const props = defineProps<NavigationMenuRootProps & { class?: HTMLAttributes['class'] }>()
-
-const emits = defineEmits<NavigationMenuRootEmits>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const props = defineProps<{ class?: HTMLAttributes['class'] }>();
 </script>
 
 <template>
-  <NavigationMenuRoot
-    v-bind="forwarded"
-    :class="cn('relative z-10 flex max-w-max flex-1 items-center justify-center', props.class)"
-  >
-    <slot />
-    <NavigationMenuViewport />
-  </NavigationMenuRoot>
+    <VNavigationDrawer :class="['relative z-10 flex max-w-max flex-1 items-center justify-center', props.class]">
+        <slot />
+        <NavigationMenuViewport />
+    </VNavigationDrawer>
 </template>
diff --git a/resources/js/components/ui/navigation-menu/NavigationMenuContent.vue b/resources/js/components/ui/navigation-menu/NavigationMenuContent.vue
deleted file mode 100644
index 101f450e..00000000
--- a/resources/js/components/ui/navigation-menu/NavigationMenuContent.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@/lib/utils'
-import {
-  NavigationMenuContent,
-  type NavigationMenuContentEmits,
-  type NavigationMenuContentProps,
-  useForwardPropsEmits,
-} from 'radix-vue'
-import { computed, type HTMLAttributes } from 'vue'
-
-const props = defineProps<NavigationMenuContentProps & { class?: HTMLAttributes['class'] }>()
-
-const emits = defineEmits<NavigationMenuContentEmits>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-</script>
-
-<template>
-  <NavigationMenuContent
-    v-bind="forwarded"
-    :class="cn(
-      'left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto',
-      props.class,
-    )"
-  >
-    <slot />
-  </NavigationMenuContent>
-</template>
diff --git a/resources/js/components/ui/navigation-menu/NavigationMenuIndicator.vue b/resources/js/components/ui/navigation-menu/NavigationMenuIndicator.vue
deleted file mode 100644
index bbf7eb8b..00000000
--- a/resources/js/components/ui/navigation-menu/NavigationMenuIndicator.vue
+++ /dev/null
@@ -1,24 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@/lib/utils'
-import { NavigationMenuIndicator, type NavigationMenuIndicatorProps, useForwardProps } from 'radix-vue'
-import { computed, type HTMLAttributes } from 'vue'
-
-const props = defineProps<NavigationMenuIndicatorProps & { class?: HTMLAttributes['class'] }>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwardedProps = useForwardProps(delegatedProps)
-</script>
-
-<template>
-  <NavigationMenuIndicator
-    v-bind="forwardedProps"
-    :class="cn('top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in', props.class)"
-  >
-    <div class="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
-  </NavigationMenuIndicator>
-</template>
diff --git a/resources/js/components/ui/navigation-menu/NavigationMenuItem.vue b/resources/js/components/ui/navigation-menu/NavigationMenuItem.vue
deleted file mode 100644
index 50e1565f..00000000
--- a/resources/js/components/ui/navigation-menu/NavigationMenuItem.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<script setup lang="ts">
-import { NavigationMenuItem, type NavigationMenuItemProps } from 'radix-vue'
-
-const props = defineProps<NavigationMenuItemProps>()
-</script>
-
-<template>
-  <NavigationMenuItem v-bind="props">
-    <slot />
-  </NavigationMenuItem>
-</template>
diff --git a/resources/js/components/ui/navigation-menu/NavigationMenuLink.vue b/resources/js/components/ui/navigation-menu/NavigationMenuLink.vue
deleted file mode 100644
index 30c91c61..00000000
--- a/resources/js/components/ui/navigation-menu/NavigationMenuLink.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<script setup lang="ts">
-import {
-  NavigationMenuLink,
-  type NavigationMenuLinkEmits,
-  type NavigationMenuLinkProps,
-  useForwardPropsEmits,
-} from 'radix-vue'
-
-const props = defineProps<NavigationMenuLinkProps>()
-const emits = defineEmits<NavigationMenuLinkEmits>()
-
-const forwarded = useForwardPropsEmits(props, emits)
-</script>
-
-<template>
-  <NavigationMenuLink v-bind="forwarded">
-    <slot />
-  </NavigationMenuLink>
-</template>
diff --git a/resources/js/components/ui/navigation-menu/NavigationMenuList.vue b/resources/js/components/ui/navigation-menu/NavigationMenuList.vue
deleted file mode 100644
index 4cf0d10e..00000000
--- a/resources/js/components/ui/navigation-menu/NavigationMenuList.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@/lib/utils'
-import { NavigationMenuList, type NavigationMenuListProps, useForwardProps } from 'radix-vue'
-import { computed, type HTMLAttributes } from 'vue'
-
-const props = defineProps<NavigationMenuListProps & { class?: HTMLAttributes['class'] }>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwardedProps = useForwardProps(delegatedProps)
-</script>
-
-<template>
-  <NavigationMenuList
-    v-bind="forwardedProps"
-    :class="
-      cn(
-        'group flex flex-1 list-none items-center justify-center gap-x-1',
-        props.class,
-      )
-    "
-  >
-    <slot />
-  </NavigationMenuList>
-</template>
diff --git a/resources/js/components/ui/navigation-menu/NavigationMenuTrigger.vue b/resources/js/components/ui/navigation-menu/NavigationMenuTrigger.vue
deleted file mode 100644
index 6f2d0a27..00000000
--- a/resources/js/components/ui/navigation-menu/NavigationMenuTrigger.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@/lib/utils'
-import { ChevronDown } from 'lucide-vue-next'
-import {
-  NavigationMenuTrigger,
-  type NavigationMenuTriggerProps,
-  useForwardProps,
-} from 'radix-vue'
-import { computed, type HTMLAttributes } from 'vue'
-import { navigationMenuTriggerStyle } from '.'
-
-const props = defineProps<NavigationMenuTriggerProps & { class?: HTMLAttributes['class'] }>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwardedProps = useForwardProps(delegatedProps)
-</script>
-
-<template>
-  <NavigationMenuTrigger
-    v-bind="forwardedProps"
-    :class="cn(navigationMenuTriggerStyle(), 'group', props.class)"
-  >
-    <slot />
-    <ChevronDown
-      class="relative top-px ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"
-      aria-hidden="true"
-    />
-  </NavigationMenuTrigger>
-</template>
diff --git a/resources/js/components/ui/navigation-menu/NavigationMenuViewport.vue b/resources/js/components/ui/navigation-menu/NavigationMenuViewport.vue
deleted file mode 100644
index 56f53e61..00000000
--- a/resources/js/components/ui/navigation-menu/NavigationMenuViewport.vue
+++ /dev/null
@@ -1,33 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@/lib/utils'
-import {
-  NavigationMenuViewport,
-  type NavigationMenuViewportProps,
-  useForwardProps,
-} from 'radix-vue'
-import { computed, type HTMLAttributes } from 'vue'
-
-const props = defineProps<NavigationMenuViewportProps & { class?: HTMLAttributes['class'] }>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwardedProps = useForwardProps(delegatedProps)
-</script>
-
-<template>
-  <div class="absolute left-0 top-full flex justify-center">
-    <NavigationMenuViewport
-      v-bind="forwardedProps"
-      :class="
-        cn(
-          'origin-top-center relative mt-1.5 h-[--radix-navigation-menu-viewport-height] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[--radix-navigation-menu-viewport-width]',
-          props.class,
-        )
-      "
-    />
-  </div>
-</template>
diff --git a/resources/js/components/ui/navigation-menu/index.ts b/resources/js/components/ui/navigation-menu/index.ts
deleted file mode 100644
index 64c98017..00000000
--- a/resources/js/components/ui/navigation-menu/index.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { cva } from 'class-variance-authority'
-
-export { default as NavigationMenu } from './NavigationMenu.vue'
-export { default as NavigationMenuContent } from './NavigationMenuContent.vue'
-export { default as NavigationMenuIndicator } from './NavigationMenuIndicator.vue'
-export { default as NavigationMenuItem } from './NavigationMenuItem.vue'
-export { default as NavigationMenuLink } from './NavigationMenuLink.vue'
-export { default as NavigationMenuList } from './NavigationMenuList.vue'
-export { default as NavigationMenuTrigger } from './NavigationMenuTrigger.vue'
-export { default as NavigationMenuViewport } from './NavigationMenuViewport.vue'
-
-export const navigationMenuTriggerStyle = cva(
-  'group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50',
-)
diff --git a/resources/js/components/ui/separator/Separator.vue b/resources/js/components/ui/separator/Separator.vue
deleted file mode 100644
index 1590d593..00000000
--- a/resources/js/components/ui/separator/Separator.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@/lib/utils';
-import { Separator, type SeparatorProps } from 'radix-vue';
-import { computed, type HTMLAttributes } from 'vue';
-
-const props = defineProps<SeparatorProps & { class?: HTMLAttributes['class']; label?: string }>();
-
-const delegatedProps = computed(() => {
-    const { class: _, ...delegated } = props;
-
-    return delegated;
-});
-</script>
-
-<template>
-    <Separator
-        v-bind="delegatedProps"
-        :class="cn('relative shrink-0 bg-border', props.orientation === 'vertical' ? 'h-full w-px' : 'h-px w-full', props.class)"
-    >
-        <span
-            v-if="props.label"
-            :class="
-                cn(
-                    'absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 items-center justify-center bg-background text-xs text-muted-foreground',
-                    props.orientation === 'vertical' ? 'w-[1px] px-1 py-2' : 'h-[1px] px-2 py-1',
-                )
-            "
-            >{{ props.label }}</span
-        >
-    </Separator>
-</template>
diff --git a/resources/js/components/ui/separator/index.ts b/resources/js/components/ui/separator/index.ts
deleted file mode 100644
index 3cb07b01..00000000
--- a/resources/js/components/ui/separator/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as Separator } from './Separator.vue';
diff --git a/resources/js/components/ui/sheet/Sheet.vue b/resources/js/components/ui/sheet/Sheet.vue
index 490fff1a..d10f9ffb 100644
--- a/resources/js/components/ui/sheet/Sheet.vue
+++ b/resources/js/components/ui/sheet/Sheet.vue
@@ -1,14 +1,9 @@
 <script setup lang="ts">
-import { DialogRoot, useForwardPropsEmits, type DialogRootEmits, type DialogRootProps } from 'radix-vue';
-
-const props = defineProps<DialogRootProps>();
-const emits = defineEmits<DialogRootEmits>();
-
-const forwarded = useForwardPropsEmits(props, emits);
+const props = defineProps();
 </script>
 
 <template>
-    <DialogRoot v-bind="forwarded">
+    <VSheet v-bind="props">
         <slot />
-    </DialogRoot>
+    </VSheet>
 </template>
diff --git a/resources/js/components/ui/sheet/SheetClose.vue b/resources/js/components/ui/sheet/SheetClose.vue
deleted file mode 100644
index 91734ff9..00000000
--- a/resources/js/components/ui/sheet/SheetClose.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<script setup lang="ts">
-import { DialogClose, type DialogCloseProps } from 'radix-vue';
-
-const props = defineProps<DialogCloseProps>();
-</script>
-
-<template>
-    <DialogClose v-bind="props">
-        <slot />
-    </DialogClose>
-</template>
diff --git a/resources/js/components/ui/sheet/SheetContent.vue b/resources/js/components/ui/sheet/SheetContent.vue
deleted file mode 100644
index 60c9552a..00000000
--- a/resources/js/components/ui/sheet/SheetContent.vue
+++ /dev/null
@@ -1,53 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@/lib/utils';
-import { X } from 'lucide-vue-next';
-import {
-    DialogClose,
-    DialogContent,
-    DialogOverlay,
-    DialogPortal,
-    useForwardPropsEmits,
-    type DialogContentEmits,
-    type DialogContentProps,
-} from 'radix-vue';
-import { computed, type HTMLAttributes } from 'vue';
-import { sheetVariants, type SheetVariants } from '.';
-
-interface SheetContentProps extends DialogContentProps {
-    class?: HTMLAttributes['class'];
-    side?: SheetVariants['side'];
-}
-
-defineOptions({
-    inheritAttrs: false,
-});
-
-const props = defineProps<SheetContentProps>();
-
-const emits = defineEmits<DialogContentEmits>();
-
-const delegatedProps = computed(() => {
-    const { class: _, side, ...delegated } = props;
-
-    return delegated;
-});
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits);
-</script>
-
-<template>
-    <DialogPortal>
-        <DialogOverlay
-            class="fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
-        />
-        <DialogContent :class="cn(sheetVariants({ side }), props.class)" v-bind="{ ...forwarded, ...$attrs }">
-            <slot />
-
-            <DialogClose
-                class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary"
-            >
-                <X class="h-4 w-4 text-muted-foreground" />
-            </DialogClose>
-        </DialogContent>
-    </DialogPortal>
-</template>
diff --git a/resources/js/components/ui/sheet/SheetDescription.vue b/resources/js/components/ui/sheet/SheetDescription.vue
deleted file mode 100644
index 6b4bb9d7..00000000
--- a/resources/js/components/ui/sheet/SheetDescription.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@/lib/utils';
-import { DialogDescription, type DialogDescriptionProps } from 'radix-vue';
-import { computed, type HTMLAttributes } from 'vue';
-
-const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>();
-
-const delegatedProps = computed(() => {
-    const { class: _, ...delegated } = props;
-
-    return delegated;
-});
-</script>
-
-<template>
-    <DialogDescription :class="cn('text-sm text-muted-foreground', props.class)" v-bind="delegatedProps">
-        <slot />
-    </DialogDescription>
-</template>
diff --git a/resources/js/components/ui/sheet/SheetFooter.vue b/resources/js/components/ui/sheet/SheetFooter.vue
deleted file mode 100644
index 543a58a9..00000000
--- a/resources/js/components/ui/sheet/SheetFooter.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@/lib/utils';
-import type { HTMLAttributes } from 'vue';
-
-const props = defineProps<{ class?: HTMLAttributes['class'] }>();
-</script>
-
-<template>
-    <div :class="cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2', props.class)">
-        <slot />
-    </div>
-</template>
diff --git a/resources/js/components/ui/sheet/SheetHeader.vue b/resources/js/components/ui/sheet/SheetHeader.vue
deleted file mode 100644
index 0a4f00e6..00000000
--- a/resources/js/components/ui/sheet/SheetHeader.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@/lib/utils';
-import type { HTMLAttributes } from 'vue';
-
-const props = defineProps<{ class?: HTMLAttributes['class'] }>();
-</script>
-
-<template>
-    <div :class="cn('flex flex-col gap-y-2 text-center sm:text-left', props.class)">
-        <slot />
-    </div>
-</template>
diff --git a/resources/js/components/ui/sheet/SheetTitle.vue b/resources/js/components/ui/sheet/SheetTitle.vue
deleted file mode 100644
index 1a5ca812..00000000
--- a/resources/js/components/ui/sheet/SheetTitle.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@/lib/utils';
-import { DialogTitle, type DialogTitleProps } from 'radix-vue';
-import { computed, type HTMLAttributes } from 'vue';
-
-const props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>();
-
-const delegatedProps = computed(() => {
-    const { class: _, ...delegated } = props;
-
-    return delegated;
-});
-</script>
-
-<template>
-    <DialogTitle :class="cn('text-lg font-semibold text-foreground', props.class)" v-bind="delegatedProps">
-        <slot />
-    </DialogTitle>
-</template>
diff --git a/resources/js/components/ui/sheet/SheetTrigger.vue b/resources/js/components/ui/sheet/SheetTrigger.vue
deleted file mode 100644
index bbd7f36e..00000000
--- a/resources/js/components/ui/sheet/SheetTrigger.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<script setup lang="ts">
-import { DialogTrigger, type DialogTriggerProps } from 'radix-vue';
-
-const props = defineProps<DialogTriggerProps>();
-</script>
-
-<template>
-    <DialogTrigger v-bind="props">
-        <slot />
-    </DialogTrigger>
-</template>
diff --git a/resources/js/components/ui/sheet/index.ts b/resources/js/components/ui/sheet/index.ts
deleted file mode 100644
index 005b668b..00000000
--- a/resources/js/components/ui/sheet/index.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { cva, type VariantProps } from 'class-variance-authority';
-
-export { default as Sheet } from './Sheet.vue';
-export { default as SheetClose } from './SheetClose.vue';
-export { default as SheetContent } from './SheetContent.vue';
-export { default as SheetDescription } from './SheetDescription.vue';
-export { default as SheetFooter } from './SheetFooter.vue';
-export { default as SheetHeader } from './SheetHeader.vue';
-export { default as SheetTitle } from './SheetTitle.vue';
-export { default as SheetTrigger } from './SheetTrigger.vue';
-
-export const sheetVariants = cva(
-    'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
-    {
-        variants: {
-            side: {
-                top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
-                bottom: 'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
-                left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
-                right: 'inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',
-            },
-        },
-        defaultVariants: {
-            side: 'right',
-        },
-    },
-);
-
-export type SheetVariants = VariantProps<typeof sheetVariants>;
diff --git a/resources/js/components/ui/sidebar/Sidebar.vue b/resources/js/components/ui/sidebar/Sidebar.vue
deleted file mode 100644
index 6a8946d0..00000000
--- a/resources/js/components/ui/sidebar/Sidebar.vue
+++ /dev/null
@@ -1,99 +0,0 @@
-<script setup lang="ts">
-import Sheet from '@/components/ui/sheet/Sheet.vue';
-import SheetContent from '@/components/ui/sheet/SheetContent.vue';
-import { cn } from '@/lib/utils';
-import type { HTMLAttributes } from 'vue';
-import { SIDEBAR_WIDTH_MOBILE, useSidebar } from './utils';
-
-defineOptions({
-    inheritAttrs: false,
-});
-
-const props = withDefaults(
-    defineProps<{
-        side?: 'left' | 'right';
-        variant?: 'sidebar' | 'floating' | 'inset';
-        collapsible?: 'offcanvas' | 'icon' | 'none';
-        class?: HTMLAttributes['class'];
-    }>(),
-    {
-        side: 'left',
-        variant: 'sidebar',
-        collapsible: 'offcanvas',
-    },
-);
-
-const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
-</script>
-
-<template>
-    <div
-        v-if="collapsible === 'none'"
-        :class="cn('flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground', props.class)"
-        v-bind="$attrs"
-    >
-        <slot />
-    </div>
-
-    <Sheet v-else-if="isMobile" :open="openMobile" v-bind="$attrs" @update:open="setOpenMobile">
-        <SheetContent
-            data-sidebar="sidebar"
-            data-mobile="true"
-            :side="side"
-            class="w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
-            :style="{
-                '--sidebar-width': SIDEBAR_WIDTH_MOBILE,
-            }"
-        >
-            <div class="flex h-full w-full flex-col">
-                <slot />
-            </div>
-        </SheetContent>
-    </Sheet>
-
-    <div
-        v-else
-        class="group peer hidden md:block"
-        :data-state="state"
-        :data-collapsible="state === 'collapsed' ? collapsible : ''"
-        :data-variant="variant"
-        :data-side="side"
-    >
-        <!-- This is what handles the sidebar gap on desktop  -->
-        <div
-            :class="
-                cn(
-                    'relative h-svh w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear',
-                    'group-data-[collapsible=offcanvas]:w-0',
-                    'group-data-[side=right]:rotate-180',
-                    variant === 'floating' || variant === 'inset'
-                        ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]'
-                        : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon]',
-                )
-            "
-        />
-        <div
-            :class="
-                cn(
-                    'fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex',
-                    side === 'left'
-                        ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
-                        : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
-                    // Adjust the padding for floating and inset variants.
-                    variant === 'floating' || variant === 'inset'
-                        ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]'
-                        : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l',
-                    props.class,
-                )
-            "
-            v-bind="$attrs"
-        >
-            <div
-                data-sidebar="sidebar"
-                class="flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow"
-            >
-                <slot />
-            </div>
-        </div>
-    </div>
-</template>
diff --git a/resources/js/components/ui/sidebar/SidebarContent.vue b/resources/js/components/ui/sidebar/SidebarContent.vue
deleted file mode 100644
index 2bb05012..00000000
--- a/resources/js/components/ui/sidebar/SidebarContent.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@/lib/utils';
-import type { HTMLAttributes } from 'vue';
-
-const props = defineProps<{
-    class?: HTMLAttributes['class'];
-}>();
-</script>
-
-<template>
-    <div
-        data-sidebar="content"
-        :class="cn('flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden', props.class)"
-    >
-        <slot />
-    </div>
-</template>
diff --git a/resources/js/components/ui/sidebar/SidebarFooter.vue b/resources/js/components/ui/sidebar/SidebarFooter.vue
deleted file mode 100644
index 66ed413b..00000000
--- a/resources/js/components/ui/sidebar/SidebarFooter.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@/lib/utils';
-import type { HTMLAttributes } from 'vue';
-
-const props = defineProps<{
-    class?: HTMLAttributes['class'];
-}>();
-</script>
-
-<template>
-    <div data-sidebar="footer" :class="cn('flex flex-col gap-2 p-2', props.class)">
-        <slot />
-    </div>
-</template>
diff --git a/resources/js/components/ui/sidebar/SidebarGroup.vue b/resources/js/components/ui/sidebar/SidebarGroup.vue
deleted file mode 100644
index 94aa6ca7..00000000
--- a/resources/js/components/ui/sidebar/SidebarGroup.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@/lib/utils';
-import type { HTMLAttributes } from 'vue';
-
-const props = defineProps<{
-    class?: HTMLAttributes['class'];
-}>();
-</script>
-
-<template>
-    <div data-sidebar="group" :class="cn('relative flex w-full min-w-0 flex-col p-2', props.class)">
-        <slot />
-    </div>
-</template>
diff --git a/resources/js/components/ui/sidebar/SidebarGroupAction.vue b/resources/js/components/ui/sidebar/SidebarGroupAction.vue
deleted file mode 100644
index 7a0ce815..00000000
--- a/resources/js/components/ui/sidebar/SidebarGroupAction.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@/lib/utils';
-import type { PrimitiveProps } from 'radix-vue';
-import { Primitive } from 'radix-vue';
-import type { HTMLAttributes } from 'vue';
-
-const props = defineProps<
-    PrimitiveProps & {
-        class?: HTMLAttributes['class'];
-    }
->();
-</script>
-
-<template>
-    <Primitive
-        data-sidebar="group-action"
-        :as="as"
-        :as-child="asChild"
-        :class="
-            cn(
-                'absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
-                // Increases the hit area of the button on mobile.
-                'after:absolute after:-inset-2 after:md:hidden',
-                'group-data-[collapsible=icon]:hidden',
-                props.class,
-            )
-        "
-    >
-        <slot />
-    </Primitive>
-</template>
diff --git a/resources/js/components/ui/sidebar/SidebarGroupContent.vue b/resources/js/components/ui/sidebar/SidebarGroupContent.vue
deleted file mode 100644
index 06d8a122..00000000
--- a/resources/js/components/ui/sidebar/SidebarGroupContent.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@/lib/utils';
-import type { HTMLAttributes } from 'vue';
-
-const props = defineProps<{
-    class?: HTMLAttributes['class'];
-}>();
-</script>
-
-<template>
-    <div data-sidebar="group-content" :class="cn('w-full text-sm', props.class)">
-        <slot />
-    </div>
-</template>
diff --git a/resources/js/components/ui/sidebar/SidebarGroupLabel.vue b/resources/js/components/ui/sidebar/SidebarGroupLabel.vue
deleted file mode 100644
index 02671a88..00000000
--- a/resources/js/components/ui/sidebar/SidebarGroupLabel.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@/lib/utils';
-import type { PrimitiveProps } from 'radix-vue';
-import { Primitive } from 'radix-vue';
-import type { HTMLAttributes } from 'vue';
-
-const props = defineProps<
-    PrimitiveProps & {
-        class?: HTMLAttributes['class'];
-    }
->();
-</script>
-
-<template>
-    <Primitive
-        data-sidebar="group-label"
-        :as="as"
-        :as-child="asChild"
-        :class="
-            cn(
-                'flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
-                'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',
-                props.class,
-            )
-        "
-    >
-        <slot />
-    </Primitive>
-</template>
diff --git a/resources/js/components/ui/sidebar/SidebarHeader.vue b/resources/js/components/ui/sidebar/SidebarHeader.vue
deleted file mode 100644
index 1fecab48..00000000
--- a/resources/js/components/ui/sidebar/SidebarHeader.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@/lib/utils';
-import type { HTMLAttributes } from 'vue';
-
-const props = defineProps<{
-    class?: HTMLAttributes['class'];
-}>();
-</script>
-
-<template>
-    <div data-sidebar="header" :class="cn('flex flex-col gap-2 p-2', props.class)">
-        <slot />
-    </div>
-</template>
diff --git a/resources/js/components/ui/sidebar/SidebarInput.vue b/resources/js/components/ui/sidebar/SidebarInput.vue
deleted file mode 100644
index 80c9d2e0..00000000
--- a/resources/js/components/ui/sidebar/SidebarInput.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<script setup lang="ts">
-import Input from '@/components/ui/input/Input.vue';
-import { cn } from '@/lib/utils';
-import type { HTMLAttributes } from 'vue';
-
-const props = defineProps<{
-    class?: HTMLAttributes['class'];
-}>();
-</script>
-
-<template>
-    <Input data-sidebar="input" :class="cn('h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring', props.class)">
-        <slot />
-    </Input>
-</template>
diff --git a/resources/js/components/ui/sidebar/SidebarInset.vue b/resources/js/components/ui/sidebar/SidebarInset.vue
deleted file mode 100644
index 5e4e530e..00000000
--- a/resources/js/components/ui/sidebar/SidebarInset.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@/lib/utils';
-import type { HTMLAttributes } from 'vue';
-
-const props = defineProps<{
-    class?: HTMLAttributes['class'];
-}>();
-</script>
-
-<template>
-    <main
-        :class="
-            cn(
-                'relative flex min-h-svh flex-1 flex-col bg-background',
-                'peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow',
-                props.class,
-            )
-        "
-    >
-        <slot />
-    </main>
-</template>
diff --git a/resources/js/components/ui/sidebar/SidebarMenu.vue b/resources/js/components/ui/sidebar/SidebarMenu.vue
deleted file mode 100644
index 7449689e..00000000
--- a/resources/js/components/ui/sidebar/SidebarMenu.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@/lib/utils';
-import type { HTMLAttributes } from 'vue';
-
-const props = defineProps<{
-    class?: HTMLAttributes['class'];
-}>();
-</script>
-
-<template>
-    <ul data-sidebar="menu" :class="cn('flex w-full min-w-0 flex-col gap-1', props.class)">
-        <slot />
-    </ul>
-</template>
diff --git a/resources/js/components/ui/sidebar/SidebarMenuAction.vue b/resources/js/components/ui/sidebar/SidebarMenuAction.vue
deleted file mode 100644
index e70f8499..00000000
--- a/resources/js/components/ui/sidebar/SidebarMenuAction.vue
+++ /dev/null
@@ -1,41 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@/lib/utils';
-import { Primitive, type PrimitiveProps } from 'radix-vue';
-import type { HTMLAttributes } from 'vue';
-
-const props = withDefaults(
-    defineProps<
-        PrimitiveProps & {
-            showOnHover?: boolean;
-            class?: HTMLAttributes['class'];
-        }
-    >(),
-    {
-        as: 'button',
-    },
-);
-</script>
-
-<template>
-    <Primitive
-        data-sidebar="menu-action"
-        :class="
-            cn(
-                'absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0',
-                // Increases the hit area of the button on mobile.
-                'after:absolute after:-inset-2 after:md:hidden',
-                'peer-data-[size=sm]/menu-button:top-1',
-                'peer-data-[size=default]/menu-button:top-1.5',
-                'peer-data-[size=lg]/menu-button:top-2.5',
-                'group-data-[collapsible=icon]:hidden',
-                showOnHover &&
-                    'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0',
-                props.class,
-            )
-        "
-        :as="as"
-        :as-child="asChild"
-    >
-        <slot />
-    </Primitive>
-</template>
diff --git a/resources/js/components/ui/sidebar/SidebarMenuBadge.vue b/resources/js/components/ui/sidebar/SidebarMenuBadge.vue
deleted file mode 100644
index a92878a3..00000000
--- a/resources/js/components/ui/sidebar/SidebarMenuBadge.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@/lib/utils';
-import type { HTMLAttributes } from 'vue';
-
-const props = defineProps<{
-    class?: HTMLAttributes['class'];
-}>();
-</script>
-
-<template>
-    <div
-        data-sidebar="menu-badge"
-        :class="
-            cn(
-                'pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground',
-                'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',
-                'peer-data-[size=sm]/menu-button:top-1',
-                'peer-data-[size=default]/menu-button:top-1.5',
-                'peer-data-[size=lg]/menu-button:top-2.5',
-                'group-data-[collapsible=icon]:hidden',
-                props.class,
-            )
-        "
-    >
-        <slot />
-    </div>
-</template>
diff --git a/resources/js/components/ui/sidebar/SidebarMenuButton.vue b/resources/js/components/ui/sidebar/SidebarMenuButton.vue
deleted file mode 100644
index fabb0e27..00000000
--- a/resources/js/components/ui/sidebar/SidebarMenuButton.vue
+++ /dev/null
@@ -1,52 +0,0 @@
-<script setup lang="ts">
-import Tooltip from '@/components/ui/tooltip/Tooltip.vue';
-import TooltipContent from '@/components/ui/tooltip/TooltipContent.vue';
-import TooltipTrigger from '@/components/ui/tooltip/TooltipTrigger.vue';
-import { computed, type Component } from 'vue';
-import SidebarMenuButtonChild, { type SidebarMenuButtonProps } from './SidebarMenuButtonChild.vue';
-import { useSidebar } from './utils';
-
-defineOptions({
-    inheritAttrs: false,
-});
-
-const props = withDefaults(
-    defineProps<
-        SidebarMenuButtonProps & {
-            tooltip?: string | Component;
-        }
-    >(),
-    {
-        as: 'button',
-        variant: 'default',
-        size: 'default',
-    },
-);
-
-const { isMobile, state } = useSidebar();
-
-const delegatedProps = computed(() => {
-    const { tooltip, ...delegated } = props;
-    return delegated;
-});
-</script>
-
-<template>
-    <SidebarMenuButtonChild v-if="!tooltip" v-bind="{ ...delegatedProps, ...$attrs }">
-        <slot />
-    </SidebarMenuButtonChild>
-
-    <Tooltip v-else>
-        <TooltipTrigger as-child>
-            <SidebarMenuButtonChild v-bind="{ ...delegatedProps, ...$attrs }">
-                <slot />
-            </SidebarMenuButtonChild>
-        </TooltipTrigger>
-        <TooltipContent side="right" align="center" :hidden="state !== 'collapsed' || isMobile">
-            <template v-if="typeof tooltip === 'string'">
-                {{ tooltip }}
-            </template>
-            <component :is="tooltip" v-else />
-        </TooltipContent>
-    </Tooltip>
-</template>
diff --git a/resources/js/components/ui/sidebar/SidebarMenuButtonChild.vue b/resources/js/components/ui/sidebar/SidebarMenuButtonChild.vue
deleted file mode 100644
index dbb56600..00000000
--- a/resources/js/components/ui/sidebar/SidebarMenuButtonChild.vue
+++ /dev/null
@@ -1,33 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@/lib/utils';
-import { Primitive, type PrimitiveProps } from 'radix-vue';
-import type { HTMLAttributes } from 'vue';
-import { sidebarMenuButtonVariants, type SidebarMenuButtonVariants } from '.';
-
-export interface SidebarMenuButtonProps extends PrimitiveProps {
-    variant?: SidebarMenuButtonVariants['variant'];
-    size?: SidebarMenuButtonVariants['size'];
-    isActive?: boolean;
-    class?: HTMLAttributes['class'];
-}
-
-const props = withDefaults(defineProps<SidebarMenuButtonProps>(), {
-    as: 'button',
-    variant: 'default',
-    size: 'default',
-});
-</script>
-
-<template>
-    <Primitive
-        data-sidebar="menu-button"
-        :data-size="size"
-        :data-active="isActive"
-        :class="cn(sidebarMenuButtonVariants({ variant, size }), props.class)"
-        :as="as"
-        :as-child="asChild"
-        v-bind="$attrs"
-    >
-        <slot />
-    </Primitive>
-</template>
diff --git a/resources/js/components/ui/sidebar/SidebarMenuItem.vue b/resources/js/components/ui/sidebar/SidebarMenuItem.vue
deleted file mode 100644
index b30b6890..00000000
--- a/resources/js/components/ui/sidebar/SidebarMenuItem.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@/lib/utils';
-import type { HTMLAttributes } from 'vue';
-
-const props = defineProps<{
-    class?: HTMLAttributes['class'];
-}>();
-</script>
-
-<template>
-    <li data-sidebar="menu-item" :class="cn('group/menu-item relative', props.class)">
-        <slot />
-    </li>
-</template>
diff --git a/resources/js/components/ui/sidebar/SidebarMenuSkeleton.vue b/resources/js/components/ui/sidebar/SidebarMenuSkeleton.vue
deleted file mode 100644
index afbeef08..00000000
--- a/resources/js/components/ui/sidebar/SidebarMenuSkeleton.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<script setup lang="ts">
-import Skeleton from '@/components/ui/skeleton/Skeleton.vue';
-import { cn } from '@/lib/utils';
-import { computed, type HTMLAttributes } from 'vue';
-
-const props = defineProps<{
-    showIcon?: boolean;
-    class?: HTMLAttributes['class'];
-}>();
-
-const width = computed(() => {
-    return `${Math.floor(Math.random() * 40) + 50}%`;
-});
-</script>
-
-<template>
-    <div data-sidebar="menu-skeleton" :class="cn('flex h-8 items-center gap-2 rounded-md px-2', props.class)">
-        <Skeleton v-if="showIcon" class="size-4 rounded-md" data-sidebar="menu-skeleton-icon" />
-
-        <Skeleton class="h-4 max-w-[--skeleton-width] flex-1" data-sidebar="menu-skeleton-text" :style="{ '--skeleton-width': width }" />
-    </div>
-</template>
diff --git a/resources/js/components/ui/sidebar/SidebarMenuSub.vue b/resources/js/components/ui/sidebar/SidebarMenuSub.vue
deleted file mode 100644
index 1862711b..00000000
--- a/resources/js/components/ui/sidebar/SidebarMenuSub.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@/lib/utils';
-import type { HTMLAttributes } from 'vue';
-
-const props = defineProps<{
-    class?: HTMLAttributes['class'];
-}>();
-</script>
-
-<template>
-    <ul
-        data-sidebar="menu-badge"
-        :class="
-            cn(
-                'mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5',
-                'group-data-[collapsible=icon]:hidden',
-                props.class,
-            )
-        "
-    >
-        <slot />
-    </ul>
-</template>
diff --git a/resources/js/components/ui/sidebar/SidebarMenuSubButton.vue b/resources/js/components/ui/sidebar/SidebarMenuSubButton.vue
deleted file mode 100644
index 180f01df..00000000
--- a/resources/js/components/ui/sidebar/SidebarMenuSubButton.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@/lib/utils';
-import type { PrimitiveProps } from 'radix-vue';
-import { Primitive } from 'radix-vue';
-import type { HTMLAttributes } from 'vue';
-
-const props = withDefaults(
-    defineProps<
-        PrimitiveProps & {
-            size?: 'sm' | 'md';
-            isActive?: boolean;
-            class?: HTMLAttributes['class'];
-        }
-    >(),
-    {
-        as: 'a',
-        size: 'md',
-    },
-);
-</script>
-
-<template>
-    <Primitive
-        data-sidebar="menu-sub-button"
-        :as="as"
-        :as-child="asChild"
-        :data-size="size"
-        :data-active="isActive"
-        :class="
-            cn(
-                'flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground',
-                'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',
-                size === 'sm' && 'text-xs',
-                size === 'md' && 'text-sm',
-                'group-data-[collapsible=icon]:hidden',
-                props.class,
-            )
-        "
-    >
-        <slot />
-    </Primitive>
-</template>
diff --git a/resources/js/components/ui/sidebar/SidebarMenuSubItem.vue b/resources/js/components/ui/sidebar/SidebarMenuSubItem.vue
deleted file mode 100644
index 95dbc656..00000000
--- a/resources/js/components/ui/sidebar/SidebarMenuSubItem.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<script setup lang="ts"></script>
-
-<template>
-    <li>
-        <slot />
-    </li>
-</template>
diff --git a/resources/js/components/ui/sidebar/SidebarProvider.vue b/resources/js/components/ui/sidebar/SidebarProvider.vue
index a25d2de1..90b0e805 100644
--- a/resources/js/components/ui/sidebar/SidebarProvider.vue
+++ b/resources/js/components/ui/sidebar/SidebarProvider.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils';
 import { useEventListener, useMediaQuery, useVModel } from '@vueuse/core';
-import { TooltipProvider } from 'radix-vue';
 import { computed, ref, type HTMLAttributes, type Ref } from 'vue';
 import {
     SIDEBAR_COOKIE_MAX_AGE,
@@ -75,15 +74,13 @@ provideSidebarContext({
 </script>
 
 <template>
-    <TooltipProvider :delay-duration="0">
-        <div
-            :style="{
-                '--sidebar-width': SIDEBAR_WIDTH,
-                '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
-            }"
-            :class="cn('group/sidebar-wrapper flex min-h-svh w-full text-sidebar-foreground has-[[data-variant=inset]]:bg-sidebar', props.class)"
-        >
-            <slot />
-        </div>
-    </TooltipProvider>
+    <v-navigation-drawer
+        :style="{
+            '--sidebar-width': SIDEBAR_WIDTH,
+            '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
+        }"
+        :class="cn('group/sidebar-wrapper flex min-h-svh w-full text-sidebar-foreground has-[[data-variant=inset]]:bg-sidebar', props.class)"
+    >
+        <slot />
+    </v-navigation-drawer>
 </template>
diff --git a/resources/js/components/ui/sidebar/SidebarRail.vue b/resources/js/components/ui/sidebar/SidebarRail.vue
deleted file mode 100644
index 585d7d5a..00000000
--- a/resources/js/components/ui/sidebar/SidebarRail.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@/lib/utils';
-import type { HTMLAttributes } from 'vue';
-import { useSidebar } from './utils';
-
-const props = defineProps<{
-    class?: HTMLAttributes['class'];
-}>();
-
-const { toggleSidebar } = useSidebar();
-</script>
-
-<template>
-    <button
-        data-sidebar="rail"
-        aria-label="Toggle Sidebar"
-        :tabindex="-1"
-        title="Toggle Sidebar"
-        :class="
-            cn(
-                'absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex',
-                '[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize',
-                '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
-                'group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar',
-                '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
-                '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
-                props.class,
-            )
-        "
-        @click="toggleSidebar"
-    >
-        <slot />
-    </button>
-</template>
diff --git a/resources/js/components/ui/sidebar/SidebarSeparator.vue b/resources/js/components/ui/sidebar/SidebarSeparator.vue
deleted file mode 100644
index dcfc7c2b..00000000
--- a/resources/js/components/ui/sidebar/SidebarSeparator.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<script setup lang="ts">
-import Separator from '@/components/ui/separator/Separator.vue';
-import { cn } from '@/lib/utils';
-import type { HTMLAttributes } from 'vue';
-
-const props = defineProps<{
-    class?: HTMLAttributes['class'];
-}>();
-</script>
-
-<template>
-    <Separator data-sidebar="separator" :class="cn('mx-2 w-auto bg-sidebar-border', props.class)">
-        <slot />
-    </Separator>
-</template>
diff --git a/resources/js/components/ui/sidebar/SidebarTrigger.vue b/resources/js/components/ui/sidebar/SidebarTrigger.vue
deleted file mode 100644
index b8fff3cd..00000000
--- a/resources/js/components/ui/sidebar/SidebarTrigger.vue
+++ /dev/null
@@ -1,20 +0,0 @@
-<script setup lang="ts">
-import Button from '@/components/ui/button/Button.vue';
-import { cn } from '@/lib/utils';
-import { PanelLeft } from 'lucide-vue-next';
-import type { HTMLAttributes } from 'vue';
-import { useSidebar } from './utils';
-
-const props = defineProps<{
-    class?: HTMLAttributes['class'];
-}>();
-
-const { toggleSidebar } = useSidebar();
-</script>
-
-<template>
-    <Button data-sidebar="trigger" variant="ghost" size="icon" :class="cn('h-7 w-7', props.class)" @click="toggleSidebar">
-        <PanelLeft />
-        <span class="sr-only">Toggle Sidebar</span>
-    </Button>
-</template>
diff --git a/resources/js/components/ui/sidebar/index.ts b/resources/js/components/ui/sidebar/index.ts
deleted file mode 100644
index 6ae512d3..00000000
--- a/resources/js/components/ui/sidebar/index.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-import { cva, type VariantProps } from 'class-variance-authority';
-
-export { default as Sidebar } from './Sidebar.vue';
-export { default as SidebarContent } from './SidebarContent.vue';
-export { default as SidebarFooter } from './SidebarFooter.vue';
-export { default as SidebarGroup } from './SidebarGroup.vue';
-export { default as SidebarGroupAction } from './SidebarGroupAction.vue';
-export { default as SidebarGroupContent } from './SidebarGroupContent.vue';
-export { default as SidebarGroupLabel } from './SidebarGroupLabel.vue';
-export { default as SidebarHeader } from './SidebarHeader.vue';
-export { default as SidebarInput } from './SidebarInput.vue';
-export { default as SidebarInset } from './SidebarInset.vue';
-export { default as SidebarMenu } from './SidebarMenu.vue';
-export { default as SidebarMenuAction } from './SidebarMenuAction.vue';
-export { default as SidebarMenuBadge } from './SidebarMenuBadge.vue';
-export { default as SidebarMenuButton } from './SidebarMenuButton.vue';
-export { default as SidebarMenuItem } from './SidebarMenuItem.vue';
-export { default as SidebarMenuSkeleton } from './SidebarMenuSkeleton.vue';
-export { default as SidebarMenuSub } from './SidebarMenuSub.vue';
-export { default as SidebarMenuSubButton } from './SidebarMenuSubButton.vue';
-export { default as SidebarMenuSubItem } from './SidebarMenuSubItem.vue';
-export { default as SidebarProvider } from './SidebarProvider.vue';
-export { default as SidebarRail } from './SidebarRail.vue';
-export { default as SidebarSeparator } from './SidebarSeparator.vue';
-export { default as SidebarTrigger } from './SidebarTrigger.vue';
-
-export { useSidebar } from './utils';
-
-export const sidebarMenuButtonVariants = cva(
-    'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
-    {
-        variants: {
-            variant: {
-                default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
-                outline:
-                    'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',
-            },
-            size: {
-                default: 'h-8 text-sm',
-                sm: 'h-7 text-xs',
-                lg: 'h-12 text-sm group-data-[collapsible=icon]:!p-0',
-            },
-        },
-        defaultVariants: {
-            variant: 'default',
-            size: 'default',
-        },
-    },
-);
-
-export type SidebarMenuButtonVariants = VariantProps<typeof sidebarMenuButtonVariants>;
diff --git a/resources/js/components/ui/sidebar/utils.ts b/resources/js/components/ui/sidebar/utils.ts
deleted file mode 100644
index c19d1214..00000000
--- a/resources/js/components/ui/sidebar/utils.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { createContext } from 'radix-vue';
-import type { ComputedRef, Ref } from 'vue';
-
-export const SIDEBAR_COOKIE_NAME = 'sidebar:state';
-export const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
-export const SIDEBAR_WIDTH = '16rem';
-export const SIDEBAR_WIDTH_MOBILE = '18rem';
-export const SIDEBAR_WIDTH_ICON = '3rem';
-export const SIDEBAR_KEYBOARD_SHORTCUT = 'b';
-
-export const [useSidebar, provideSidebarContext] = createContext<{
-    state: ComputedRef<'expanded' | 'collapsed'>;
-    open: Ref<boolean>;
-    setOpen: (value: boolean) => void;
-    isMobile: Ref<boolean>;
-    openMobile: Ref<boolean>;
-    setOpenMobile: (value: boolean) => void;
-    toggleSidebar: () => void;
-}>('Sidebar');
diff --git a/resources/js/components/ui/skeleton/Skeleton.vue b/resources/js/components/ui/skeleton/Skeleton.vue
deleted file mode 100644
index c21b8e9d..00000000
--- a/resources/js/components/ui/skeleton/Skeleton.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@/lib/utils';
-import type { HTMLAttributes } from 'vue';
-
-interface SkeletonProps {
-    class?: HTMLAttributes['class'];
-}
-
-const props = defineProps<SkeletonProps>();
-</script>
-
-<template>
-    <div :class="cn('animate-pulse rounded-md bg-muted', props.class)" />
-</template>
diff --git a/resources/js/components/ui/skeleton/index.ts b/resources/js/components/ui/skeleton/index.ts
deleted file mode 100644
index 38cc2bac..00000000
--- a/resources/js/components/ui/skeleton/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as Skeleton } from './Skeleton.vue';
diff --git a/resources/js/components/ui/tooltip/Tooltip.vue b/resources/js/components/ui/tooltip/Tooltip.vue
deleted file mode 100644
index 3fdda61f..00000000
--- a/resources/js/components/ui/tooltip/Tooltip.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<script setup lang="ts">
-import { TooltipRoot, useForwardPropsEmits, type TooltipRootEmits, type TooltipRootProps } from 'radix-vue';
-
-const props = defineProps<TooltipRootProps>();
-const emits = defineEmits<TooltipRootEmits>();
-
-const forwarded = useForwardPropsEmits(props, emits);
-</script>
-
-<template>
-    <TooltipRoot v-bind="forwarded">
-        <slot />
-    </TooltipRoot>
-</template>
diff --git a/resources/js/components/ui/tooltip/TooltipContent.vue b/resources/js/components/ui/tooltip/TooltipContent.vue
deleted file mode 100644
index 66bb73c3..00000000
--- a/resources/js/components/ui/tooltip/TooltipContent.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@/lib/utils';
-import { TooltipContent, TooltipPortal, useForwardPropsEmits, type TooltipContentEmits, type TooltipContentProps } from 'radix-vue';
-import { computed, type HTMLAttributes } from 'vue';
-
-defineOptions({
-    inheritAttrs: false,
-});
-
-const props = withDefaults(defineProps<TooltipContentProps & { class?: HTMLAttributes['class'] }>(), {
-    sideOffset: 4,
-});
-
-const emits = defineEmits<TooltipContentEmits>();
-
-const delegatedProps = computed(() => {
-    const { class: _, ...delegated } = props;
-
-    return delegated;
-});
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits);
-</script>
-
-<template>
-    <TooltipPortal>
-        <TooltipContent
-            v-bind="{ ...forwarded, ...$attrs }"
-            :class="
-                cn(
-                    'z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
-                    props.class,
-                )
-            "
-        >
-            <slot />
-        </TooltipContent>
-    </TooltipPortal>
-</template>
diff --git a/resources/js/components/ui/tooltip/TooltipProvider.vue b/resources/js/components/ui/tooltip/TooltipProvider.vue
deleted file mode 100644
index a99a2094..00000000
--- a/resources/js/components/ui/tooltip/TooltipProvider.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<script setup lang="ts">
-import { TooltipProvider, type TooltipProviderProps } from 'radix-vue';
-
-const props = defineProps<TooltipProviderProps>();
-</script>
-
-<template>
-    <TooltipProvider v-bind="props">
-        <slot />
-    </TooltipProvider>
-</template>
diff --git a/resources/js/components/ui/tooltip/TooltipTrigger.vue b/resources/js/components/ui/tooltip/TooltipTrigger.vue
deleted file mode 100644
index c4b0509d..00000000
--- a/resources/js/components/ui/tooltip/TooltipTrigger.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<script setup lang="ts">
-import { TooltipTrigger, type TooltipTriggerProps } from 'radix-vue';
-
-const props = defineProps<TooltipTriggerProps>();
-</script>
-
-<template>
-    <TooltipTrigger v-bind="props">
-        <slot />
-    </TooltipTrigger>
-</template>
diff --git a/resources/js/components/ui/tooltip/index.ts b/resources/js/components/ui/tooltip/index.ts
deleted file mode 100644
index 94e681c8..00000000
--- a/resources/js/components/ui/tooltip/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export { default as Tooltip } from './Tooltip.vue';
-export { default as TooltipContent } from './TooltipContent.vue';
-export { default as TooltipProvider } from './TooltipProvider.vue';
-export { default as TooltipTrigger } from './TooltipTrigger.vue';
diff --git a/tailwind.config.js b/tailwind.config.js
deleted file mode 100644
index d444031a..00000000
--- a/tailwind.config.js
+++ /dev/null
@@ -1,77 +0,0 @@
-import defaultTheme from 'tailwindcss/defaultTheme';
-
-/** @type {import('tailwindcss').Config} */
-export default {
-    darkMode: ['class'],
-    content: [
-        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
-        './storage/framework/views/*.php',
-        './resources/views/**/*.blade.php',
-        './resources/js/**/*.{vue,js,ts,jsx,tsx}',
-    ],
-    theme: {
-        extend: {
-            fontFamily: {
-                sans: ['Instrument Sans', ...defaultTheme.fontFamily.sans],
-            },
-            borderRadius: {
-                lg: 'var(--radius)',
-                md: 'calc(var(--radius) - 2px)',
-                sm: 'calc(var(--radius) - 4px)',
-            },
-            colors: {
-                background: 'hsl(var(--background))',
-                foreground: 'hsl(var(--foreground))',
-                card: {
-                    DEFAULT: 'hsl(var(--card))',
-                    foreground: 'hsl(var(--card-foreground))',
-                },
-                popover: {
-                    DEFAULT: 'hsl(var(--popover))',
-                    foreground: 'hsl(var(--popover-foreground))',
-                },
-                primary: {
-                    DEFAULT: 'hsl(var(--primary))',
-                    foreground: 'hsl(var(--primary-foreground))',
-                },
-                secondary: {
-                    DEFAULT: 'hsl(var(--secondary))',
-                    foreground: 'hsl(var(--secondary-foreground))',
-                },
-                muted: {
-                    DEFAULT: 'hsl(var(--muted))',
-                    foreground: 'hsl(var(--muted-foreground))',
-                },
-                accent: {
-                    DEFAULT: 'hsl(var(--accent))',
-                    foreground: 'hsl(var(--accent-foreground))',
-                },
-                destructive: {
-                    DEFAULT: 'hsl(var(--destructive))',
-                    foreground: 'hsl(var(--destructive-foreground))',
-                },
-                border: 'hsl(var(--border))',
-                input: 'hsl(var(--input))',
-                ring: 'hsl(var(--ring))',
-                chart: {
-                    1: 'hsl(var(--chart-1))',
-                    2: 'hsl(var(--chart-2))',
-                    3: 'hsl(var(--chart-3))',
-                    4: 'hsl(var(--chart-4))',
-                    5: 'hsl(var(--chart-5))',
-                },
-                sidebar: {
-                    DEFAULT: 'hsl(var(--sidebar-background))',
-                    foreground: 'hsl(var(--sidebar-foreground))',
-                    primary: 'hsl(var(--sidebar-primary))',
-                    'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
-                    accent: 'hsl(var(--sidebar-accent))',
-                    'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
-                    border: 'hsl(var(--sidebar-border))',
-                    ring: 'hsl(var(--sidebar-ring))',
-                },
-            },
-        },
-    },
-    plugins: [require('tailwindcss-animate')],
-};
diff --git a/vite.config.ts b/vite.config.ts
index d9fac867..1ae72215 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,10 +1,9 @@
 import vue from '@vitejs/plugin-vue';
-import autoprefixer from 'autoprefixer';
 import laravel from 'laravel-vite-plugin';
 import path from 'path';
-import tailwindcss from 'tailwindcss';
 import { resolve } from 'node:path';
 import { defineConfig } from 'vite';
+import vuetify from 'vite-plugin-vuetify';
 
 export default defineConfig({
     plugins: [
@@ -21,6 +20,9 @@ export default defineConfig({
                 },
             },
         }),
+        vuetify({
+            autoImport: true,
+        }),
     ],
     resolve: {
         alias: {
@@ -28,9 +30,4 @@ export default defineConfig({
             'ziggy-js': resolve(__dirname, 'vendor/tightenco/ziggy'),
         },
     },
-    css: {
-        postcss: {
-            plugins: [tailwindcss, autoprefixer],
-        },
-    },
 });