replace el-radio with RadioGroup and RadioGroupItem

src/components/dialogs/GroupDialog/GroupPostEditDialog.vue

@@ -28,14 +28,20 @@
                     </el-checkbox>
                 </el-form-item>
                 <el-form-item :label="t('dialog.group_post_edit.post_visibility')">
-                    <el-radio-group v-model="groupPostEditDialog.visibility" size="small">
-                        <el-radio value="public">
-                            {{ t('dialog.group_post_edit.visibility_public') }}
-                        </el-radio>
-                        <el-radio value="group">
-                            {{ t('dialog.group_post_edit.visibility_group') }}
-                        </el-radio>
-                    </el-radio-group>
+                    <RadioGroup v-model="groupPostEditDialog.visibility" class="flex items-center gap-4">
+                        <div class="flex items-center space-x-2">
+                            <RadioGroupItem id="groupPostVisibility-public" value="public" />
+                            <label for="groupPostVisibility-public">
+                                {{ t('dialog.group_post_edit.visibility_public') }}
+                            </label>
+                        </div>
+                        <div class="flex items-center space-x-2">
+                            <RadioGroupItem id="groupPostVisibility-group" value="group" />
+                            <label for="groupPostVisibility-group">
+                                {{ t('dialog.group_post_edit.visibility_group') }}
+                            </label>
+                        </div>
+                    </RadioGroup>
                 </el-form-item>
                 <el-form-item v-if="groupPostEditDialog.visibility === 'group'" :label="t('dialog.new_instance.roles')">
                     <Select
@@ -106,6 +112,7 @@
     import { useI18n } from 'vue-i18n';
 
     import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '../../ui/select';
+    import { RadioGroup, RadioGroupItem } from '../../ui/radio-group';
     import { groupRequest, vrcPlusIconRequest } from '../../../api';
     import { useGalleryStore, useGroupStore } from '../../../stores';
 

src/components/ui/radio-group/RadioGroup.vue

@@ -0,0 +1,34 @@
+<script setup>
+    import { RadioGroupRoot, useForwardPropsEmits } from 'reka-ui';
+    import { cn } from '@/lib/utils';
+    import { reactiveOmit } from '@vueuse/core';
+
+    const props = defineProps({
+        modelValue: { type: null, required: false },
+        defaultValue: { type: null, required: false },
+        disabled: { type: Boolean, required: false },
+        orientation: { type: String, required: false },
+        dir: { type: String, required: false },
+        loop: { type: Boolean, required: false },
+        asChild: { type: Boolean, required: false },
+        as: { type: null, required: false },
+        name: { type: String, required: false },
+        required: { type: Boolean, required: false },
+        class: { type: null, required: false }
+    });
+    const emits = defineEmits(['update:modelValue']);
+
+    const delegatedProps = reactiveOmit(props, 'class');
+
+    const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+    <RadioGroupRoot
+        v-slot="slotProps"
+        data-slot="radio-group"
+        :class="cn('grid gap-3', props.class)"
+        v-bind="forwarded">
+        <slot v-bind="slotProps" />
+    </RadioGroupRoot>
+</template>

src/components/ui/radio-group/RadioGroupItem.vue

@@ -0,0 +1,39 @@
+<script setup>
+    import { RadioGroupIndicator, RadioGroupItem, useForwardProps } from 'reka-ui';
+    import { CircleIcon } from 'lucide-vue-next';
+    import { cn } from '@/lib/utils';
+    import { reactiveOmit } from '@vueuse/core';
+
+    const props = defineProps({
+        id: { type: String, required: false },
+        value: { type: null, required: false },
+        disabled: { type: Boolean, required: false },
+        asChild: { type: Boolean, required: false },
+        as: { type: null, required: false },
+        name: { type: String, required: false },
+        required: { type: Boolean, required: false },
+        class: { type: null, required: false }
+    });
+
+    const delegatedProps = reactiveOmit(props, 'class');
+
+    const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+    <RadioGroupItem
+        data-slot="radio-group-item"
+        v-bind="forwardedProps"
+        :class="
+            cn(
+                'border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+                props.class
+            )
+        ">
+        <RadioGroupIndicator data-slot="radio-group-indicator" class="relative flex items-center justify-center">
+            <slot>
+                <CircleIcon class="fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" />
+            </slot>
+        </RadioGroupIndicator>
+    </RadioGroupItem>
+</template>

src/components/ui/radio-group/index.js

@@ -0,0 +1,2 @@
+export { default as RadioGroup } from './RadioGroup.vue';
+export { default as RadioGroupItem } from './RadioGroupItem.vue';

src/views/Search/Search.vue

@@ -170,40 +170,70 @@
                         }}</span>
                     </div>
                     <div style="display: flex; align-items: center">
-                        <el-radio-group
-                            v-model="searchAvatarFilter"
-                            size="small"
-                            style="margin: 5px; display: block"
-                            @change="searchAvatar">
-                            <el-radio value="all">{{ t('view.search.avatar.all') }}</el-radio>
-                            <el-radio value="public">{{ t('view.search.avatar.public') }}</el-radio>
-                            <el-radio value="private">{{ t('view.search.avatar.private') }}</el-radio>
-                        </el-radio-group>
+                        <RadioGroup
+                            :model-value="searchAvatarFilter"
+                            class="flex items-center gap-4"
+                            style="margin: 5px"
+                            @update:modelValue="handleSearchAvatarFilterChange">
+                            <div class="flex items-center space-x-2">
+                                <RadioGroupItem id="searchAvatarFilter-all" value="all" />
+                                <label for="searchAvatarFilter-all">{{ t('view.search.avatar.all') }}</label>
+                            </div>
+                            <div class="flex items-center space-x-2">
+                                <RadioGroupItem id="searchAvatarFilter-public" value="public" />
+                                <label for="searchAvatarFilter-public">{{ t('view.search.avatar.public') }}</label>
+                            </div>
+                            <div class="flex items-center space-x-2">
+                                <RadioGroupItem id="searchAvatarFilter-private" value="private" />
+                                <label for="searchAvatarFilter-private">{{ t('view.search.avatar.private') }}</label>
+                            </div>
+                        </RadioGroup>
                         <el-divider direction="vertical"></el-divider>
-                        <el-radio-group
-                            v-model="searchAvatarFilterRemote"
-                            size="small"
-                            style="margin: 5px; display: block"
-                            @change="searchAvatar">
-                            <el-radio value="all">{{ t('view.search.avatar.all') }}</el-radio>
-                            <el-radio value="local">{{ t('view.search.avatar.local') }}</el-radio>
-                            <el-radio value="remote" :disabled="!avatarRemoteDatabase">{{
-                                t('view.search.avatar.remote')
-                            }}</el-radio>
-                        </el-radio-group>
+                        <RadioGroup
+                            :model-value="searchAvatarFilterRemote"
+                            class="flex items-center gap-4"
+                            style="margin: 5px"
+                            @update:modelValue="handleSearchAvatarFilterRemoteChange">
+                            <div class="flex items-center space-x-2">
+                                <RadioGroupItem id="searchAvatarFilterRemote-all" value="all" />
+                                <label for="searchAvatarFilterRemote-all">{{ t('view.search.avatar.all') }}</label>
+                            </div>
+                            <div class="flex items-center space-x-2">
+                                <RadioGroupItem id="searchAvatarFilterRemote-local" value="local" />
+                                <label for="searchAvatarFilterRemote-local">{{ t('view.search.avatar.local') }}</label>
+                            </div>
+                            <div class="flex items-center space-x-2">
+                                <RadioGroupItem
+                                    id="searchAvatarFilterRemote-remote"
+                                    value="remote"
+                                    :disabled="!avatarRemoteDatabase" />
+                                <label for="searchAvatarFilterRemote-remote">{{
+                                    t('view.search.avatar.remote')
+                                }}</label>
+                            </div>
+                        </RadioGroup>
                     </div>
                 </div>
                 <div style="display: flex; justify-content: end">
-                    <el-radio-group
-                        v-model="searchAvatarSort"
+                    <RadioGroup
+                        :model-value="searchAvatarSort"
                         :disabled="searchAvatarFilterRemote !== 'local'"
-                        size="small"
-                        style="margin: 5px; display: block"
-                        @change="searchAvatar">
-                        <el-radio value="name">{{ t('view.search.avatar.sort_name') }}</el-radio>
-                        <el-radio value="update">{{ t('view.search.avatar.sort_update') }}</el-radio>
-                        <el-radio value="created">{{ t('view.search.avatar.sort_created') }}</el-radio>
-                    </el-radio-group>
+                        class="flex items-center gap-4"
+                        style="margin: 5px"
+                        @update:modelValue="handleSearchAvatarSortChange">
+                        <div class="flex items-center space-x-2">
+                            <RadioGroupItem id="searchAvatarSort-name" value="name" />
+                            <label for="searchAvatarSort-name">{{ t('view.search.avatar.sort_name') }}</label>
+                        </div>
+                        <div class="flex items-center space-x-2">
+                            <RadioGroupItem id="searchAvatarSort-update" value="update" />
+                            <label for="searchAvatarSort-update">{{ t('view.search.avatar.sort_update') }}</label>
+                        </div>
+                        <div class="flex items-center space-x-2">
+                            <RadioGroupItem id="searchAvatarSort-created" value="created" />
+                            <label for="searchAvatarSort-created">{{ t('view.search.avatar.sort_created') }}</label>
+                        </div>
+                    </RadioGroup>
                 </div>
                 <div class="x-friend-list" style="margin-top: 20px; min-height: 500px">
                     <div
@@ -308,6 +338,7 @@
 <script setup>
     import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
     import { Back, Delete, Refresh, Right } from '@element-plus/icons-vue';
+    import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
     import { Button } from '@/components/ui/button';
     import { ButtonGroup } from '@/components/ui/button-group';
     import { ref } from 'vue';
@@ -368,6 +399,21 @@
     const searchWorldCategoryIndex = ref(null);
     const searchWorldResults = ref([]);
 
+    function handleSearchAvatarFilterChange(value) {
+        searchAvatarFilter.value = value;
+        searchAvatar();
+    }
+
+    function handleSearchAvatarFilterRemoteChange(value) {
+        searchAvatarFilterRemote.value = value;
+        searchAvatar();
+    }
+
+    function handleSearchAvatarSortChange(value) {
+        searchAvatarSort.value = value;
+        searchAvatar();
+    }
+
     const searchAvatarFilter = ref('');
     const searchAvatarSort = ref('');
     const searchAvatarFilterRemote = ref('');

src/views/Settings/components/Tabs/AppearanceTab.vue

@@ -72,25 +72,45 @@
                 @change="setIsAgeGatedInstancesVisible" />
             <div class="options-container-item">
                 <span class="name">{{ t('view.settings.appearance.appearance.sort_favorite_by') }}</span>
-                <el-radio-group :model-value="sortFavorites" @change="saveSortFavoritesOption">
-                    <el-radio :value="false">{{
-                        t('view.settings.appearance.appearance.sort_favorite_by_name')
-                    }}</el-radio>
-                    <el-radio :value="true">{{
-                        t('view.settings.appearance.appearance.sort_favorite_by_date')
-                    }}</el-radio>
-                </el-radio-group>
+                <RadioGroup
+                    :model-value="sortFavorites ? 'true' : 'false'"
+                    class="gap-2"
+                    style="margin-top: 8px"
+                    @update:modelValue="handleSortFavoritesRadio">
+                    <div class="flex items-center space-x-2">
+                        <RadioGroupItem id="sortFavorites-false" value="false" />
+                        <label for="sortFavorites-false">
+                            {{ t('view.settings.appearance.appearance.sort_favorite_by_name') }}
+                        </label>
+                    </div>
+                    <div class="flex items-center space-x-2">
+                        <RadioGroupItem id="sortFavorites-true" value="true" />
+                        <label for="sortFavorites-true">
+                            {{ t('view.settings.appearance.appearance.sort_favorite_by_date') }}
+                        </label>
+                    </div>
+                </RadioGroup>
             </div>
             <div class="options-container-item">
                 <span class="name">{{ t('view.settings.appearance.appearance.sort_instance_users_by') }}</span>
-                <el-radio-group :model-value="instanceUsersSortAlphabetical" @change="setInstanceUsersSortAlphabetical">
-                    <el-radio :value="false">{{
-                        t('view.settings.appearance.appearance.sort_instance_users_by_time')
-                    }}</el-radio>
-                    <el-radio :value="true">{{
-                        t('view.settings.appearance.appearance.sort_instance_users_by_alphabet')
-                    }}</el-radio>
-                </el-radio-group>
+                <RadioGroup
+                    :model-value="instanceUsersSortAlphabetical ? 'true' : 'false'"
+                    class="gap-2"
+                    style="margin-top: 8px"
+                    @update:modelValue="handleInstanceUsersSortAlphabeticalRadio">
+                    <div class="flex items-center space-x-2">
+                        <RadioGroupItem id="instanceUsersSortAlphabetical-false" value="false" />
+                        <label for="instanceUsersSortAlphabetical-false">
+                            {{ t('view.settings.appearance.appearance.sort_instance_users_by_time') }}
+                        </label>
+                    </div>
+                    <div class="flex items-center space-x-2">
+                        <RadioGroupItem id="instanceUsersSortAlphabetical-true" value="true" />
+                        <label for="instanceUsersSortAlphabetical-true">
+                            {{ t('view.settings.appearance.appearance.sort_instance_users_by_alphabet') }}
+                        </label>
+                    </div>
+                </RadioGroup>
             </div>
 
             <div class="options-container-item">
@@ -154,15 +174,24 @@
             <span class="header">{{ t('view.settings.appearance.timedate.header') }}</span>
             <div class="options-container-item">
                 <span class="name">{{ t('view.settings.appearance.timedate.time_format') }}</span>
-                <el-radio-group
-                    :model-value="dtHour12"
-                    @change="
-                        setDtHour12();
-                        updateVRConfigVars();
-                    ">
-                    <el-radio :value="true">{{ t('view.settings.appearance.timedate.time_format_12') }}</el-radio>
-                    <el-radio :value="false">{{ t('view.settings.appearance.timedate.time_format_24') }}</el-radio>
-                </el-radio-group>
+                <RadioGroup
+                    :model-value="dtHour12 ? 'true' : 'false'"
+                    class="gap-2"
+                    style="margin-top: 8px"
+                    @update:modelValue="handleDtHour12Radio">
+                    <div class="flex items-center space-x-2">
+                        <RadioGroupItem id="dtHour12-true" value="true" />
+                        <label for="dtHour12-true">
+                            {{ t('view.settings.appearance.timedate.time_format_12') }}
+                        </label>
+                    </div>
+                    <div class="flex items-center space-x-2">
+                        <RadioGroupItem id="dtHour12-false" value="false" />
+                        <label for="dtHour12-false">
+                            {{ t('view.settings.appearance.timedate.time_format_24') }}
+                        </label>
+                    </div>
+                </RadioGroup>
             </div>
             <simple-switch
                 :label="t('view.settings.appearance.timedate.force_iso_date_format')"
@@ -398,6 +427,7 @@
     import { computed, onBeforeUnmount, ref, watch } from 'vue';
     import { ArrowRight, Notebook } from '@element-plus/icons-vue';
     import { CheckIcon, ChevronDown } from 'lucide-vue-next';
+    import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
     import { Button } from '@/components/ui/button';
     import { storeToRefs } from 'pinia';
     import { toast } from 'vue-sonner';
@@ -483,6 +513,28 @@
 
     initGetZoomLevel();
 
+    function handleSortFavoritesRadio(value) {
+        const nextValue = value === 'true';
+        if (nextValue !== sortFavorites.value) {
+            saveSortFavoritesOption();
+        }
+    }
+
+    function handleInstanceUsersSortAlphabeticalRadio(value) {
+        const nextValue = value === 'true';
+        if (nextValue !== instanceUsersSortAlphabetical.value) {
+            setInstanceUsersSortAlphabetical();
+        }
+    }
+
+    function handleDtHour12Radio(value) {
+        const nextValue = value === 'true';
+        if (nextValue !== dtHour12.value) {
+            setDtHour12();
+            updateVRConfigVars();
+        }
+    }
+
     const tablePageSizesModel = computed({
         get: () => tablePageSizes.value.map(String),
         set: (values) => {

src/views/Settings/components/Tabs/GeneralTab.vue

@@ -217,13 +217,25 @@
             </div>
             <div class="options-container-item">
                 <span class="name">{{ t('view.settings.general.automation.alone_condition') }}</span>
-                <el-radio-group
-                    :model-value="autoStateChangeNoFriends"
+                <RadioGroup
+                    :model-value="autoStateChangeNoFriends ? 'true' : 'false'"
                     :disabled="!autoStateChangeEnabled"
-                    @change="setAutoStateChangeNoFriends">
-                    <el-radio :value="false">{{ t('view.settings.general.automation.alone') }}</el-radio>
-                    <el-radio :value="true">{{ t('view.settings.general.automation.no_friends') }}</el-radio>
-                </el-radio-group>
+                    class="gap-2"
+                    style="margin-top: 8px"
+                    @update:modelValue="handleAutoStateChangeNoFriendsRadio">
+                    <div class="flex items-center space-x-2">
+                        <RadioGroupItem id="autoStateChangeNoFriends-false" value="false" />
+                        <label for="autoStateChangeNoFriends-false">
+                            {{ t('view.settings.general.automation.alone') }}
+                        </label>
+                    </div>
+                    <div class="flex items-center space-x-2">
+                        <RadioGroupItem id="autoStateChangeNoFriends-true" value="true" />
+                        <label for="autoStateChangeNoFriends-true">
+                            {{ t('view.settings.general.automation.no_friends') }}
+                        </label>
+                    </div>
+                </RadioGroup>
             </div>
             <div class="options-container-item">
                 <span class="name"
@@ -296,6 +308,7 @@
 
     import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../../../components/ui/select';
     import { useFavoriteStore, useGeneralSettingsStore, useVRCXUpdaterStore } from '../../../../stores';
+    import { RadioGroup, RadioGroupItem } from '../../../../components/ui/radio-group';
     import { ToggleGroup, ToggleGroupItem } from '../../../../components/ui/toggle-group';
     import { links } from '../../../../shared/constants';
     import { openExternalLink } from '../../../../shared/utils';
@@ -374,4 +387,11 @@
     function openOSSDialog() {
         ossDialog.value = true;
     }
+
+    function handleAutoStateChangeNoFriendsRadio(value) {
+        const nextValue = value === 'true';
+        if (nextValue !== autoStateChangeNoFriends.value) {
+            setAutoStateChangeNoFriends();
+        }
+    }
 </script>

src/views/Settings/components/WristOverlaySettings.vue

@@ -43,33 +43,43 @@
             " />
         <div class="options-container-item" style="min-width: 118px">
             <span class="name">{{ t('view.settings.wrist_overlay.steamvr_wrist_overlay.start_overlay_with') }}</span>
-            <el-radio-group
-                :model-value="openVRAlways"
+            <RadioGroup
+                :model-value="openVRAlways ? 'true' : 'false'"
                 :disabled="!openVR"
-                @change="
-                    setOpenVRAlways();
-                    saveOpenVROption();
-                ">
-                <el-radio :value="false">{{ 'VRChat' }}</el-radio>
-                <el-radio :value="true">{{ 'SteamVR' }}</el-radio>
-            </el-radio-group>
+                class="gap-2"
+                style="margin-top: 8px"
+                @update:modelValue="handleOpenVRAlwaysRadio">
+                <div class="flex items-center space-x-2">
+                    <RadioGroupItem id="openVRAlways-false" value="false" />
+                    <label for="openVRAlways-false">{{ 'VRChat' }}</label>
+                </div>
+                <div class="flex items-center space-x-2">
+                    <RadioGroupItem id="openVRAlways-true" value="true" />
+                    <label for="openVRAlways-true">{{ 'SteamVR' }}</label>
+                </div>
+            </RadioGroup>
         </div>
         <div class="options-container-item">
             <span class="name">{{ t('view.settings.wrist_overlay.steamvr_wrist_overlay.overlay_button') }}</span>
-            <el-radio-group
-                :model-value="overlaybutton"
+            <RadioGroup
+                :model-value="overlaybutton ? 'true' : 'false'"
                 :disabled="!openVR || !overlayWrist"
-                @change="
-                    setOverlaybutton();
-                    saveOpenVROption();
-                ">
-                <el-radio :value="false">{{
-                    t('view.settings.wrist_overlay.steamvr_wrist_overlay.overlay_button_grip')
-                }}</el-radio>
-                <el-radio :value="true">{{
-                    t('view.settings.wrist_overlay.steamvr_wrist_overlay.overlay_button_menu')
-                }}</el-radio>
-            </el-radio-group>
+                class="gap-2"
+                style="margin-top: 8px"
+                @update:modelValue="handleOverlayButtonRadio">
+                <div class="flex items-center space-x-2">
+                    <RadioGroupItem id="overlaybutton-false" value="false" />
+                    <label for="overlaybutton-false">{{
+                        t('view.settings.wrist_overlay.steamvr_wrist_overlay.overlay_button_grip')
+                    }}</label>
+                </div>
+                <div class="flex items-center space-x-2">
+                    <RadioGroupItem id="overlaybutton-true" value="true" />
+                    <label for="overlaybutton-true">{{
+                        t('view.settings.wrist_overlay.steamvr_wrist_overlay.overlay_button_menu')
+                    }}</label>
+                </div>
+            </RadioGroup>
         </div>
         <div class="options-container-item">
             <span class="name">{{ t('view.settings.wrist_overlay.steamvr_wrist_overlay.display_overlay_on') }}</span>
@@ -151,6 +161,7 @@
     import { useI18n } from 'vue-i18n';
 
     import { useNotificationsSettingsStore, useVrStore, useWristOverlaySettingsStore } from '../../../stores';
+    import { RadioGroup, RadioGroupItem } from '../../../components/ui/radio-group';
     import { ToggleGroup, ToggleGroupItem } from '../../../components/ui/toggle-group';
 
     import SimpleSwitch from './SimpleSwitch.vue';
@@ -194,4 +205,20 @@
     } = wristOverlaySettingsStore;
 
     const { saveOpenVROption } = useVrStore();
+
+    function handleOpenVRAlwaysRadio(value) {
+        const nextValue = value === 'true';
+        if (nextValue !== openVRAlways.value) {
+            setOpenVRAlways();
+            saveOpenVROption();
+        }
+    }
+
+    function handleOverlayButtonRadio(value) {
+        const nextValue = value === 'true';
+        if (nextValue !== overlaybutton.value) {
+            setOverlaybutton();
+            saveOpenVROption();
+        }
+    }
 </script>

src/views/Settings/dialogs/NotificationPositionDialog.vue

@@ -8,32 +8,73 @@
         <div style="font-size: 12px">
             {{ t('dialog.notification_position.description') }}
         </div>
-        <svg
-            version="1.1"
-            xmlns="http://www.w3.org/2000/svg"
-            xmlns:xlink="http://www.w3.org/1999/xlink"
-            x="0px"
-            y="0px"
-            viewBox="0 0 300 200"
-            style="margin-top: 15px"
-            xml:space="preserve"
-            class="notification-position">
-            <path
-                style="fill: black"
-                d="M291.89,5A3.11,3.11,0,0,1,295,8.11V160.64a3.11,3.11,0,0,1-3.11,3.11H8.11A3.11,3.11,0,0,1,5,160.64V8.11A3.11,3.11,0,0,1,8.11,5H291.89m0-5H8.11A8.11,8.11,0,0,0,0,8.11V160.64a8.11,8.11,0,0,0,8.11,8.11H291.89a8.11,8.11,0,0,0,8.11-8.11V8.11A8.11,8.11,0,0,0,291.89,0Z" />
-            <rect style="fill: #c4c4c4" x="5" y="5" width="290" height="158.75" rx="2.5" />
-        </svg>
-        <el-radio-group :model-value="notificationPosition" size="small" @change="changeNotificationPosition">
-            <el-radio value="topLeft" style="margin: 0; position: absolute; left: 35px; top: 120px">‎</el-radio>
-            <el-radio value="top" style="margin: 0; position: absolute; left: 195px; top: 120px">‎</el-radio>
-            <el-radio value="topRight" style="margin: 0; position: absolute; right: 25px; top: 120px">‎</el-radio>
-            <el-radio value="centerLeft" style="margin: 0; position: absolute; left: 35px; top: 200px">‎</el-radio>
-            <el-radio value="center" style="margin: 0; position: absolute; left: 195px; top: 200px">‎</el-radio>
-            <el-radio value="centerRight" style="margin: 0; position: absolute; right: 25px; top: 200px">‎</el-radio>
-            <el-radio value="bottomLeft" style="margin: 0; position: absolute; left: 35px; top: 280px">‎</el-radio>
-            <el-radio value="bottom" style="margin: 0; position: absolute; left: 195px; top: 280px">‎</el-radio>
-            <el-radio value="bottomRight" style="margin: 0; position: absolute; right: 25px; top: 280px">‎</el-radio>
-        </el-radio-group>
+        <div class="relative mx-auto mt-4 size-75">
+            <svg
+                version="1.1"
+                xmlns="http://www.w3.org/2000/svg"
+                xmlns:xlink="http://www.w3.org/1999/xlink"
+                x="0px"
+                y="0px"
+                viewBox="80 80 80 100"
+                style="margin-top: 24px"
+                xml:space="preserve"
+                class="absolute inset-0 size-full">
+                <path
+                    style="fill: black"
+                    d="M291.89,5A3.11,3.11,0,0,1,295,8.11V160.64a3.11,3.11,0,0,1-3.11,3.11H8.11A3.11,3.11,0,0,1,5,160.64V8.11A3.11,3.11,0,0,1,8.11,5H291.89m0-5H8.11A8.11,8.11,0,0,0,0,8.11V160.64a8.11,8.11,0,0,0,8.11,8.11H291.89a8.11,8.11,0,0,0,8.11-8.11V8.11A8.11,8.11,0,0,0,291.89,0Z" />
+                <rect style="fill: #c4c4c4" x="5" y="5" width="290" height="158.75" rx="2.5" />
+            </svg>
+            <RadioGroup
+                :model-value="notificationPosition"
+                class="absolute inset-0"
+                @update:modelValue="changeNotificationPosition">
+                <RadioGroupItem
+                    id="notificationPosition-topLeft"
+                    aria-label="topLeft"
+                    value="topLeft"
+                    class="absolute top-[20%] left-[10%] -translate-x-1/2 -translate-y-1/2" />
+                <RadioGroupItem
+                    id="notificationPosition-top"
+                    aria-label="top"
+                    value="top"
+                    class="absolute top-[20%] left-1/2 -translate-x-1/2 -translate-y-1/2" />
+                <RadioGroupItem
+                    id="notificationPosition-topRight"
+                    aria-label="topRight"
+                    value="topRight"
+                    class="absolute top-[20%] left-[90%] -translate-x-1/2 -translate-y-1/2" />
+                <RadioGroupItem
+                    id="notificationPosition-centerLeft"
+                    aria-label="centerLeft"
+                    value="centerLeft"
+                    class="absolute top-1/2 left-[10%] -translate-x-1/2 -translate-y-1/2" />
+                <RadioGroupItem
+                    id="notificationPosition-center"
+                    aria-label="center"
+                    value="center"
+                    class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2" />
+                <RadioGroupItem
+                    id="notificationPosition-centerRight"
+                    aria-label="centerRight"
+                    value="centerRight"
+                    class="absolute top-1/2 left-[90%] -translate-x-1/2 -translate-y-1/2" />
+                <RadioGroupItem
+                    id="notificationPosition-bottomLeft"
+                    aria-label="bottomLeft"
+                    value="bottomLeft"
+                    class="absolute top-[80%] left-[10%] -translate-x-1/2 -translate-y-1/2" />
+                <RadioGroupItem
+                    id="notificationPosition-bottom"
+                    aria-label="bottom"
+                    value="bottom"
+                    class="absolute top-[80%] left-1/2 -translate-x-1/2 -translate-y-1/2" />
+                <RadioGroupItem
+                    id="notificationPosition-bottomRight"
+                    aria-label="bottomRight"
+                    value="bottomRight"
+                    class="absolute top-[80%] left-[90%] -translate-x-1/2 -translate-y-1/2" />
+            </RadioGroup>
+        </div>
 
         <template #footer>
             <div style="display: flex">
@@ -49,6 +90,7 @@
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
 
+    import { RadioGroup, RadioGroupItem } from '../../../components/ui/radio-group';
     import { useNotificationsSettingsStore } from '../../../stores';
 
     const { t } = useI18n();