Add Nc prefix to Nc vue component names

Signed-off-by: Vincent Petry <vincent@nextcloud.com>

66 files changed, 737 insertions, 724 deletions

diff --git a/apps/comments/src/components/Comment.vue b/apps/comments/src/components/Comment.vue
index 8e4a0d15ff0..41284e50ca9 100644
--- a/apps/comments/src/components/Comment.vue
+++ b/apps/comments/src/components/Comment.vue
@@ -26,7 +26,7 @@
 		<!-- Comment header toolbar -->
 		<div class="comment__header">
 			<!-- Author -->
-			<Avatar class="comment__avatar"
+			<NcAvatar class="comment__avatar"
 				:display-name="actorDisplayName"
 				:user="actorId"
 				:size="32" />
@@ -34,27 +34,27 @@
 
 			<!-- Comment actions,
 				show if we have a message id and current user is author -->
-			<Actions v-if="isOwnComment && id && !loading" class="comment__actions">
+			<NcActions v-if="isOwnComment && id && !loading" class="comment__actions">
 				<template v-if="!editing">
-					<ActionButton :close-after-click="true"
+					<NcActionButton :close-after-click="true"
 						icon="icon-rename"
 						@click="onEdit">
 						{{ t('comments', 'Edit comment') }}
-					</ActionButton>
-					<ActionSeparator />
-					<ActionButton :close-after-click="true"
+					</NcActionButton>
+					<NcActionSeparator />
+					<NcActionButton :close-after-click="true"
 						icon="icon-delete"
 						@click="onDeleteWithUndo">
 						{{ t('comments', 'Delete comment') }}
-					</ActionButton>
+					</NcActionButton>
 				</template>
 
-				<ActionButton v-else
+				<NcActionButton v-else
 					icon="icon-close"
 					@click="onEditCancel">
 					{{ t('comments', 'Cancel edit') }}
-				</ActionButton>
-			</Actions>
+				</NcActionButton>
+			</NcActions>
 
 			<!-- Show loading if we're editing or deleting, not on new ones -->
 			<div v-if="id && loading" class="comment_loading icon-loading-small" />
@@ -65,13 +65,13 @@
 
 		<!-- Message editor -->
 		<div v-if="editor || editing" class="comment__editor ">
-			<RichContenteditable ref="editor"
+			<NcRichContenteditable ref="editor"
 				:auto-complete="autoComplete"
 				:contenteditable="!loading"
 				:value="localMessage"
 				@update:value="updateLocalMessage"
 				@submit="onSubmit" />
-			<ButtonVue class="comment__submit"
+			<NcButton class="comment__submit"
 				type="tertiary-no-background"
 				native-type="submit"
 				:aria-label="t('comments', 'Post comment')"
@@ -81,7 +81,7 @@
 					<span v-if="loading" class="icon-loading-small" />
 					<ArrowRight v-else :size="20" />
 				</template>
-			</ButtonVue>
+			</NcButton>
 		</div>
 
 		<!-- Message content -->
@@ -99,12 +99,12 @@
 import { getCurrentUser } from '@nextcloud/auth'
 import moment from '@nextcloud/moment'
 
-import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
-import Actions from '@nextcloud/vue/dist/Components/Actions'
-import ActionSeparator from '@nextcloud/vue/dist/Components/ActionSeparator'
-import Avatar from '@nextcloud/vue/dist/Components/Avatar'
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue'
-import RichContenteditable from '@nextcloud/vue/dist/Components/RichContenteditable'
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
+import NcActions from '@nextcloud/vue/dist/Components/NcActions'
+import NcActionSeparator from '@nextcloud/vue/dist/Components/NcActionSeparator'
+import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton'
+import NcRichContenteditable from '@nextcloud/vue/dist/Components/NcRichContenteditable'
 import RichEditorMixin from '@nextcloud/vue/dist/Mixins/richEditor'
 import ArrowRight from 'vue-material-design-icons/ArrowRight'
 
@@ -115,14 +115,14 @@ export default {
 	name: 'Comment',
 
 	components: {
-		ActionButton,
-		Actions,
-		ActionSeparator,
+		NcActionButton,
+		NcActions,
+		NcActionSeparator,
 		ArrowRight,
-		Avatar,
-		ButtonVue,
+		NcAvatar,
+		NcButton,
 		Moment,
-		RichContenteditable,
+		NcRichContenteditable,
 	},
 	mixins: [RichEditorMixin, CommentMixin],
 
diff --git a/apps/comments/src/views/Comments.vue b/apps/comments/src/views/Comments.vue
index c101c2c5c39..ce887d6977c 100644
--- a/apps/comments/src/views/Comments.vue
+++ b/apps/comments/src/views/Comments.vue
@@ -31,9 +31,9 @@
 			@new="onNewComment" />
 
 		<template v-if="!isFirstLoading">
-			<EmptyContent v-if="!hasComments && done" icon="icon-comment">
+			<NcEmptyContent v-if="!hasComments && done" icon="icon-comment">
 				{{ t('comments', 'No comments yet, start the conversation!') }}
-			</EmptyContent>
+			</NcEmptyContent>
 
 			<!-- Comments -->
 			<Comment v-for="comment in comments"
@@ -55,14 +55,14 @@
 			</div>
 
 			<!-- Error message -->
-			<EmptyContent v-else-if="error" class="comments__error" icon="icon-error">
+			<NcEmptyContent v-else-if="error" class="comments__error" icon="icon-error">
 				{{ error }}
 				<template #desc>
 					<button icon="icon-history" @click="getComments">
 						{{ t('comments', 'Retry') }}
 					</button>
 				</template>
-			</EmptyContent>
+			</NcEmptyContent>
 		</template>
 	</div>
 </template>
@@ -75,7 +75,7 @@ import axios from '@nextcloud/axios'
 import VTooltip from 'v-tooltip'
 import Vue from 'vue'
 
-import EmptyContent from '@nextcloud/vue/dist/Components/EmptyContent'
+import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent'
 
 import Comment from '../components/Comment'
 import getComments, { DEFAULT_LIMIT } from '../services/GetComments'
@@ -89,7 +89,7 @@ export default {
 	components: {
 		// Avatar,
 		Comment,
-		EmptyContent,
+		NcEmptyContent,
 	},
 
 	data() {
diff --git a/apps/dashboard/src/DashboardApp.vue b/apps/dashboard/src/DashboardApp.vue
index f564ec3cf5d..32e3c332cb3 100644
--- a/apps/dashboard/src/DashboardApp.vue
+++ b/apps/dashboard/src/DashboardApp.vue
@@ -28,15 +28,15 @@
 		</Draggable>
 
 		<div class="footer">
-			<ButtonVue @click="showModal">
+			<NcButton @click="showModal">
 				<template #icon>
 					<Pencil :size="20" />
 				</template>
 				{{ t('dashboard', 'Customize') }}
-			</ButtonVue>
+			</NcButton>
 		</div>
 
-		<Modal v-if="modal" size="large" @close="closeModal">
+		<NcModal v-if="modal" size="large" @close="closeModal">
 			<div class="modal__content">
 				<h3>{{ t('dashboard', 'Edit widgets') }}</h3>
 				<ol class="panels">
@@ -88,7 +88,7 @@
 					<a href="https://www.opentopodata.org/#public-api" target="_blank" rel="noopener">{{ t('dashboard', 'elevation data from OpenTopoData') }}</a>.
 				</p>
 			</div>
-		</Modal>
+		</NcModal>
 	</div>
 </template>
 
@@ -97,9 +97,9 @@ import { generateUrl } from '@nextcloud/router'
 import { getCurrentUser } from '@nextcloud/auth'
 import { loadState } from '@nextcloud/initial-state'
 import axios from '@nextcloud/axios'
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton'
 import Draggable from 'vuedraggable'
-import Modal from '@nextcloud/vue/dist/Components/Modal'
+import NcModal from '@nextcloud/vue/dist/Components/NcModal'
 import Pencil from 'vue-material-design-icons/Pencil.vue'
 import Vue from 'vue'
 
@@ -129,9 +129,9 @@ export default {
 	name: 'DashboardApp',
 	components: {
 		BackgroundSettings,
-		ButtonVue,
+		NcButton,
 		Draggable,
-		Modal,
+		NcModal,
 		Pencil,
 	},
 	mixins: [
diff --git a/apps/dav/src/views/Availability.vue b/apps/dav/src/views/Availability.vue
index 5f616fe05d1..4a66dc383c2 100644
--- a/apps/dav/src/views/Availability.vue
+++ b/apps/dav/src/views/Availability.vue
@@ -1,12 +1,12 @@
 <template>
-	<SettingsSection :title="$t('dav', 'Availability')"
+	<NcSettingsSection :title="$t('dav', 'Availability')"
 		:description="$t('dav', 'If you configure your working hours, other users will see when you are out of office when they book a meeting.')">
 		<div class="time-zone">
 			<strong>
 				{{ $t('dav', 'Time zone:') }}
 			</strong>
 			<span class="time-zone-text">
-				<TimezonePicker v-model="timezone" />
+				<NcTimezonePicker v-model="timezone" />
 			</span>
 		</div>
 
@@ -24,16 +24,16 @@
 			:l10n-saturday="$t('dav', 'Saturday')"
 			:l10n-sunday="$t('dav', 'Sunday')" />
 
-		<CheckboxRadioSwitch :checked.sync="automated">
+		<NcCheckboxRadioSwitch :checked.sync="automated">
 			{{ $t('dav', 'Automatically set user status to "Do not disturb" outside of availability to mute all notifications.') }}
-		</CheckboxRadioSwitch>
+		</NcCheckboxRadioSwitch>
 
-		<ButtonVue :disabled="loading || saving"
+		<NcButton :disabled="loading || saving"
 			type="primary"
 			@click="save">
 			{{ $t('dav', 'Save') }}
-		</ButtonVue>
-	</SettingsSection>
+		</NcButton>
+	</NcSettingsSection>
 </template>
 
 <script>
@@ -53,19 +53,19 @@ import {
 	disableUserStatusAutomation,
 } from '../service/PreferenceService'
 import jstz from 'jstimezonedetect'
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue'
-import CheckboxRadioSwitch from '@nextcloud/vue/dist/Components/CheckboxRadioSwitch'
-import SettingsSection from '@nextcloud/vue/dist/Components/SettingsSection'
-import TimezonePicker from '@nextcloud/vue/dist/Components/TimezonePicker'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton'
+import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch'
+import NcSettingsSection from '@nextcloud/vue/dist/Components/NcSettingsSection'
+import NcTimezonePicker from '@nextcloud/vue/dist/Components/NcTimezonePicker'
 
 export default {
 	name: 'Availability',
 	components: {
-		ButtonVue,
-		CheckboxRadioSwitch,
+		NcButton,
+		NcCheckboxRadioSwitch,
 		CalendarAvailability,
-		SettingsSection,
-		TimezonePicker,
+		NcSettingsSection,
+		NcTimezonePicker,
 	},
 	data() {
 		// Try to determine the current timezone, and fall back to UTC otherwise
diff --git a/apps/dav/src/views/CalDavSettings.vue b/apps/dav/src/views/CalDavSettings.vue
index 714fc9a4d32..776f32bff36 100644
--- a/apps/dav/src/views/CalDavSettings.vue
+++ b/apps/dav/src/views/CalDavSettings.vue
@@ -1,5 +1,5 @@
 <template>
-	<SettingsSection :title="$t('dav', 'Calendar server')"
+	<NcSettingsSection :title="$t('dav', 'Calendar server')"
 		:doc-url="userSyncCalendarsDocUrl">
 		<!-- Can use v-html as:
 			- $t passes the translated string through DOMPurify.sanitize,
@@ -7,11 +7,11 @@
 		<!-- eslint-disable-next-line vue/no-v-html -->
 		<p class="settings-hint" v-html="hint" />
 		<p>
-			<CheckboxRadioSwitch id="caldavSendInvitations"
+			<NcCheckboxRadioSwitch id="caldavSendInvitations"
 				:checked.sync="sendInvitations"
 				type="switch">
 				{{ $t('dav', 'Send invitations to attendees') }}
-			</CheckboxRadioSwitch>
+			</NcCheckboxRadioSwitch>
 			<!-- Can use v-html as:
 				- $t passes the translated string through DOMPurify.sanitize,
 				- replacement strings are not user-controlled. -->
@@ -19,12 +19,12 @@
 			<em v-html="sendInvitationsHelpText" />
 		</p>
 		<p>
-			<CheckboxRadioSwitch id="caldavGenerateBirthdayCalendar"
+			<NcCheckboxRadioSwitch id="caldavGenerateBirthdayCalendar"
 				:checked.sync="generateBirthdayCalendar"
 				type="switch"
 				class="checkbox">
 				{{ $t('dav', 'Automatically generate a birthday calendar') }}
-			</CheckboxRadioSwitch>
+			</NcCheckboxRadioSwitch>
 			<em>
 				{{ $t('dav', 'Birthday calendars will be generated by a background job.') }}
 			</em>
@@ -34,11 +34,11 @@
 			</em>
 		</p>
 		<p>
-			<CheckboxRadioSwitch id="caldavSendEventReminders"
+			<NcCheckboxRadioSwitch id="caldavSendEventReminders"
 				:checked.sync="sendEventReminders"
 				type="switch">
 				{{ $t('dav', 'Send notifications for events') }}
-			</CheckboxRadioSwitch>
+			</NcCheckboxRadioSwitch>
 			<!-- Can use v-html as:
 				- $t passes the translated string through DOMPurify.sanitize,
 				- replacement strings are not user-controlled. -->
@@ -50,41 +50,41 @@
 			</em>
 		</p>
 		<p class="indented">
-			<CheckboxRadioSwitch id="caldavSendEventRemindersToSharedGroupMembers"
+			<NcCheckboxRadioSwitch id="caldavSendEventRemindersToSharedGroupMembers"
 				:checked.sync="sendEventRemindersToSharedGroupMembers"
 				type="switch"
 				:disabled="!sendEventReminders">
 				{{ $t('dav', 'Send reminder notifications to calendar sharees as well' ) }}
-			</CheckboxRadioSwitch>
+			</NcCheckboxRadioSwitch>
 			<em>
 				{{ $t('dav', 'Reminders are always sent to organizers and attendees.' ) }}
 			</em>
 		</p>
 		<p class="indented">
-			<CheckboxRadioSwitch id="caldavSendEventRemindersPush"
+			<NcCheckboxRadioSwitch id="caldavSendEventRemindersPush"
 				:checked.sync="sendEventRemindersPush"
 				type="switch"
 				:disabled="!sendEventReminders">
 				{{ $t('dav', 'Enable notifications for events via push') }}
-			</CheckboxRadioSwitch>
+			</NcCheckboxRadioSwitch>
 		</p>
-	</SettingsSection>
+	</NcSettingsSection>
 </template>
 
 <script>
 import axios from '@nextcloud/axios'
 import { generateUrl } from '@nextcloud/router'
 import { loadState } from '@nextcloud/initial-state'
-import SettingsSection from '@nextcloud/vue/dist/Components/SettingsSection'
-import CheckboxRadioSwitch from '@nextcloud/vue/dist/Components/CheckboxRadioSwitch'
+import NcSettingsSection from '@nextcloud/vue/dist/Components/NcSettingsSection'
+import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch'
 
 const userSyncCalendarsDocUrl = loadState('dav', 'userSyncCalendarsDocUrl', '#')
 
 export default {
 	name: 'CalDavSettings',
 	components: {
-		CheckboxRadioSwitch,
-		SettingsSection,
+		NcCheckboxRadioSwitch,
+		NcSettingsSection,
 	},
 	data() {
 		return {
diff --git a/apps/federatedfilesharing/src/components/AdminSettings.vue b/apps/federatedfilesharing/src/components/AdminSettings.vue
index b3fb2a7675b..e3b9d4186a7 100644
--- a/apps/federatedfilesharing/src/components/AdminSettings.vue
+++ b/apps/federatedfilesharing/src/components/AdminSettings.vue
@@ -21,52 +21,52 @@
 -->
 
 <template>
-	<SettingsSection :title="t('federatedfilesharing', 'Federated Cloud Sharing')"
+	<NcSettingsSection :title="t('federatedfilesharing', 'Federated Cloud Sharing')"
 		:description="t('federatedfilesharing', 'Adjust how people can share between servers. This includes shares between users on this server as well if they are using federated sharing.')"
 		:doc-url="sharingFederatedDocUrl">
-		<CheckboxRadioSwitch type="switch"
+		<NcCheckboxRadioSwitch type="switch"
 			:checked.sync="outgoingServer2serverShareEnabled"
 			@update:checked="update('outgoing_server2server_share_enabled', outgoingServer2serverShareEnabled)">
 			{{ t('federatedfilesharing', 'Allow users on this server to send shares to other servers (this option also allows WebDAV access to public shares)') }}
-		</CheckboxRadioSwitch>
+		</NcCheckboxRadioSwitch>
 
-		<CheckboxRadioSwitch type="switch"
+		<NcCheckboxRadioSwitch type="switch"
 			:checked.sync="incomingServer2serverShareEnabled"
 			@update:checked="update('incoming_server2server_share_enabled', incomingServer2serverShareEnabled)">
 			{{ t('federatedfilesharing', 'Allow users on this server to receive shares from other servers') }}
-		</CheckboxRadioSwitch>
+		</NcCheckboxRadioSwitch>
 
-		<CheckboxRadioSwitch v-if="federatedGroupSharingSupported"
+		<NcCheckboxRadioSwitch v-if="federatedGroupSharingSupported"
 			type="switch"
 			:checked.sync="outgoingServer2serverGroupShareEnabled"
 			@update:checked="update('outgoing_server2server_group_share_enabled', outgoingServer2serverGroupShareEnabled)">
 			{{ t('federatedfilesharing', 'Allow users on this server to send shares to groups on other servers') }}
-		</CheckboxRadioSwitch>
+		</NcCheckboxRadioSwitch>
 
-		<CheckboxRadioSwitch v-if="federatedGroupSharingSupported"
+		<NcCheckboxRadioSwitch v-if="federatedGroupSharingSupported"
 			type="switch"
 			:checked.sync="incomingServer2serverGroupShareEnabled"
 			@update:checked="update('incoming_server2server_group_share_enabled', incomingServer2serverGroupShareEnabled)">
 			{{ t('federatedfilesharing', 'Allow users on this server to receive group shares from other servers') }}
-		</CheckboxRadioSwitch>
+		</NcCheckboxRadioSwitch>
 
-		<CheckboxRadioSwitch type="switch"
+		<NcCheckboxRadioSwitch type="switch"
 			:checked.sync="lookupServerEnabled"
 			@update:checked="update('lookupServerEnabled', lookupServerEnabled)">
 			{{ t('federatedfilesharing', 'Search global and public address book for users') }}
-		</CheckboxRadioSwitch>
+		</NcCheckboxRadioSwitch>
 
-		<CheckboxRadioSwitch type="switch"
+		<NcCheckboxRadioSwitch type="switch"
 			:checked.sync="lookupServerUploadEnabled"
 			@update:checked="update('lookupServerUploadEnabled', lookupServerUploadEnabled)">
 			{{ t('federatedfilesharing', 'Allow users to publish their data to a global and public address book') }}
-		</CheckboxRadioSwitch>
-	</SettingsSection>
+		</NcCheckboxRadioSwitch>
+	</NcSettingsSection>
 </template>
 
 <script>
-import CheckboxRadioSwitch from '@nextcloud/vue/dist/Components/CheckboxRadioSwitch'
-import SettingsSection from '@nextcloud/vue/dist/Components/SettingsSection'
+import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch'
+import NcSettingsSection from '@nextcloud/vue/dist/Components/NcSettingsSection'
 import { loadState } from '@nextcloud/initial-state'
 import { showError } from '@nextcloud/dialogs'
 import axios from '@nextcloud/axios'
@@ -77,8 +77,8 @@ export default {
 	name: 'AdminSettings',
 
 	components: {
-		CheckboxRadioSwitch,
-		SettingsSection,
+		NcCheckboxRadioSwitch,
+		NcSettingsSection,
 	},
 
 	data() {
diff --git a/apps/federatedfilesharing/src/components/PersonalSettings.vue b/apps/federatedfilesharing/src/components/PersonalSettings.vue
index 81bf5f21a7f..640f2c68e0c 100644
--- a/apps/federatedfilesharing/src/components/PersonalSettings.vue
+++ b/apps/federatedfilesharing/src/components/PersonalSettings.vue
@@ -17,13 +17,13 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
-	<SettingsSection :title="t('federatedfilesharing', 'Federated Cloud')"
+	<NcSettingsSection :title="t('federatedfilesharing', 'Federated Cloud')"
 		:description="t('federatedfilesharing', 'You can share with anyone who uses a Nextcloud server or other Open Cloud Mesh (OCM) compatible servers and services! Just put their Federated Cloud ID in the share dialog. It looks like person@cloud.example.com')"
 		:doc-url="docUrlFederated">
 		<p class="cloud-id-text">
 			{{ t('federatedfilesharing', 'Your Federated Cloud ID:') }}
 			<strong id="cloudid">{{ cloudId }}</strong>
-			<ButtonVue ref="clipboard"
+			<NcButton ref="clipboard"
 				v-tooltip="copyLinkTooltip"
 				class="clipboard"
 				type="tertiary-no-background"
@@ -31,24 +31,24 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
 				<template #icon>
 					<Clipboard :size="20" />
 				</template>
-			</ButtonVue>
+			</NcButton>
 		</p>
 
 		<p class="social-button">
 			{{ t('federatedfilesharing', 'Share it so your friends can share files with you:') }}<br>
-			<ButtonVue @click="goTo(shareFacebookUrl)">
+			<NcButton @click="goTo(shareFacebookUrl)">
 				{{ t('federatedfilesharing', 'Facebook') }}
 				<template #icon>
 					<Facebook :size="20" />
 				</template>
-			</ButtonVue>
-			<ButtonVue @click="goTo(shareTwitterUrl)">
+			</NcButton>
+			<NcButton @click="goTo(shareTwitterUrl)">
 				{{ t('federatedfilesharing', 'Twitter') }}
 				<template #icon>
 					<Twitter :size="20" />
 				</template>
-			</ButtonVue>
-			<ButtonVue @click="goTo(shareDiasporaUrl)">
+			</NcButton>
+			<NcButton @click="goTo(shareDiasporaUrl)">
 				{{ t('federatedfilesharing', 'Diaspora') }}
 				<template #icon>
 					<svg width="20"
@@ -56,13 +56,13 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
 						viewBox="-10 -5 1034 1034"
 						xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M502 197q-96 0-96.5 1.5t-1.5 137-1.5 138-2 2.5T266 432.5 132.5 390t-30 94T74 578l232 77q21 8 21 10t-79.5 117.5T168 899t79.5 56.5T328 1011t81-110 82-110 41 55l83 115q43 60 44 60t79.5-58 79-59-76-112.5-76-113.5T795 632.5t129.5-44-28-94T867 400t-128 42-128.5 43-2.5-7.5-1-38.5l-3-108q-4-133-5-133.5t-97-.5z" /></svg>
 				</template>
-			</ButtonVue>
-			<ButtonVue @click="showHtml = !showHtml">
+			</NcButton>
+			<NcButton @click="showHtml = !showHtml">
 				<template #icon>
 					<Web :size="20" />
 				</template>
 				{{ t('federatedfilesharing', 'Add to your website') }}
-			</ButtonVue>
+			</NcButton>
 		</p>
 
 		<template v-if="showHtml">
@@ -82,14 +82,14 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
 				<pre>{{ htmlCode }}</pre>
 			</p>
 		</template>
-	</SettingsSection>
+	</NcSettingsSection>
 </template>
 
 <script>
 import { showError } from '@nextcloud/dialogs'
 import { loadState } from '@nextcloud/initial-state'
-import SettingsSection from '@nextcloud/vue/dist/Components/SettingsSection'
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue'
+import NcSettingsSection from '@nextcloud/vue/dist/Components/NcSettingsSection'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton'
 import Twitter from 'vue-material-design-icons/Twitter'
 import Facebook from 'vue-material-design-icons/Facebook'
 import Web from 'vue-material-design-icons/Web'
@@ -99,8 +99,8 @@ import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip'
 export default {
 	name: 'PersonalSettings',
 	components: {
-		ButtonVue,
-		SettingsSection,
+		NcButton,
+		NcSettingsSection,
 		Twitter,
 		Facebook,
 		Web,
diff --git a/apps/files/src/components/SidebarTab.vue b/apps/files/src/components/SidebarTab.vue
index ad80f91d431..c0f5a7d4416 100644
--- a/apps/files/src/components/SidebarTab.vue
+++ b/apps/files/src/components/SidebarTab.vue
@@ -21,30 +21,30 @@
   -
   -->
 <template>
-	<AppSidebarTab :id="id"
+	<NcAppSidebarTab :id="id"
 		ref="tab"
 		:name="name"
 		:icon="icon"
 		@bottomReached="onScrollBottomReached">
 		<!-- Fallback loading -->
-		<EmptyContent v-if="loading" icon="icon-loading" />
+		<NcEmptyContent v-if="loading" icon="icon-loading" />
 
 		<!-- Using a dummy div as Vue mount replace the element directly
 			It does NOT append to the content -->
 		<div ref="mount" />
-	</AppSidebarTab>
+	</NcAppSidebarTab>
 </template>
 
 <script>
-import AppSidebarTab from '@nextcloud/vue/dist/Components/AppSidebarTab'
-import EmptyContent from '@nextcloud/vue/dist/Components/EmptyContent'
+import NcAppSidebarTab from '@nextcloud/vue/dist/Components/NcAppSidebarTab'
+import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent'
 
 export default {
 	name: 'SidebarTab',
 
 	components: {
-		AppSidebarTab,
-		EmptyContent,
+		NcAppSidebarTab,
+		NcEmptyContent,
 	},
 
 	props: {
diff --git a/apps/files/src/components/TransferOwnershipDialogue.vue b/apps/files/src/components/TransferOwnershipDialogue.vue
index 90af77175af..67840b18829 100644
--- a/apps/files/src/components/TransferOwnershipDialogue.vue
+++ b/apps/files/src/components/TransferOwnershipDialogue.vue
@@ -25,19 +25,19 @@
 		<form @submit.prevent="submit">
 			<p class="transfer-select-row">
 				<span>{{ readableDirectory }}</span>
-				<ButtonVue v-if="directory === undefined" @click.prevent="start">
+				<NcButton v-if="directory === undefined" @click.prevent="start">
 					{{ t('files', 'Choose file or folder to transfer') }}
-				</ButtonVue>
-				<ButtonVue v-else @click.prevent="start">
+				</NcButton>
+				<NcButton v-else @click.prevent="start">
 					{{ t('files', 'Change') }}
-				</ButtonVue>
+				</NcButton>
 				<span class="error">{{ directoryPickerError }}</span>
 			</p>
 			<p class="new-owner-row">
 				<label for="targetUser">
 					<span>{{ t('files', 'New owner') }}</span>
 				</label>
-				<Multiselect id="targetUser"
+				<NcMultiselect id="targetUser"
 					v-model="selectedUser"
 					:options="formatedUserSuggestions"
 					:multiple="false"
@@ -70,9 +70,9 @@ import axios from '@nextcloud/axios'
 import debounce from 'debounce'
 import { generateOcsUrl } from '@nextcloud/router'
 import { getFilePickerBuilder, showSuccess } from '@nextcloud/dialogs'
-import Multiselect from '@nextcloud/vue/dist/Components/Multiselect'
+import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect'
 import Vue from 'vue'
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton'
 
 import logger from '../logger'
 
@@ -86,8 +86,8 @@ const picker = getFilePickerBuilder(t('files', 'Choose a file or folder to trans
 export default {
 	name: 'TransferOwnershipDialogue',
 	components: {
-		Multiselect,
-		ButtonVue,
+		NcMultiselect,
+		NcButton,
 	},
 	data() {
 		return {
diff --git a/apps/files/src/views/Sidebar.vue b/apps/files/src/views/Sidebar.vue
index 8fbf7a917f7..36ebef7d070 100644
--- a/apps/files/src/views/Sidebar.vue
+++ b/apps/files/src/views/Sidebar.vue
@@ -21,7 +21,7 @@
   -->
 
 <template>
-	<AppSidebar v-if="file"
+	<NcAppSidebar v-if="file"
 		ref="sidebar"
 		v-bind="appSidebar"
 		:force-menu="true"
@@ -45,18 +45,18 @@
 		<template v-if="fileInfo" #secondary-actions>
 			<!-- TODO: create proper api for apps to register actions
 			And inject themselves here. -->
-			<ActionButton v-if="isSystemTagsEnabled"
+			<NcActionButton v-if="isSystemTagsEnabled"
 				:close-after-click="true"
 				icon="icon-tag"
 				@click="toggleTags">
 				{{ t('files', 'Tags') }}
-			</ActionButton>
+			</NcActionButton>
 		</template>
 
 		<!-- Error display -->
-		<EmptyContent v-if="error" icon="icon-error">
+		<NcEmptyContent v-if="error" icon="icon-error">
 			{{ error }}
-		</EmptyContent>
+		</NcEmptyContent>
 
 		<!-- If fileInfo fetch is complete, render tabs -->
 		<template v-for="tab in tabs" v-else-if="fileInfo">
@@ -73,7 +73,7 @@
 				:on-scroll-bottom-reached="tab.scrollBottomReached"
 				:file-info="fileInfo" />
 		</template>
-	</AppSidebar>
+	</NcAppSidebar>
 </template>
 <script>
 import { encodePath } from '@nextcloud/paths'
@@ -83,9 +83,9 @@ import { emit } from '@nextcloud/event-bus'
 import moment from '@nextcloud/moment'
 import { Type as ShareTypes } from '@nextcloud/sharing'
 
-import AppSidebar from '@nextcloud/vue/dist/Components/AppSidebar'
-import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
-import EmptyContent from '@nextcloud/vue/dist/Components/EmptyContent'
+import NcAppSidebar from '@nextcloud/vue/dist/Components/NcAppSidebar'
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
+import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent'
 
 import FileInfo from '../services/FileInfo'
 import SidebarTab from '../components/SidebarTab'
@@ -95,9 +95,9 @@ export default {
 	name: 'Sidebar',
 
 	components: {
-		ActionButton,
-		AppSidebar,
-		EmptyContent,
+		NcActionButton,
+		NcAppSidebar,
+		NcEmptyContent,
 		LegacyView,
 		SidebarTab,
 	},
diff --git a/apps/files/src/views/TemplatePicker.vue b/apps/files/src/views/TemplatePicker.vue
index 6ba98b39800..3a1dc15b790 100644
--- a/apps/files/src/views/TemplatePicker.vue
+++ b/apps/files/src/views/TemplatePicker.vue
@@ -21,7 +21,7 @@
   -->
 
 <template>
-	<Modal v-if="opened"
+	<NcModal v-if="opened"
 		:clear-view-delay="-1"
 		class="templates-picker"
 		size="normal"
@@ -57,17 +57,17 @@
 			</div>
 		</form>
 
-		<EmptyContent v-if="loading" class="templates-picker__loading" icon="icon-loading">
+		<NcEmptyContent v-if="loading" class="templates-picker__loading" icon="icon-loading">
 			{{ t('files', 'Creating file') }}
-		</EmptyContent>
-	</Modal>
+		</NcEmptyContent>
+	</NcModal>
 </template>
 
 <script>
 import { normalize } from 'path'
 import { showError } from '@nextcloud/dialogs'
-import EmptyContent from '@nextcloud/vue/dist/Components/EmptyContent'
-import Modal from '@nextcloud/vue/dist/Components/Modal'
+import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent'
+import NcModal from '@nextcloud/vue/dist/Components/NcModal'
 
 import { getCurrentDirectory } from '../utils/davUtils'
 import { createFromTemplate, getTemplates } from '../services/Templates'
@@ -81,8 +81,8 @@ export default {
 	name: 'TemplatePicker',
 
 	components: {
-		EmptyContent,
-		Modal,
+		NcEmptyContent,
+		NcModal,
 		TemplatePreview,
 	},
 
diff --git a/apps/files_sharing/src/collaborationresources.js b/apps/files_sharing/src/collaborationresources.js
index c1849939057..1e6eda02a93 100644
--- a/apps/files_sharing/src/collaborationresources.js
+++ b/apps/files_sharing/src/collaborationresources.js
@@ -23,7 +23,7 @@
 
 import Vue from 'vue'
 import Vuex from 'vuex'
-import PopoverMenu from '@nextcloud/vue/dist/Components/PopoverMenu'
+import NcPopoverMenu from '@nextcloud/vue/dist/Components/NcPopoverMenu'
 import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip'
 import ClickOutside from 'vue-click-outside'
 
@@ -33,7 +33,7 @@ Vue.prototype.t = t
 Tooltip.options.defaultHtml = false
 
 // eslint-disable-next-line vue/match-component-file-name
-Vue.component('PopoverMenu', PopoverMenu)
+Vue.component('NcPopoverMenu', NcPopoverMenu)
 Vue.directive('ClickOutside', ClickOutside)
 Vue.directive('Tooltip', Tooltip)
 Vue.use(Vuex)
diff --git a/apps/files_sharing/src/components/SharePermissionsEditor.vue b/apps/files_sharing/src/components/SharePermissionsEditor.vue
index 4885f9fb920..c5e652b2cda 100644
--- a/apps/files_sharing/src/components/SharePermissionsEditor.vue
+++ b/apps/files_sharing/src/components/SharePermissionsEditor.vue
@@ -24,79 +24,79 @@
 	<li>
 		<ul>
 			<!-- file -->
-			<ActionCheckbox v-if="!isFolder"
+			<NcActionCheckbox v-if="!isFolder"
 				:checked="shareHasPermissions(atomicPermissions.UPDATE)"
 				:disabled="saving"
 				@update:checked="toggleSharePermissions(atomicPermissions.UPDATE)">
 				{{ t('files_sharing', 'Allow editing') }}
-			</ActionCheckbox>
+			</NcActionCheckbox>
 
 			<!-- folder -->
 			<template v-if="isFolder && fileHasCreatePermission && config.isPublicUploadEnabled">
 				<template v-if="!showCustomPermissionsForm">
-					<ActionRadio :checked="sharePermissionEqual(bundledPermissions.READ_ONLY)"
+					<NcActionRadio :checked="sharePermissionEqual(bundledPermissions.READ_ONLY)"
 						:value="bundledPermissions.READ_ONLY"
 						:name="randomFormName"
 						:disabled="saving"
 						@change="setSharePermissions(bundledPermissions.READ_ONLY)">
 						{{ t('files_sharing', 'Read only') }}
-					</ActionRadio>
+					</NcActionRadio>
 
-					<ActionRadio :checked="sharePermissionEqual(bundledPermissions.UPLOAD_AND_UPDATE)"
+					<NcActionRadio :checked="sharePermissionEqual(bundledPermissions.UPLOAD_AND_UPDATE)"
 						:value="bundledPermissions.UPLOAD_AND_UPDATE"
 						:disabled="saving"
 						:name="randomFormName"
 						@change="setSharePermissions(bundledPermissions.UPLOAD_AND_UPDATE)">
 						{{ t('files_sharing', 'Allow upload and editing') }}
-					</ActionRadio>
-					<ActionRadio :checked="sharePermissionEqual(bundledPermissions.FILE_DROP)"
+					</NcActionRadio>
+					<NcActionRadio :checked="sharePermissionEqual(bundledPermissions.FILE_DROP)"
 						:value="bundledPermissions.FILE_DROP"
 						:disabled="saving"
 						:name="randomFormName"
 						class="sharing-entry__action--public-upload"
 						@change="setSharePermissions(bundledPermissions.FILE_DROP)">
 						{{ t('files_sharing', 'File drop (upload only)') }}
-					</ActionRadio>
+					</NcActionRadio>
 
 					<!-- custom permissions button -->
-					<ActionButton :title="t('files_sharing', 'Custom permissions')"
+					<NcActionButton :title="t('files_sharing', 'Custom permissions')"
 						@click="showCustomPermissionsForm = true">
 						<template #icon>
 							<Tune />
 						</template>
 						{{ sharePermissionsIsBundle ? "" : sharePermissionsSummary }}
-					</ActionButton>
+					</NcActionButton>
 				</template>
 
 				<!-- custom permissions -->
 				<span v-else :class="{error: !sharePermissionsSetIsValid}">
-					<ActionCheckbox :checked="shareHasPermissions(atomicPermissions.READ)"
+					<NcActionCheckbox :checked="shareHasPermissions(atomicPermissions.READ)"
 						:disabled="saving || !canToggleSharePermissions(atomicPermissions.READ)"
 						@update:checked="toggleSharePermissions(atomicPermissions.READ)">
 						{{ t('files_sharing', 'Read') }}
-					</ActionCheckbox>
-					<ActionCheckbox :checked="shareHasPermissions(atomicPermissions.CREATE)"
+					</NcActionCheckbox>
+					<NcActionCheckbox :checked="shareHasPermissions(atomicPermissions.CREATE)"
 						:disabled="saving || !canToggleSharePermissions(atomicPermissions.CREATE)"
 						@update:checked="toggleSharePermissions(atomicPermissions.CREATE)">
 						{{ t('files_sharing', 'Upload') }}
-					</ActionCheckbox>
-					<ActionCheckbox :checked="shareHasPermissions(atomicPermissions.UPDATE)"
+					</NcActionCheckbox>
+					<NcActionCheckbox :checked="shareHasPermissions(atomicPermissions.UPDATE)"
 						:disabled="saving || !canToggleSharePermissions(atomicPermissions.UPDATE)"
 						@update:checked="toggleSharePermissions(atomicPermissions.UPDATE)">
 						{{ t('files_sharing', 'Edit') }}
-					</ActionCheckbox>
-					<ActionCheckbox :checked="shareHasPermissions(atomicPermissions.DELETE)"
+					</NcActionCheckbox>
+					<NcActionCheckbox :checked="shareHasPermissions(atomicPermissions.DELETE)"
 						:disabled="saving || !canToggleSharePermissions(atomicPermissions.DELETE)"
 						@update:checked="toggleSharePermissions(atomicPermissions.DELETE)">
 						{{ t('files_sharing', 'Delete') }}
-					</ActionCheckbox>
+					</NcActionCheckbox>
 
-					<ActionButton @click="showCustomPermissionsForm = false">
+					<NcActionButton @click="showCustomPermissionsForm = false">
 						<template #icon>
 							<ChevronLeft />
 						</template>
 						{{ t('files_sharing', 'Bundled permissions') }}
-					</ActionButton>
+					</NcActionButton>
 				</span>
 			</template>
 		</ul>
@@ -104,9 +104,9 @@
 </template>
 
 <script>
-import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
-import ActionRadio from '@nextcloud/vue/dist/Components/ActionRadio'
-import ActionCheckbox from '@nextcloud/vue/dist/Components/ActionCheckbox'
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
+import NcActionRadio from '@nextcloud/vue/dist/Components/NcActionRadio'
+import NcActionCheckbox from '@nextcloud/vue/dist/Components/NcActionCheckbox'
 
 import SharesMixin from '../mixins/SharesMixin'
 import {
@@ -125,9 +125,9 @@ export default {
 	name: 'SharePermissionsEditor',
 
 	components: {
-		ActionButton,
-		ActionCheckbox,
-		ActionRadio,
+		NcActionButton,
+		NcActionCheckbox,
+		NcActionRadio,
 		Tune,
 		ChevronLeft,
 	},
diff --git a/apps/files_sharing/src/components/SharingEntry.vue b/apps/files_sharing/src/components/SharingEntry.vue
index 4748f75817b..c77bdd4292a 100644
--- a/apps/files_sharing/src/components/SharingEntry.vue
+++ b/apps/files_sharing/src/components/SharingEntry.vue
@@ -22,7 +22,7 @@
 
 <template>
 	<li class="sharing-entry">
-		<Avatar class="sharing-entry__avatar"
+		<NcAvatar class="sharing-entry__avatar"
 			:is-no-user="share.type !== SHARE_TYPES.SHARE_TYPE_USER"
 			:user="share.shareWith"
 			:display-name="share.shareWithDisplayName"
@@ -39,61 +39,61 @@
 				<span>{{ share.status.message || '' }}</span>
 			</p>
 		</component>
-		<Actions menu-align="right"
+		<NcActions menu-align="right"
 			class="sharing-entry__actions"
 			@close="onMenuClose">
 			<template v-if="share.canEdit">
 				<!-- edit permission -->
-				<ActionCheckbox ref="canEdit"
+				<NcActionCheckbox ref="canEdit"
 					:checked.sync="canEdit"
 					:value="permissionsEdit"
 					:disabled="saving || !canSetEdit">
 					{{ t('files_sharing', 'Allow editing') }}
-				</ActionCheckbox>
+				</NcActionCheckbox>
 
 				<!-- create permission -->
-				<ActionCheckbox v-if="isFolder"
+				<NcActionCheckbox v-if="isFolder"
 					ref="canCreate"
 					:checked.sync="canCreate"
 					:value="permissionsCreate"
 					:disabled="saving || !canSetCreate">
 					{{ t('files_sharing', 'Allow creating') }}
-				</ActionCheckbox>
+				</NcActionCheckbox>
 
 				<!-- delete permission -->
-				<ActionCheckbox v-if="isFolder"
+				<NcActionCheckbox v-if="isFolder"
 					ref="canDelete"
 					:checked.sync="canDelete"
 					:value="permissionsDelete"
 					:disabled="saving || !canSetDelete">
 					{{ t('files_sharing', 'Allow deleting') }}
-				</ActionCheckbox>
+				</NcActionCheckbox>
 
 				<!-- reshare permission -->
-				<ActionCheckbox v-if="config.isResharingAllowed"
+				<NcActionCheckbox v-if="config.isResharingAllowed"
 					ref="canReshare"
 					:checked.sync="canReshare"
 					:value="permissionsShare"
 					:disabled="saving || !canSetReshare">
 					{{ t('files_sharing', 'Allow resharing') }}
-				</ActionCheckbox>
+				</NcActionCheckbox>
 
-				<ActionCheckbox ref="canDownload"
+				<NcActionCheckbox ref="canDownload"
 					:checked.sync="canDownload"
 					v-if="isSetDownloadButtonVisible"
 					:disabled="saving || !canSetDownload">
 					{{ allowDownloadText }}
-				</ActionCheckbox>
+				</NcActionCheckbox>
 
 				<!-- expiration date -->
-				<ActionCheckbox :checked.sync="hasExpirationDate"
+				<NcActionCheckbox :checked.sync="hasExpirationDate"
 					:disabled="config.isDefaultInternalExpireDateEnforced || saving"
 					@uncheck="onExpirationDisable">
 					{{ config.isDefaultInternalExpireDateEnforced
 						? t('files_sharing', 'Expiration date enforced')
 						: t('files_sharing', 'Set expiration date') }}
-				</ActionCheckbox>
-				<ActionInput v-if="hasExpirationDate"
+				</NcActionCheckbox>
+				<NcActionInput v-if="hasExpirationDate"
 					ref="expireDate"
 					v-tooltip.auto="{
 						content: errors.expireDate,
@@ -110,16 +110,16 @@
 					:disabled-date="disabledDate"
 					@update:value="onExpirationChange">
 					{{ t('files_sharing', 'Enter a date') }}
-				</ActionInput>
+				</NcActionInput>
 
 				<!-- note -->
 				<template v-if="canHaveNote">
-					<ActionCheckbox :checked.sync="hasNote"
+					<NcActionCheckbox :checked.sync="hasNote"
 						:disabled="saving"
 						@uncheck="queueUpdate('note')">
 						{{ t('files_sharing', 'Note to recipient') }}
-					</ActionCheckbox>
-					<ActionTextEditable v-if="hasNote"
+					</NcActionCheckbox>
+					<NcActionTextEditable v-if="hasNote"
 						ref="note"
 						v-tooltip.auto="{
 							content: errors.note,
@@ -135,23 +135,23 @@
 				</template>
 			</template>
 
-			<ActionButton v-if="share.canDelete"
+			<NcActionButton v-if="share.canDelete"
 				icon="icon-close"
 				:disabled="saving"
 				@click.prevent="onDelete">
 				{{ t('files_sharing', 'Unshare') }}
-			</ActionButton>
-		</Actions>
+			</NcActionButton>
+		</NcActions>
 	</li>
 </template>
 
 <script>
-import Avatar from '@nextcloud/vue/dist/Components/Avatar'
-import Actions from '@nextcloud/vue/dist/Components/Actions'
-import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
-import ActionCheckbox from '@nextcloud/vue/dist/Components/ActionCheckbox'
-import ActionInput from '@nextcloud/vue/dist/Components/ActionInput'
-import ActionTextEditable from '@nextcloud/vue/dist/Components/ActionTextEditable'
+import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar'
+import NcActions from '@nextcloud/vue/dist/Components/NcActions'
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
+import NcActionCheckbox from '@nextcloud/vue/dist/Components/NcActionCheckbox'
+import NcActionInput from '@nextcloud/vue/dist/Components/NcActionInput'
+import NcActionTextEditable from '@nextcloud/vue/dist/Components/NcActionTextEditable'
 import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip'
 
 import SharesMixin from '../mixins/SharesMixin'
@@ -160,12 +160,12 @@ export default {
 	name: 'SharingEntry',
 
 	components: {
-		Actions,
-		ActionButton,
-		ActionCheckbox,
-		ActionInput,
-		ActionTextEditable,
-		Avatar,
+		NcActions,
+		NcActionButton,
+		NcActionCheckbox,
+		NcActionInput,
+		NcActionTextEditable,
+		NcAvatar,
 	},
 
 	directives: {
diff --git a/apps/files_sharing/src/components/SharingEntryInherited.vue b/apps/files_sharing/src/components/SharingEntryInherited.vue
index 72a513cfb1f..ff930f1aec8 100644
--- a/apps/files_sharing/src/components/SharingEntryInherited.vue
+++ b/apps/files_sharing/src/components/SharingEntryInherited.vue
@@ -25,34 +25,34 @@
 		class="sharing-entry__inherited"
 		:title="share.shareWithDisplayName">
 		<template #avatar>
-			<Avatar :user="share.shareWith"
+			<NcAvatar :user="share.shareWith"
 				:display-name="share.shareWithDisplayName"
 				class="sharing-entry__avatar"
 				tooltip-message="" />
 		</template>
-		<ActionText icon="icon-user">
+		<NcActionText icon="icon-user">
 			{{ t('files_sharing', 'Added by {initiator}', { initiator: share.ownerDisplayName }) }}
-		</ActionText>
-		<ActionLink v-if="share.viaPath && share.viaFileid"
+		</NcActionText>
+		<NcActionLink v-if="share.viaPath && share.viaFileid"
 			icon="icon-folder"
 			:href="viaFileTargetUrl">
 			{{ t('files_sharing', 'Via “{folder}”', {folder: viaFolderName} ) }}
-		</ActionLink>
-		<ActionButton v-if="share.canDelete"
+		</NcActionLink>
+		<NcActionButton v-if="share.canDelete"
 			icon="icon-close"
 			@click.prevent="onDelete">
 			{{ t('files_sharing', 'Unshare') }}
-		</actionbutton>
+		</NcActionButton>
 	</SharingEntrySimple>
 </template>
 
 <script>
 import { generateUrl } from '@nextcloud/router'
 import { basename } from '@nextcloud/paths'
-import Avatar from '@nextcloud/vue/dist/Components/Avatar'
-import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
-import ActionLink from '@nextcloud/vue/dist/Components/ActionLink'
-import ActionText from '@nextcloud/vue/dist/Components/ActionText'
+import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar'
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
+import NcActionLink from '@nextcloud/vue/dist/Components/NcActionLink'
+import NcActionText from '@nextcloud/vue/dist/Components/NcActionText'
 
 // eslint-disable-next-line no-unused-vars
 import Share from '../models/Share'
@@ -63,10 +63,10 @@ export default {
 	name: 'SharingEntryInherited',
 
 	components: {
-		ActionButton,
-		ActionLink,
-		ActionText,
-		Avatar,
+		NcActionButton,
+		NcActionLink,
+		NcActionText,
+		NcAvatar,
 		SharingEntrySimple,
 	},
 
diff --git a/apps/files_sharing/src/components/SharingEntryInternal.vue b/apps/files_sharing/src/components/SharingEntryInternal.vue
index c2dbc5a4edc..468275aac2c 100644
--- a/apps/files_sharing/src/components/SharingEntryInternal.vue
+++ b/apps/files_sharing/src/components/SharingEntryInternal.vue
@@ -8,28 +8,28 @@
 				<div class="avatar-external icon-external-white" />
 			</template>
 
-			<ActionLink ref="copyButton"
+			<NcActionLink ref="copyButton"
 				:href="internalLink"
 				:aria-label="t('files_sharing', 'Copy internal link to clipboard')"
 				target="_blank"
 				:icon="copied && copySuccess ? 'icon-checkmark-color' : 'icon-clippy'"
 				@click.prevent="copyLink">
 				{{ clipboardTooltip }}
-			</ActionLink>
+			</NcActionLink>
 		</SharingEntrySimple>
 	</ul>
 </template>
 
 <script>
 import { generateUrl } from '@nextcloud/router'
-import ActionLink from '@nextcloud/vue/dist/Components/ActionLink'
+import NcActionLink from '@nextcloud/vue/dist/Components/NcActionLink'
 import SharingEntrySimple from './SharingEntrySimple'
 
 export default {
 	name: 'SharingEntryInternal',
 
 	components: {
-		ActionLink,
+		NcActionLink,
 		SharingEntrySimple,
 	},
 
diff --git a/apps/files_sharing/src/components/SharingEntryLink.vue b/apps/files_sharing/src/components/SharingEntryLink.vue
index 328d0108332..07770e5a87c 100644
--- a/apps/files_sharing/src/components/SharingEntryLink.vue
+++ b/apps/files_sharing/src/components/SharingEntryLink.vue
@@ -22,7 +22,7 @@
 
 <template>
 	<li :class="{'sharing-entry--share': share}" class="sharing-entry sharing-entry__link">
-		<Avatar :is-no-user="true"
+		<NcAvatar :is-no-user="true"
 			:icon-class="isEmailShareType ? 'avatar-link-share icon-mail-white' : 'avatar-link-share icon-public-white'"
 			class="sharing-entry__avatar" />
 		<div class="sharing-entry__desc">
@@ -35,46 +35,46 @@
 		</div>
 
 		<!-- clipboard -->
-		<Actions v-if="share && !isEmailShareType && share.token"
+		<NcActions v-if="share && !isEmailShareType && share.token"
 			ref="copyButton"
 			class="sharing-entry__copy">
-			<ActionLink :href="shareLink"
+			<NcActionLink :href="shareLink"
 				target="_blank"
 				:aria-label="t('files_sharing', 'Copy public link to clipboard')"
 				:icon="copied && copySuccess ? 'icon-checkmark-color' : 'icon-clippy'"
 				@click.stop.prevent="copyLink">
 				{{ clipboardTooltip }}
-			</ActionLink>
-		</Actions>
+			</NcActionLink>
+		</NcActions>
 
 		<!-- pending actions -->
-		<Actions v-if="!pending && (pendingPassword || pendingExpirationDate)"
+		<NcActions v-if="!pending && (pendingPassword || pendingExpirationDate)"
 			class="sharing-entry__actions"
 			menu-align="right"
 			:open.sync="open"
 			@close="onNewLinkShare">
 			<!-- pending data menu -->
-			<ActionText v-if="errors.pending"
+			<NcActionText v-if="errors.pending"
 				icon="icon-error"
 				:class="{ error: errors.pending}">
 				{{ errors.pending }}
-			</ActionText>
-			<ActionText v-else icon="icon-info">
+			</NcActionText>
+			<NcActionText v-else icon="icon-info">
 				{{ t('files_sharing', 'Please enter the following required information before creating the share') }}
-			</ActionText>
+			</NcActionText>
 
 			<!-- password -->
-			<ActionText v-if="pendingPassword" icon="icon-password">
+			<NcActionText v-if="pendingPassword" icon="icon-password">
 				{{ t('files_sharing', 'Password protection (enforced)') }}
-			</ActionText>
-			<ActionCheckbox v-else-if="config.enableLinkPasswordByDefault"
+			</NcActionText>
+			<NcActionCheckbox v-else-if="config.enableLinkPasswordByDefault"
 				:checked.sync="isPasswordProtected"
 				:disabled="config.enforcePasswordForPublicLink || saving"
 				class="share-link-password-checkbox"
 				@uncheck="onPasswordDisable">
 				{{ t('files_sharing', 'Password protection') }}
-			</ActionCheckbox>
-			<ActionInput v-if="pendingPassword || share.password"
+			</NcActionCheckbox>
+			<NcActionInput v-if="pendingPassword || share.password"
 				v-tooltip.auto="{
 					content: errors.password,
 					show: errors.password,
@@ -90,13 +90,13 @@
 				autocomplete="new-password"
 				@submit="onNewLinkShare">
 				{{ t('files_sharing', 'Enter a password') }}
-			</ActionInput>
+			</NcActionInput>
 
 			<!-- expiration date -->
-			<ActionText v-if="pendingExpirationDate" icon="icon-calendar-dark">
+			<NcActionText v-if="pendingExpirationDate" icon="icon-calendar-dark">
 				{{ t('files_sharing', 'Expiration date (enforced)') }}
-			</ActionText>
-			<ActionInput v-if="pendingExpirationDate"
+			</NcActionText>
+			<NcActionInput v-if="pendingExpirationDate"
 				v-model="share.expireDate"
 				v-tooltip.auto="{
 					content: errors.expireDate,
@@ -115,18 +115,18 @@
 				<!-- let's not submit when picked, the user
 					might want to still edit or copy the password -->
 				{{ t('files_sharing', 'Enter a date') }}
-			</ActionInput>
+			</NcActionInput>
 
-			<ActionButton icon="icon-checkmark" @click.prevent.stop="onNewLinkShare">
+			<NcActionButton icon="icon-checkmark" @click.prevent.stop="onNewLinkShare">
 				{{ t('files_sharing', 'Create share') }}
-			</ActionButton>
-			<ActionButton icon="icon-close" @click.prevent.stop="onCancel">
+			</NcActionButton>
+			<NcActionButton icon="icon-close" @click.prevent.stop="onCancel">
 				{{ t('files_sharing', 'Cancel') }}
-			</ActionButton>
-		</Actions>
+			</NcActionButton>
+		</NcActions>
 
 		<!-- actions -->
-		<Actions v-else-if="!loading"
+		<NcActions v-else-if="!loading"
 			class="sharing-entry__actions"
 			menu-align="right"
 			:open.sync="open"
@@ -134,7 +134,7 @@
 			<template v-if="share">
 				<template v-if="share.canEdit && canReshare">
 					<!-- Custom Label -->
-					<ActionInput ref="label"
+					<NcActionInput ref="label"
 						v-tooltip.auto="{
 							content: errors.label,
 							show: errors.label,
@@ -150,30 +150,30 @@
 						@update:value="onLabelChange"
 						@submit="onLabelSubmit">
 						{{ t('files_sharing', 'Share label') }}
-					</ActionInput>
+					</NcActionInput>
 
 					<SharePermissionsEditor :can-reshare="canReshare"
 						:share.sync="share"
 						:file-info="fileInfo" />
 
-					<ActionSeparator />
+					<NcActionSeparator />
 
-					<ActionCheckbox :checked.sync="share.hideDownload"
+					<NcActionCheckbox :checked.sync="share.hideDownload"
 						:disabled="saving || canChangeHideDownload"
 						@change="queueUpdate('hideDownload')">
 						{{ t('files_sharing', 'Hide download') }}
-					</ActionCheckbox>
+					</NcActionCheckbox>
 
 					<!-- password -->
-					<ActionCheckbox :checked.sync="isPasswordProtected"
+					<NcActionCheckbox :checked.sync="isPasswordProtected"
 						:disabled="config.enforcePasswordForPublicLink || saving"
 						class="share-link-password-checkbox"
 						@uncheck="onPasswordDisable">
 						{{ config.enforcePasswordForPublicLink
 							? t('files_sharing', 'Password protection (enforced)')
 							: t('files_sharing', 'Password protect') }}
-					</ActionCheckbox>
-					<ActionInput v-if="isPasswordProtected"
+					</NcActionCheckbox>
+					<NcActionInput v-if="isPasswordProtected"
 						ref="password"
 						v-tooltip.auto="{
 							content: errors.password,
@@ -192,33 +192,33 @@
 						@update:value="onPasswordChange"
 						@submit="onPasswordSubmit">
 						{{ t('files_sharing', 'Enter a password') }}
-					</ActionInput>
-					<ActionText v-if="isEmailShareType && passwordExpirationTime" icon="icon-info">
+					</NcActionInput>
+					<NcActionText v-if="isEmailShareType && passwordExpirationTime" icon="icon-info">
 						{{ t('files_sharing', 'Password expires {passwordExpirationTime}', {passwordExpirationTime}) }}
-					</ActionText>
-					<ActionText v-else-if="isEmailShareType && passwordExpirationTime !== null" icon="icon-error">
+					</NcActionText>
+					<NcActionText v-else-if="isEmailShareType && passwordExpirationTime !== null" icon="icon-error">
 						{{ t('files_sharing', 'Password expired') }}
-					</ActionText>
+					</NcActionText>
 
 					<!-- password protected by Talk -->
-					<ActionCheckbox v-if="isPasswordProtectedByTalkAvailable"
+					<NcActionCheckbox v-if="isPasswordProtectedByTalkAvailable"
 						:checked.sync="isPasswordProtectedByTalk"
 						:disabled="!canTogglePasswordProtectedByTalkAvailable || saving"
 						class="share-link-password-talk-checkbox"
 						@change="onPasswordProtectedByTalkChange">
 						{{ t('files_sharing', 'Video verification') }}
-					</ActionCheckbox>
+					</NcActionCheckbox>
 
 					<!-- expiration date -->
-					<ActionCheckbox :checked.sync="hasExpirationDate"
+					<NcActionCheckbox :checked.sync="hasExpirationDate"
 						:disabled="config.isDefaultExpireDateEnforced || saving"
 						class="share-link-expire-date-checkbox"
 						@uncheck="onExpirationDisable">
 						{{ config.isDefaultExpireDateEnforced
 							? t('files_sharing', 'Expiration date (enforced)')
 							: t('files_sharing', 'Set expiration date') }}
-					</ActionCheckbox>
-					<ActionInput v-if="hasExpirationDate"
+					</NcActionCheckbox>
+					<NcActionInput v-if="hasExpirationDate"
 						ref="expireDate"
 						v-tooltip.auto="{
 							content: errors.expireDate,
@@ -237,15 +237,15 @@
 						:disabled-date="disabledDate"
 						@update:value="onExpirationChange">
 						{{ t('files_sharing', 'Enter a date') }}
-					</ActionInput>
+					</NcActionInput>
 
 					<!-- note -->
-					<ActionCheckbox :checked.sync="hasNote"
+					<NcActionCheckbox :checked.sync="hasNote"
 						:disabled="saving"
 						@uncheck="queueUpdate('note')">
 						{{ t('files_sharing', 'Note to recipient') }}
-					</ActionCheckbox>
-					<ActionTextEditable v-if="hasNote"
+					</NcActionCheckbox>
+					<NcActionTextEditable v-if="hasNote"
 						ref="note"
 						v-tooltip.auto="{
 							content: errors.note,
@@ -262,7 +262,7 @@
 						@submit="onNoteSubmit" />
 				</template>
 
-				<ActionSeparator />
+				<NcActionSeparator />
 
 				<!-- external actions -->
 				<ExternalShareAction v-for="action in externalLinkActions"
@@ -273,36 +273,36 @@
 					:share="share" />
 
 				<!-- external legacy sharing via url (social...) -->
-				<ActionLink v-for="({icon, url, name}, index) in externalLegacyLinkActions"
+				<NcActionLink v-for="({icon, url, name}, index) in externalLegacyLinkActions"
 					:key="index"
 					:href="url(shareLink)"
 					:icon="icon"
 					target="_blank">
 					{{ name }}
-				</ActionLink>
+				</NcActionLink>
 
-				<ActionButton v-if="share.canDelete"
+				<NcActionButton v-if="share.canDelete"
 					icon="icon-close"
 					:disabled="saving"
 					@click.prevent="onDelete">
 					{{ t('files_sharing', 'Unshare') }}
-				</ActionButton>
-				<ActionButton v-if="!isEmailShareType && canReshare"
+				</NcActionButton>
+				<NcActionButton v-if="!isEmailShareType && canReshare"
 					class="new-share-link"
 					icon="icon-add"
 					@click.prevent.stop="onNewLinkShare">
 					{{ t('files_sharing', 'Add another link') }}
-				</ActionButton>
+				</NcActionButton>
 			</template>
 
 			<!-- Create new share -->
-			<ActionButton v-else-if="canReshare"
+			<NcActionButton v-else-if="canReshare"
 				class="new-share-link"
 				:icon="loading ? 'icon-loading-small' : 'icon-add'"
 				@click.prevent.stop="onNewLinkShare">
 				{{ t('files_sharing', 'Create a new share link') }}
-			</ActionButton>
-		</Actions>
+			</NcActionButton>
+		</NcActions>
 
 		<!-- loading indicator to replace the menu -->
 		<div v-else class="icon-loading-small sharing-entry__loading" />
@@ -314,15 +314,15 @@ import { generateUrl } from '@nextcloud/router'
 import { Type as ShareTypes } from '@nextcloud/sharing'
 import Vue from 'vue'
 
-import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
-import ActionCheckbox from '@nextcloud/vue/dist/Components/ActionCheckbox'
-import ActionInput from '@nextcloud/vue/dist/Components/ActionInput'
-import ActionLink from '@nextcloud/vue/dist/Components/ActionLink'
-import ActionText from '@nextcloud/vue/dist/Components/ActionText'
-import ActionSeparator from '@nextcloud/vue/dist/Components/ActionSeparator'
-import ActionTextEditable from '@nextcloud/vue/dist/Components/ActionTextEditable'
-import Actions from '@nextcloud/vue/dist/Components/Actions'
-import Avatar from '@nextcloud/vue/dist/Components/Avatar'
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
+import NcActionCheckbox from '@nextcloud/vue/dist/Components/NcActionCheckbox'
+import NcActionInput from '@nextcloud/vue/dist/Components/NcActionInput'
+import NcActionLink from '@nextcloud/vue/dist/Components/NcActionLink'
+import NcActionText from '@nextcloud/vue/dist/Components/NcActionText'
+import NcActionSeparator from '@nextcloud/vue/dist/Components/NcActionSeparator'
+import NcActionTextEditable from '@nextcloud/vue/dist/Components/NcActionTextEditable'
+import NcActions from '@nextcloud/vue/dist/Components/NcActions'
+import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar'
 import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip'
 
 import ExternalShareAction from './ExternalShareAction'
@@ -335,15 +335,15 @@ export default {
 	name: 'SharingEntryLink',
 
 	components: {
-		Actions,
-		ActionButton,
-		ActionCheckbox,
-		ActionInput,
-		ActionLink,
-		ActionText,
-		ActionTextEditable,
-		ActionSeparator,
-		Avatar,
+		NcActions,
+		NcActionButton,
+		NcActionCheckbox,
+		NcActionInput,
+		NcActionLink,
+		NcActionText,
+		NcActionTextEditable,
+		NcActionSeparator,
+		NcAvatar,
 		ExternalShareAction,
 		SharePermissionsEditor,
 	},
diff --git a/apps/files_sharing/src/components/SharingEntrySimple.vue b/apps/files_sharing/src/components/SharingEntrySimple.vue
index 70b55cbdce1..8b495b0743c 100644
--- a/apps/files_sharing/src/components/SharingEntrySimple.vue
+++ b/apps/files_sharing/src/components/SharingEntrySimple.vue
@@ -29,24 +29,24 @@
 				{{ subtitle }}
 			</p>
 		</div>
-		<Actions v-if="$slots['default']"
+		<NcActions v-if="$slots['default']"
 			class="sharing-entry__actions"
 			menu-align="right"
 			:aria-expanded="ariaExpandedValue">
 			<slot />
-		</Actions>
+		</NcActions>
 	</li>
 </template>
 
 <script>
-import Actions from '@nextcloud/vue/dist/Components/Actions'
+import NcActions from '@nextcloud/vue/dist/Components/NcActions'
 import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip'
 
 export default {
 	name: 'SharingEntrySimple',
 
 	components: {
-		Actions,
+		NcActions,
 	},
 
 	directives: {
diff --git a/apps/files_sharing/src/components/SharingInput.vue b/apps/files_sharing/src/components/SharingInput.vue
index df987942552..905de91bff1 100644
--- a/apps/files_sharing/src/components/SharingInput.vue
+++ b/apps/files_sharing/src/components/SharingInput.vue
@@ -21,7 +21,7 @@
   -->
 
 <template>
-	<Multiselect ref="multiselect"
+	<NcMultiselect ref="multiselect"
 		class="sharing-input"
 		:clear-on-select="true"
 		:disabled="!canReshare"
@@ -45,7 +45,7 @@
 		<template #noResult>
 			{{ noResultText }}
 		</template>
-	</Multiselect>
+	</NcMultiselect>
 </template>
 
 <script>
@@ -53,7 +53,7 @@ import { generateOcsUrl } from '@nextcloud/router'
 import { getCurrentUser } from '@nextcloud/auth'
 import axios from '@nextcloud/axios'
 import debounce from 'debounce'
-import Multiselect from '@nextcloud/vue/dist/Components/Multiselect'
+import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect'
 
 import Config from '../services/ConfigService'
 import GeneratePassword from '../utils/GeneratePassword'
@@ -65,7 +65,7 @@ export default {
 	name: 'SharingInput',
 
 	components: {
-		Multiselect,
+		NcMultiselect,
 	},
 
 	mixins: [ShareTypes, ShareRequests],
diff --git a/apps/files_sharing/src/views/SharingInherited.vue b/apps/files_sharing/src/views/SharingInherited.vue
index 18226b5859b..0f7d9d8b55b 100644
--- a/apps/files_sharing/src/views/SharingInherited.vue
+++ b/apps/files_sharing/src/views/SharingInherited.vue
@@ -30,11 +30,11 @@
 			<template #avatar>
 				<div class="avatar-shared icon-more-white" />
 			</template>
-			<ActionButton :icon="showInheritedSharesIcon"
+			<NcActionButton :icon="showInheritedSharesIcon"
 				:aria-label="mainTitle"
 				@click.prevent.stop="toggleInheritedShares">
 				{{ toggleTooltip }}
-			</ActionButton>
+			</NcActionButton>
 		</SharingEntrySimple>
 
 		<!-- Inherited shares list -->
@@ -47,7 +47,7 @@
 
 <script>
 import { generateOcsUrl } from '@nextcloud/router'
-import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
 import axios from '@nextcloud/axios'
 
 import Share from '../models/Share'
@@ -58,7 +58,7 @@ export default {
 	name: 'SharingInherited',
 
 	components: {
-		ActionButton,
+		NcActionButton,
 		SharingEntryInherited,
 		SharingEntrySimple,
 	},
diff --git a/apps/files_sharing/src/views/SharingTab.vue b/apps/files_sharing/src/views/SharingTab.vue
index b381dfc2f14..2a03553801e 100644
--- a/apps/files_sharing/src/views/SharingTab.vue
+++ b/apps/files_sharing/src/views/SharingTab.vue
@@ -33,7 +33,7 @@
 			<!-- shared with me information -->
 			<SharingEntrySimple v-if="isSharedWithMe" v-bind="sharedWithMe" class="sharing-entry__reshare">
 				<template #avatar>
-					<Avatar :user="sharedWithMe.user"
+					<NcAvatar :user="sharedWithMe.user"
 						:display-name="sharedWithMe.displayName"
 						class="sharing-entry__avatar"
 						tooltip-message="" />
@@ -88,7 +88,7 @@
 <script>
 import { CollectionList } from 'nextcloud-vue-collections'
 import { generateOcsUrl } from '@nextcloud/router'
-import Avatar from '@nextcloud/vue/dist/Components/Avatar'
+import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar'
 import axios from '@nextcloud/axios'
 import { loadState } from '@nextcloud/initial-state'
 
@@ -108,7 +108,7 @@ export default {
 	name: 'SharingTab',
 
 	components: {
-		Avatar,
+		NcAvatar,
 		CollectionList,
 		SharingEntryInternal,
 		SharingEntrySimple,
diff --git a/apps/oauth2/src/App.vue b/apps/oauth2/src/App.vue
index ba374fcc21c..8b9d2e7aff6 100644
--- a/apps/oauth2/src/App.vue
+++ b/apps/oauth2/src/App.vue
@@ -20,7 +20,7 @@
   -
   -->
 <template>
-	<SettingsSection :title="t('oauth2', 'OAuth 2.0 clients')"
+	<NcSettingsSection :title="t('oauth2', 'OAuth 2.0 clients')"
 		:description="t('oauth2', 'OAuth 2.0 allows external services to request access to {instanceName}.', { instanceName })"
 		:doc-url="oauthDocLink">
 		<table v-if="clients.length > 0" class="grid">
@@ -54,11 +54,11 @@
 				type="url"
 				name="redirectUri"
 				:placeholder="t('oauth2', 'Redirection URI')">
-			<ButtonVue class="inline-button">
+			<NcButton class="inline-button">
 				{{ t('oauth2', 'Add') }}
-			</ButtonVue>
+			</NcButton>
 		</form>
-	</SettingsSection>
+	</NcSettingsSection>
 </template>
 
 <script>
@@ -66,16 +66,16 @@ import axios from '@nextcloud/axios'
 import OAuthItem from './components/OAuthItem'
 import { generateUrl } from '@nextcloud/router'
 import { getCapabilities } from '@nextcloud/capabilities'
-import SettingsSection from '@nextcloud/vue/dist/Components/SettingsSection'
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue'
+import NcSettingsSection from '@nextcloud/vue/dist/Components/NcSettingsSection'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton'
 import { loadState } from '@nextcloud/initial-state'
 
 export default {
 	name: 'App',
 	components: {
 		OAuthItem,
-		SettingsSection,
-		ButtonVue,
+		NcSettingsSection,
+		NcButton,
 	},
 	props: {
 		clients: {
diff --git a/apps/oauth2/src/components/OAuthItem.vue b/apps/oauth2/src/components/OAuthItem.vue
index 8a98d8dab29..41874b1f02b 100644
--- a/apps/oauth2/src/components/OAuthItem.vue
+++ b/apps/oauth2/src/components/OAuthItem.vue
@@ -42,14 +42,14 @@
 			</table>
 		</td>
 		<td class="action-column">
-			<ButtonVue type="tertiary-no-background"
+			<NcButton type="tertiary-no-background"
 				:aria-label="t('oauth2', 'Delete')"
 				@click="$emit('delete', id)">
 				<template #icon>
 					<Delete :size="20"
 						:title="t('oauth2', 'Delete')" />
 				</template>
-			</ButtonVue>
+			</NcButton>
 		</td>
 	</tr>
 </template>
@@ -57,13 +57,13 @@
 <script>
 
 import Delete from 'vue-material-design-icons/Delete'
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton'
 
 export default {
 	name: 'OAuthItem',
 	components: {
 		Delete,
-		ButtonVue,
+		NcButton,
 	},
 	props: {
 		client: {
diff --git a/apps/settings/src/components/AdminDelegating.vue b/apps/settings/src/components/AdminDelegating.vue
index 9dd0d66cc31..90f42f73ab5 100644
--- a/apps/settings/src/components/AdminDelegating.vue
+++ b/apps/settings/src/components/AdminDelegating.vue
@@ -1,5 +1,5 @@
 <template>
-	<SettingsSection :title="t('settings', 'Administration privileges')"
+	<NcSettingsSection :title="t('settings', 'Administration privileges')"
 		:description="t('settings', 'Here you can decide which group can access certain sections of the administration settings.')"
 		:doc-url="authorizedSettingsDocLink">
 		<div class="setting-list">
@@ -8,19 +8,19 @@
 				<GroupSelect :available-groups="availableGroups" :authorized-groups="authorizedGroups" :setting="setting" />
 			</div>
 		</div>
-	</SettingsSection>
+	</NcSettingsSection>
 </template>
 
 <script>
 import GroupSelect from './AdminDelegation/GroupSelect'
-import SettingsSection from '@nextcloud/vue/dist/Components/SettingsSection'
+import NcSettingsSection from '@nextcloud/vue/dist/Components/NcSettingsSection'
 import { loadState } from '@nextcloud/initial-state'
 
 export default {
 	name: 'AdminDelegating',
 	components: {
 		GroupSelect,
-		SettingsSection,
+		NcSettingsSection,
 	},
 	data() {
 		return {
diff --git a/apps/settings/src/components/AdminDelegation/GroupSelect.vue b/apps/settings/src/components/AdminDelegation/GroupSelect.vue
index f9db50b3cc6..52ecd6c4846 100644
--- a/apps/settings/src/components/AdminDelegation/GroupSelect.vue
+++ b/apps/settings/src/components/AdminDelegation/GroupSelect.vue
@@ -1,5 +1,5 @@
 <template>
-	<Multiselect v-model="selected"
+	<NcMultiselect v-model="selected"
 		class="group-multiselect"
 		:placeholder="t('settings', 'None')"
 		track-by="gid"
@@ -11,7 +11,7 @@
 </template>
 
 <script>
-import Multiselect from '@nextcloud/vue/dist/Components/Multiselect'
+import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect'
 import { generateUrl } from '@nextcloud/router'
 import axios from '@nextcloud/axios'
 import { showError } from '@nextcloud/dialogs'
@@ -20,7 +20,7 @@ import logger from '../../logger'
 export default {
 	name: 'GroupSelect',
 	components: {
-		Multiselect,
+		NcMultiselect,
 	},
 	props: {
 		availableGroups: {
diff --git a/apps/settings/src/components/AdminTwoFactor.vue b/apps/settings/src/components/AdminTwoFactor.vue
index a5c61b3b0f8..950b857b07a 100644
--- a/apps/settings/src/components/AdminTwoFactor.vue
+++ b/apps/settings/src/components/AdminTwoFactor.vue
@@ -1,17 +1,17 @@
 <template>
-	<SettingsSection :title="t('settings', 'Two-Factor Authentication')"
+	<NcSettingsSection :title="t('settings', 'Two-Factor Authentication')"
 		:description="t('settings', 'Two-factor authentication can be enforced for all users and specific groups. If they do not have a two-factor provider configured, they will be unable to log into the system.')"
 		:doc-url="twoFactorAdminDoc">
 		<p v-if="loading">
 			<span class="icon-loading-small two-factor-loading" />
 			<span>{{ t('settings', 'Enforce two-factor authentication') }}</span>
 		</p>
-		<CheckboxRadioSwitch v-else
+		<NcCheckboxRadioSwitch v-else
 			id="two-factor-enforced"
 			:checked.sync="enforced"
 			type="switch">
 			{{ t('settings', 'Enforce two-factor authentication') }}
-		</CheckboxRadioSwitch>
+		</NcCheckboxRadioSwitch>
 		<template v-if="enforced">
 			<h3>{{ t('settings', 'Limit to groups') }}</h3>
 			{{ t('settings', 'Enforcement of two-factor authentication can be set for certain groups only.') }}
@@ -19,7 +19,7 @@
 				{{ t('settings', 'Two-factor authentication is enforced for all members of the following groups.') }}
 			</p>
 			<p>
-				<Multiselect v-model="enforcedGroups"
+				<NcMultiselect v-model="enforcedGroups"
 					:options="groups"
 					:placeholder="t('settings', 'Enforced groups')"
 					:disabled="loading"
@@ -34,7 +34,7 @@
 				{{ t('settings', 'Two-factor authentication is not enforced for members of the following groups.') }}
 			</p>
 			<p>
-				<Multiselect v-model="excludedGroups"
+				<NcMultiselect v-model="excludedGroups"
 					:options="groups"
 					:placeholder="t('settings', 'Excluded groups')"
 					:disabled="loading"
@@ -53,22 +53,22 @@
 			</p>
 		</template>
 		<p class="top-margin">
-			<ButtonVue v-if="dirty"
+			<NcButton v-if="dirty"
 				type="primary"
 				:disabled="loading"
 				@click="saveChanges">
 				{{ t('settings', 'Save changes') }}
-			</ButtonVue>
+			</NcButton>
 		</p>
-	</SettingsSection>
+	</NcSettingsSection>
 </template>
 
 <script>
 import axios from '@nextcloud/axios'
-import Multiselect from '@nextcloud/vue/dist/Components/Multiselect'
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue'
-import CheckboxRadioSwitch from '@nextcloud/vue/dist/Components/CheckboxRadioSwitch'
-import SettingsSection from '@nextcloud/vue/dist/Components/SettingsSection'
+import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton'
+import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch'
+import NcSettingsSection from '@nextcloud/vue/dist/Components/NcSettingsSection'
 import { loadState } from '@nextcloud/initial-state'
 
 import _ from 'lodash'
@@ -77,10 +77,10 @@ import { generateUrl, generateOcsUrl } from '@nextcloud/router'
 export default {
 	name: 'AdminTwoFactor',
 	components: {
-		Multiselect,
-		ButtonVue,
-		CheckboxRadioSwitch,
-		SettingsSection,
+		NcMultiselect,
+		NcButton,
+		NcCheckboxRadioSwitch,
+		NcSettingsSection,
 	},
 	data() {
 		return {
diff --git a/apps/settings/src/components/AppDetails.vue b/apps/settings/src/components/AppDetails.vue
index f4faa36eed4..93ccf253ac5 100644
--- a/apps/settings/src/components/AppDetails.vue
+++ b/apps/settings/src/components/AppDetails.vue
@@ -35,7 +35,7 @@
 					class="group_select"
 					:title="t('settings', 'All')"
 					value="">
-				<Multiselect v-if="isLimitedToGroups(app)"
+				<NcMultiselect v-if="isLimitedToGroups(app)"
 					:options="groups"
 					:value="appGroups"
 					:options-limit="5"
@@ -50,7 +50,7 @@
 					@remove="removeGroupLimitation"
 					@search-change="asyncFindGroup">
 					<span slot="noResult">{{ t('settings', 'No results') }}</span>
-				</Multiselect>
+				</NcMultiselect>
 			</div>
 			<div class="app-details__actions-manage">
 				<input v-if="app.update"
@@ -144,7 +144,7 @@
 </template>
 
 <script>
-import Multiselect from '@nextcloud/vue/dist/Components/Multiselect'
+import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect'
 
 import AppManagement from '../mixins/AppManagement'
 import PrefixMixin from './PrefixMixin'
@@ -154,7 +154,7 @@ export default {
 	name: 'AppDetails',
 
 	components: {
-		Multiselect,
+		NcMultiselect,
 		Markdown,
 	},
 	mixins: [AppManagement, PrefixMixin],
diff --git a/apps/settings/src/components/AppList.vue b/apps/settings/src/components/AppList.vue
index 2c62e4e0d36..bb7c932613e 100644
--- a/apps/settings/src/components/AppList.vue
+++ b/apps/settings/src/components/AppList.vue
@@ -26,12 +26,12 @@
 			<template v-if="useListView">
 				<div v-if="showUpdateAll" class="toolbar">
 					{{ n('settings', '%n app has an update available', '%n apps have an update available', counter) }}
-					<ButtonVue v-if="showUpdateAll"
+					<NcButton v-if="showUpdateAll"
 						id="app-list-update-all"
 						type="primary"
 						@click="updateAll">
 						{{ n('settings', 'Update', 'Update all', counter) }}
-					</ButtonVue>
+					</NcButton>
 				</div>
 
 				<div v-if="!showUpdateAll" class="toolbar">
@@ -107,13 +107,13 @@
 import AppItem from './AppList/AppItem'
 import PrefixMixin from './PrefixMixin'
 import pLimit from 'p-limit'
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton'
 
 export default {
 	name: 'AppList',
 	components: {
 		AppItem,
-		ButtonVue,
+		NcButton,
 	},
 	mixins: [PrefixMixin],
 	props: ['category', 'app', 'search'],
diff --git a/apps/settings/src/components/AuthToken.vue b/apps/settings/src/components/AuthToken.vue
index fa89ed65260..5a48f5d0d8c 100644
--- a/apps/settings/src/components/AuthToken.vue
+++ b/apps/settings/src/components/AuthToken.vue
@@ -40,55 +40,55 @@
 			<span v-tooltip="lastActivity" class="last-activity">{{ lastActivityRelative }}</span>
 		</td>
 		<td class="more">
-			<Actions v-if="!token.current"
+			<NcActions v-if="!token.current"
 				v-tooltip.auto="{
 					content: t('settings', 'Device settings'),
 					container: 'body'
 				}"
 				:open.sync="actionOpen">
-				<ActionCheckbox v-if="token.type === 1"
+				<NcActionCheckbox v-if="token.type === 1"
 					:checked="token.scope.filesystem"
 					@change.stop.prevent="$emit('toggle-scope', token, 'filesystem', !token.scope.filesystem)">
 					<!-- TODO: add text/longtext with some description -->
 					{{ t('settings', 'Allow filesystem access') }}
-				</ActionCheckbox>
-				<ActionButton v-if="token.canRename"
+				</NcActionCheckbox>
+				<NcActionButton v-if="token.canRename"
 					icon="icon-rename"
 					@click.stop.prevent="startRename">
 					<!-- TODO: add text/longtext with some description -->
 					{{ t('settings', 'Rename') }}
-				</ActionButton>
+				</NcActionButton>
 
 				<!-- revoke & wipe -->
 				<template v-if="token.canDelete">
 					<template v-if="token.type !== 2">
-						<ActionButton icon="icon-delete"
+						<NcActionButton icon="icon-delete"
 							@click.stop.prevent="revoke">
 							<!-- TODO: add text/longtext with some description -->
 							{{ t('settings', 'Revoke') }}
-						</ActionButton>
-						<ActionButton icon="icon-delete"
+						</NcActionButton>
+						<NcActionButton icon="icon-delete"
 							@click.stop.prevent="wipe">
 							{{ t('settings', 'Wipe device') }}
-						</ActionButton>
+						</NcActionButton>
 					</template>
-					<ActionButton v-else-if="token.type === 2"
+					<NcActionButton v-else-if="token.type === 2"
 						icon="icon-delete"
 						:title="t('settings', 'Revoke')"
 						@click.stop.prevent="revoke">
 						{{ t('settings', 'Revoking this token might prevent the wiping of your device if it has not started the wipe yet.') }}
-					</ActionButton>
+					</NcActionButton>
 				</template>
-			</Actions>
+			</NcActions>
 		</td>
 	</tr>
 </template>
 
 <script>
 import {
-	Actions,
-	ActionButton,
-	ActionCheckbox,
+	NcActions,
+	NcActionButton,
+	NcActionCheckbox,
 } from '@nextcloud/vue'
 
 // When using capture groups the following parts are extracted the first is used as the version number, the second as the OS
@@ -158,9 +158,9 @@ const iconMap = {
 export default {
 	name: 'AuthToken',
 	components: {
-		Actions,
-		ActionButton,
-		ActionCheckbox,
+		NcActions,
+		NcActionButton,
+		NcActionCheckbox,
 	},
 	props: {
 		token: {
diff --git a/apps/settings/src/components/AuthTokenSetupDialogue.vue b/apps/settings/src/components/AuthTokenSetupDialogue.vue
index 3f3b1cf1fb3..613e286255e 100644
--- a/apps/settings/src/components/AuthTokenSetupDialogue.vue
+++ b/apps/settings/src/components/AuthTokenSetupDialogue.vue
@@ -28,11 +28,11 @@
 			:disabled="loading"
 			:placeholder="t('settings', 'App name')"
 			@keydown.enter="submit">
-		<ButtonVue :disabled="loading || deviceName.length === 0"
+		<NcButton :disabled="loading || deviceName.length === 0"
 			type="primary"
 			@click="submit">
 			{{ t('settings', 'Create new app password') }}
-		</ButtonVue>
+		</NcButton>
 	</div>
 	<div v-else class="spacing">
 		{{ t('settings', 'Use the credentials below to configure your app or device.') }}
@@ -63,9 +63,9 @@
 				class="icon icon-clippy"
 				@mouseover="hoveringCopyButton = true"
 				@mouseleave="hoveringCopyButton = false" />
-			<ButtonVue @click="reset">
+			<NcButton @click="reset">
 				{{ t('settings', 'Done') }}
-			</ButtonVue>
+			</NcButton>
 		</div>
 		<div class="app-password-row">
 			<span class="app-password-label" />
@@ -83,13 +83,13 @@
 import QR from '@chenfengyuan/vue-qrcode'
 import confirmPassword from '@nextcloud/password-confirmation'
 import { getRootUrl } from '@nextcloud/router'
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton'
 
 export default {
 	name: 'AuthTokenSetupDialogue',
 	components: {
 		QR,
-		ButtonVue,
+		NcButton,
 	},
 	props: {
 		add: {
diff --git a/apps/settings/src/components/BasicSettings/BackgroundJob.vue b/apps/settings/src/components/BasicSettings/BackgroundJob.vue
index 07f5c5cab4c..3b3c0c08342 100644
--- a/apps/settings/src/components/BasicSettings/BackgroundJob.vue
+++ b/apps/settings/src/components/BasicSettings/BackgroundJob.vue
@@ -21,7 +21,7 @@
 -->
 
 <template>
-	<SettingsSection :title="t('settings', 'Background jobs')"
+	<NcSettingsSection :title="t('settings', 'Background jobs')"
 		:description="t('settings', 'For the server to work properly, it\'s important to configure background jobs correctly. Cron is the recommended setting. Please see the documentation for more information.')"
 		:doc-url="backgroundJobsDocUrl">
 		<template v-if="lastCron !== 0">
@@ -46,33 +46,33 @@
 			{{ t('settings', 'Background job did not run yet!') }}
 		</span>
 
-		<CheckboxRadioSwitch type="radio"
+		<NcCheckboxRadioSwitch type="radio"
 			:checked.sync="backgroundJobsMode"
 			name="backgroundJobsMode"
 			value="ajax"
 			class="ajaxSwitch"
 			@update:checked="onBackgroundJobModeChanged">
 			{{ t('settings', 'AJAX') }}
-		</CheckboxRadioSwitch>
+		</NcCheckboxRadioSwitch>
 		<em>{{ t('settings', 'Execute one task with each page loaded. Use case: Single user instance.') }}</em>
 
-		<CheckboxRadioSwitch type="radio"
+		<NcCheckboxRadioSwitch type="radio"
 			:checked.sync="backgroundJobsMode"
 			name="backgroundJobsMode"
 			value="webcron"
 			@update:checked="onBackgroundJobModeChanged">
 			{{ t('settings', 'Webcron') }}
-		</CheckboxRadioSwitch>
+		</NcCheckboxRadioSwitch>
 		<em>{{ t('settings', 'cron.php is registered at a webcron service to call cron.php every 5 minutes over HTTP. Use case: Very small instance (1–5 users depending on the usage).') }}</em>
 
-		<CheckboxRadioSwitch v-if="cliBasedCronPossible"
+		<NcCheckboxRadioSwitch v-if="cliBasedCronPossible"
 			type="radio"
 			:checked.sync="backgroundJobsMode"
 			value="cron"
 			name="backgroundJobsMode"
 			@update:checked="onBackgroundJobModeChanged">
 			{{ t('settings', 'Cron (Recommended)') }}
-		</CheckboxRadioSwitch>
+		</NcCheckboxRadioSwitch>
 		<em v-if="cliBasedCronPossible">{{ cronLabel }}</em>
 		<em v-else>
 			{{ t('settings', 'To run this you need the PHP POSIX extension. See {linkstart}PHP documentation{linkend} for more details.', {
@@ -80,14 +80,14 @@
 				linkend: '</a>',
 			}) }}
 		</em>
-	</SettingsSection>
+	</NcSettingsSection>
 </template>
 
 <script>
 import { loadState } from '@nextcloud/initial-state'
 import { showError } from '@nextcloud/dialogs'
-import CheckboxRadioSwitch from '@nextcloud/vue/dist/Components/CheckboxRadioSwitch'
-import SettingsSection from '@nextcloud/vue/dist/Components/SettingsSection'
+import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch'
+import NcSettingsSection from '@nextcloud/vue/dist/Components/NcSettingsSection'
 import moment from '@nextcloud/moment'
 import axios from '@nextcloud/axios'
 import { generateOcsUrl } from '@nextcloud/router'
@@ -104,8 +104,8 @@ export default {
 	name: 'BackgroundJob',
 
 	components: {
-		CheckboxRadioSwitch,
-		SettingsSection,
+		NcCheckboxRadioSwitch,
+		NcSettingsSection,
 	},
 
 	data() {
diff --git a/apps/settings/src/components/BasicSettings/ProfileSettings.vue b/apps/settings/src/components/BasicSettings/ProfileSettings.vue
index 8a487e4e1ea..0519e60a30b 100644
--- a/apps/settings/src/components/BasicSettings/ProfileSettings.vue
+++ b/apps/settings/src/components/BasicSettings/ProfileSettings.vue
@@ -31,11 +31,11 @@
 			{{ t('settings', 'Enable or disable profile by default for new users.') }}
 		</p>
 
-		<CheckboxRadioSwitch type="switch"
+		<NcCheckboxRadioSwitch type="switch"
 			:checked.sync="initialProfileEnabledByDefault"
 			@update:checked="onProfileDefaultChange">
 			{{ t('settings', 'Enable') }}
-		</CheckboxRadioSwitch>
+		</NcCheckboxRadioSwitch>
 	</div>
 </template>
 
@@ -47,7 +47,7 @@ import { saveProfileDefault } from '../../service/ProfileService'
 import { validateBoolean } from '../../utils/validate'
 import logger from '../../logger'
 
-import CheckboxRadioSwitch from '@nextcloud/vue/dist/Components/CheckboxRadioSwitch'
+import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch'
 
 const profileEnabledByDefault = loadState('settings', 'profileEnabledByDefault', true)
 
@@ -55,7 +55,7 @@ export default {
 	name: 'ProfileSettings',
 
 	components: {
-		CheckboxRadioSwitch,
+		NcCheckboxRadioSwitch,
 	},
 
 	data() {
diff --git a/apps/settings/src/components/Encryption.vue b/apps/settings/src/components/Encryption.vue
index d75225d1a18..834f9b1c79b 100644
--- a/apps/settings/src/components/Encryption.vue
+++ b/apps/settings/src/components/Encryption.vue
@@ -21,15 +21,15 @@
 -->
 
 <template>
-	<SettingsSection :title="t('settings', 'Server-side encryption')"
+	<NcSettingsSection :title="t('settings', 'Server-side encryption')"
 		:description="t('settings', 'Server-side encryption makes it possible to encrypt files which are uploaded to this server. This comes with limitations like a performance penalty, so enable this only if needed.')"
 		:doc-url="encryptionAdminDoc">
-		<CheckboxRadioSwitch :checked="encryptionEnabled || shouldDisplayWarning"
+		<NcCheckboxRadioSwitch :checked="encryptionEnabled || shouldDisplayWarning"
 			:disabled="encryptionEnabled"
 			type="switch"
 			@update:checked="displayWarning">
 			{{ t('settings', 'Enable server-side encryption') }}
-		</CheckboxRadioSwitch>
+		</NcCheckboxRadioSwitch>
 
 		<div v-if="shouldDisplayWarning && !encryptionEnabled" class="notecard warning" role="alert">
 			<p>{{ t('settings', 'Please read carefully before activating server-side encryption:') }}</p>
@@ -43,10 +43,10 @@
 			<p class="margin-bottom">
 				{{ t('settings', 'This is the final warning: Do you really want to enable encryption?') }}
 			</p>
-			<ButtonVue type="primary"
+			<NcButton type="primary"
 				@click="enableEncryption()">
 				{{ t('settings', "Enable encryption") }}
-			</ButtonVue>
+			</NcButton>
 		</div>
 
 		<div v-if="encryptionEnabled">
@@ -57,7 +57,7 @@
 				<template v-else>
 					<h3>{{ t('settings', 'Select default encryption module:') }}</h3>
 					<fieldset>
-						<CheckboxRadioSwitch v-for="(module, id) in encryptionModules"
+						<NcCheckboxRadioSwitch v-for="(module, id) in encryptionModules"
 							:key="id"
 							:checked.sync="defaultCheckedModule"
 							:value="id"
@@ -65,21 +65,21 @@
 							name="default_encryption_module"
 							@update:checked="checkDefaultModule">
 							{{ module.displayName }}
-						</CheckboxRadioSwitch>
+						</NcCheckboxRadioSwitch>
 					</fieldset>
 				</template>
 			</div>
 
 			<div v-else-if="externalBackendsEnabled" v-html="migrationMessage" />
 		</div>
-	</SettingsSection>
+	</NcSettingsSection>
 </template>
 
 <script>
 import axios from '@nextcloud/axios'
-import CheckboxRadioSwitch from '@nextcloud/vue/dist/Components/CheckboxRadioSwitch'
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue'
-import SettingsSection from '@nextcloud/vue/dist/Components/SettingsSection'
+import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton'
+import NcSettingsSection from '@nextcloud/vue/dist/Components/NcSettingsSection'
 import { loadState } from '@nextcloud/initial-state'
 import { getLoggerBuilder } from '@nextcloud/logger'
 
@@ -95,9 +95,9 @@ const logger = getLoggerBuilder()
 export default {
 	name: 'Encryption',
 	components: {
-		CheckboxRadioSwitch,
-		SettingsSection,
-		ButtonVue,
+		NcCheckboxRadioSwitch,
+		NcSettingsSection,
+		NcButton,
 	},
 	data() {
 		const encryptionModules = loadState('settings', 'encryption-modules')
diff --git a/apps/settings/src/components/GroupListItem.vue b/apps/settings/src/components/GroupListItem.vue
index 173d3a45f5b..12bdcedcd8f 100644
--- a/apps/settings/src/components/GroupListItem.vue
+++ b/apps/settings/src/components/GroupListItem.vue
@@ -21,7 +21,7 @@
   -->
 
 <template>
-	<AppNavigationItem :key="id"
+	<NcAppNavigationItem :key="id"
 		:exact="true"
 		:title="title"
 		:to="{ name: 'group', params: { selectedGroup: encodeURIComponent(id) } }"
@@ -30,41 +30,41 @@
 		:menu-open="openGroupMenu"
 		@update:menuOpen="handleGroupMenuOpen">
 		<template #counter>
-			<CounterBubble v-if="count">
+			<NcCounterBubble v-if="count">
 				{{ count }}
-			</CounterBubble>
+			</NcCounterBubble>
 		</template>
 		<template #actions>
-			<ActionInput v-if="id !== 'admin' && id !== 'disabled' && settings.isAdmin"
+			<NcActionInput v-if="id !== 'admin' && id !== 'disabled' && settings.isAdmin"
 				ref="displayNameInput"
 				icon="icon-edit"
 				type="text"
 				:value="title"
 				@submit="renameGroup(id)">
 				{{ t('settings', 'Rename group') }}
-			</ActionInput>
-			<ActionButton v-if="id !== 'admin' && id !== 'disabled' && settings.isAdmin"
+			</NcActionInput>
+			<NcActionButton v-if="id !== 'admin' && id !== 'disabled' && settings.isAdmin"
 				icon="icon-delete"
 				@click="removeGroup(id)">
 				{{ t('settings', 'Remove group') }}
-			</ActionButton>
+			</NcActionButton>
 		</template>
-	</AppNavigationItem>
+	</NcAppNavigationItem>
 </template>
 
 <script>
-import ActionInput from '@nextcloud/vue/dist/Components/ActionInput'
-import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
-import CounterBubble from '@nextcloud/vue/dist/Components/CounterBubble'
-import AppNavigationItem from '@nextcloud/vue/dist/Components/AppNavigationItem'
+import NcActionInput from '@nextcloud/vue/dist/Components/NcActionInput'
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
+import NcCounterBubble from '@nextcloud/vue/dist/Components/NcCounterBubble'
+import NcAppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem'
 
 export default {
 	name: 'GroupListItem',
 	components: {
-		ActionInput,
-		ActionButton,
-		CounterBubble,
-		AppNavigationItem,
+		NcActionInput,
+		NcActionButton,
+		NcCounterBubble,
+		NcAppNavigationItem,
 	},
 	props: {
 		id: {
diff --git a/apps/settings/src/components/PersonalInfo/EmailSection/Email.vue b/apps/settings/src/components/PersonalInfo/EmailSection/Email.vue
index 975da4327ee..be837baf2bd 100644
--- a/apps/settings/src/components/PersonalInfo/EmailSection/Email.vue
+++ b/apps/settings/src/components/PersonalInfo/EmailSection/Email.vue
@@ -49,25 +49,25 @@
 						@update:scope="onScopeChange" />
 				</template>
 
-				<Actions class="email__actions"
+				<NcActions class="email__actions"
 					:aria-label="t('settings', 'Email options')"
 					:force-menu="true">
-					<ActionButton :aria-label="deleteEmailLabel"
+					<NcActionButton :aria-label="deleteEmailLabel"
 						:close-after-click="true"
 						:disabled="deleteDisabled"
 						icon="icon-delete"
 						@click.stop.prevent="deleteEmail">
 						{{ deleteEmailLabel }}
-					</ActionButton>
-					<ActionButton v-if="!primary || !isNotificationEmail"
+					</NcActionButton>
+					<NcActionButton v-if="!primary || !isNotificationEmail"
 						:aria-label="setNotificationMailLabel"
 						:close-after-click="true"
 						:disabled="setNotificationMailDisabled"
 						icon="icon-favorite"
 						@click.stop.prevent="setNotificationMail">
 						{{ setNotificationMailLabel }}
-					</ActionButton>
-				</Actions>
+					</NcActionButton>
+				</NcActions>
 			</div>
 		</div>
 
@@ -78,8 +78,8 @@
 </template>
 
 <script>
-import Actions from '@nextcloud/vue/dist/Components/Actions'
-import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
+import NcActions from '@nextcloud/vue/dist/Components/NcActions'
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
 import AlertOctagon from 'vue-material-design-icons/AlertOctagon'
 import Check from 'vue-material-design-icons/Check'
 import { showError } from '@nextcloud/dialogs'
@@ -103,8 +103,8 @@ export default {
 	name: 'Email',
 
 	components: {
-		Actions,
-		ActionButton,
+		NcActions,
+		NcActionButton,
 		AlertOctagon,
 		Check,
 		FederationControl,
diff --git a/apps/settings/src/components/PersonalInfo/ProfileSection/ProfilePreviewCard.vue b/apps/settings/src/components/PersonalInfo/ProfileSection/ProfilePreviewCard.vue
index afd85269720..586557e82a2 100644
--- a/apps/settings/src/components/PersonalInfo/ProfileSection/ProfilePreviewCard.vue
+++ b/apps/settings/src/components/PersonalInfo/ProfileSection/ProfilePreviewCard.vue
@@ -24,7 +24,7 @@
 	<a class="preview-card"
 		:class="{ disabled }"
 		:href="profilePageLink">
-		<Avatar class="preview-card__avatar"
+		<NcAvatar class="preview-card__avatar"
 			:user="userId"
 			:size="48"
 			:show-user-status="true"
@@ -44,13 +44,13 @@
 import { getCurrentUser } from '@nextcloud/auth'
 import { generateUrl } from '@nextcloud/router'
 
-import Avatar from '@nextcloud/vue/dist/Components/Avatar'
+import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar'
 
 export default {
 	name: 'ProfilePreviewCard',
 
 	components: {
-		Avatar,
+		NcAvatar,
 	},
 
 	props: {
diff --git a/apps/settings/src/components/PersonalInfo/ProfileVisibilitySection/VisibilityDropdown.vue b/apps/settings/src/components/PersonalInfo/ProfileVisibilitySection/VisibilityDropdown.vue
index 10b2e5cea81..e5251522b22 100644
--- a/apps/settings/src/components/PersonalInfo/ProfileVisibilitySection/VisibilityDropdown.vue
+++ b/apps/settings/src/components/PersonalInfo/ProfileVisibilitySection/VisibilityDropdown.vue
@@ -26,7 +26,7 @@
 		<label :for="inputId">
 			{{ t('settings', '{displayId}', { displayId }) }}
 		</label>
-		<Multiselect :id="inputId"
+		<NcMultiselect :id="inputId"
 			class="visibility-container__multiselect"
 			:options="visibilityOptions"
 			track-by="name"
@@ -41,7 +41,7 @@ import { showError } from '@nextcloud/dialogs'
 import { loadState } from '@nextcloud/initial-state'
 import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 
-import Multiselect from '@nextcloud/vue/dist/Components/Multiselect'
+import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect'
 
 import { saveProfileParameterVisibility } from '../../../service/ProfileService'
 import { validateStringInput } from '../../../utils/validate'
@@ -54,7 +54,7 @@ export default {
 	name: 'VisibilityDropdown',
 
 	components: {
-		Multiselect,
+		NcMultiselect,
 	},
 
 	props: {
diff --git a/apps/settings/src/components/PersonalInfo/shared/FederationControl.vue b/apps/settings/src/components/PersonalInfo/shared/FederationControl.vue
index e8d3c99682b..af2b9670ed1 100644
--- a/apps/settings/src/components/PersonalInfo/shared/FederationControl.vue
+++ b/apps/settings/src/components/PersonalInfo/shared/FederationControl.vue
@@ -21,7 +21,7 @@
 -->
 
 <template>
-	<Actions :class="{ 'federation-actions': !additional, 'federation-actions--additional': additional }"
+	<NcActions :class="{ 'federation-actions': !additional, 'federation-actions--additional': additional }"
 		:aria-label="ariaLabel"
 		:default-icon="scopeIcon"
 		:disabled="disabled">
@@ -35,11 +35,11 @@
 			:name="federationScope.name"
 			:tooltip-disabled="federationScope.tooltipDisabled"
 			:tooltip="federationScope.tooltip" />
-	</Actions>
+	</NcActions>
 </template>
 
 <script>
-import Actions from '@nextcloud/vue/dist/Components/Actions'
+import NcActions from '@nextcloud/vue/dist/Components/NcActions'
 import { loadState } from '@nextcloud/initial-state'
 import { showError } from '@nextcloud/dialogs'
 
@@ -61,7 +61,7 @@ export default {
 	name: 'FederationControl',
 
 	components: {
-		Actions,
+		NcActions,
 		FederationControlAction,
 	},
 
diff --git a/apps/settings/src/components/PersonalInfo/shared/FederationControlAction.vue b/apps/settings/src/components/PersonalInfo/shared/FederationControlAction.vue
index f98d9bc7535..22ce295db1d 100644
--- a/apps/settings/src/components/PersonalInfo/shared/FederationControlAction.vue
+++ b/apps/settings/src/components/PersonalInfo/shared/FederationControlAction.vue
@@ -21,7 +21,7 @@
 -->
 
 <template>
-	<ActionButton :aria-label="isSupportedScope ? tooltip : tooltipDisabled"
+	<NcActionButton :aria-label="isSupportedScope ? tooltip : tooltipDisabled"
 		class="federation-actions__btn"
 		:class="{ 'federation-actions__btn--active': activeScope === name }"
 		:close-after-click="true"
@@ -30,17 +30,17 @@
 		:title="displayName"
 		@click.stop.prevent="updateScope">
 		{{ isSupportedScope ? tooltip : tooltipDisabled }}
-	</ActionButton>
+	</NcActionButton>
 </template>
 
 <script>
-import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
 
 export default {
 	name: 'FederationControlAction',
 
 	components: {
-		ActionButton,
+		NcActionButton,
 	},
 
 	props: {
diff --git a/apps/settings/src/components/PersonalInfo/shared/HeaderBar.vue b/apps/settings/src/components/PersonalInfo/shared/HeaderBar.vue
index 59fdaa6c802..f353e673b81 100644
--- a/apps/settings/src/components/PersonalInfo/shared/HeaderBar.vue
+++ b/apps/settings/src/components/PersonalInfo/shared/HeaderBar.vue
@@ -35,7 +35,7 @@
 		</template>
 
 		<template v-if="isEditable && isMultiValueSupported">
-			<ButtonVue type="tertiary"
+			<NcButton type="tertiary"
 				:disabled="!isValidSection"
 				:aria-label="t('settings', 'Add additional email')"
 				@click.stop.prevent="onAddAdditional">
@@ -43,14 +43,14 @@
 					<Plus :size="20" />
 				</template>
 				{{ t('settings', 'Add') }}
-			</ButtonVue>
+			</NcButton>
 		</template>
 	</h3>
 </template>
 
 <script>
 import FederationControl from './FederationControl'
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton'
 import Plus from 'vue-material-design-icons/Plus'
 import { ACCOUNT_PROPERTY_READABLE_ENUM, ACCOUNT_SETTING_PROPERTY_READABLE_ENUM, PROFILE_READABLE_ENUM } from '../../../constants/AccountPropertyConstants'
 
@@ -59,7 +59,7 @@ export default {
 
 	components: {
 		FederationControl,
-		ButtonVue,
+		NcButton,
 		Plus,
 	},
 
diff --git a/apps/settings/src/components/UserList.vue b/apps/settings/src/components/UserList.vue
index 12ef853a9b0..d64868651e6 100644
--- a/apps/settings/src/components/UserList.vue
+++ b/apps/settings/src/components/UserList.vue
@@ -22,7 +22,7 @@
 
 <template>
 	<div id="app-content" class="user-list-grid" @scroll.passive="onScroll">
-		<Modal v-if="showConfig.showNewUserForm" size="small" @close="closeModal">
+		<NcModal v-if="showConfig.showNewUserForm" size="small" @close="closeModal">
 			<form id="new-user"
 				:disabled="loading.all"
 				class="modal__content"
@@ -83,7 +83,7 @@
 						:value="newUser.groups"
 						tabindex="-1"
 						type="text">
-					<Multiselect v-model="newUser.groups"
+					<NcMultiselect v-model="newUser.groups"
 						:close-on-select="false"
 						:disabled="loading.groups||loading.all"
 						:multiple="true"
@@ -100,11 +100,11 @@
 							Subadmins can't create users outside their groups
 							Therefore, empty select is forbidden -->
 						<span slot="noResult">{{ t('settings', 'No results') }}</span>
-					</Multiselect>
+					</NcMultiselect>
 				</div>
 				<div v-if="subAdminsGroups.length>0 && settings.isAdmin"
 					class="subadmins modal__item">
-					<Multiselect v-model="newUser.subAdminsGroups"
+					<NcMultiselect v-model="newUser.subAdminsGroups"
 						:close-on-select="false"
 						:multiple="true"
 						:options="subAdminsGroups"
@@ -114,10 +114,10 @@
 						label="name"
 						track-by="id">
 						<span slot="noResult">{{ t('settings', 'No results') }}</span>
-					</Multiselect>
+					</NcMultiselect>
 				</div>
 				<div class="quota modal__item">
-					<Multiselect v-model="newUser.quota"
+					<NcMultiselect v-model="newUser.quota"
 						:allow-empty="false"
 						:options="quotaOptions"
 						:placeholder="t('settings', 'Select user quota')"
@@ -128,7 +128,7 @@
 						@tag="validateQuota" />
 				</div>
 				<div v-if="showConfig.showLanguages" class="languages modal__item">
-					<Multiselect v-model="newUser.language"
+					<NcMultiselect v-model="newUser.language"
 						:allow-empty="false"
 						:options="languages"
 						:placeholder="t('settings', 'Default language')"
@@ -142,15 +142,15 @@
 				<div v-if="showConfig.showUserBackend" class="userBackend" />
 				<div v-if="showConfig.showLastLogin" class="lastLogin" />
 				<div class="user-actions">
-					<ButtonVue id="newsubmit"
+					<NcButton id="newsubmit"
 						type="primary"
 						native-type="submit"
 						value="">
 						{{ t('settings', 'Add a new user') }}
-					</ButtonVue>
+					</NcButton>
 				</div>
 			</form>
-		</Modal>
+		</NcModal>
 		<div id="grid-header"
 			:class="{'sticky': scrolled && !showConfig.showNewUserForm}"
 			class="row">
@@ -234,9 +234,9 @@
 import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 import InfiniteLoading from 'vue-infinite-loading'
 import Vue from 'vue'
-import Modal from '@nextcloud/vue/dist/Components/Modal'
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue'
-import Multiselect from '@nextcloud/vue/dist/Components/Multiselect'
+import NcModal from '@nextcloud/vue/dist/Components/NcModal'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton'
+import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect'
 
 import userRow from './UserList/UserRow'
 
@@ -265,11 +265,11 @@ const newUser = {
 export default {
 	name: 'UserList',
 	components: {
-		Modal,
+		NcModal,
 		userRow,
-		Multiselect,
+		NcMultiselect,
 		InfiniteLoading,
-		ButtonVue,
+		NcButton,
 	},
 	props: {
 		users: {
diff --git a/apps/settings/src/components/UserList/UserRow.vue b/apps/settings/src/components/UserList/UserRow.vue
index 5f8c93d0272..bc086adc5cb 100644
--- a/apps/settings/src/components/UserList/UserRow.vue
+++ b/apps/settings/src/components/UserList/UserRow.vue
@@ -133,7 +133,7 @@
 			<input class="icon-confirm" type="submit" value="">
 		</form>
 		<div :class="{'icon-loading-small': loading.groups}" class="groups">
-			<Multiselect :close-on-select="false"
+			<NcMultiselect :close-on-select="false"
 				:disabled="loading.groups||loading.all"
 				:limit="2"
 				:multiple="true"
@@ -150,12 +150,12 @@
 				@select="addUserGroup"
 				@tag="createGroup">
 				<span slot="noResult">{{ t('settings', 'No results') }}</span>
-			</Multiselect>
+			</NcMultiselect>
 		</div>
 		<div v-if="subAdminsGroups.length>0 && settings.isAdmin"
 			:class="{'icon-loading-small': loading.subadmins}"
 			class="subadmins">
-			<Multiselect :close-on-select="false"
+			<NcMultiselect :close-on-select="false"
 				:disabled="loading.subadmins||loading.all"
 				:limit="2"
 				:multiple="true"
@@ -169,12 +169,12 @@
 				@remove="removeUserSubAdmin"
 				@select="addUserSubAdmin">
 				<span slot="noResult">{{ t('settings', 'No results') }}</span>
-			</Multiselect>
+			</NcMultiselect>
 		</div>
 		<div v-tooltip.auto="usedSpace"
 			:class="{'icon-loading-small': loading.quota}"
 			class="quota">
-			<Multiselect :allow-empty="false"
+			<NcMultiselect :allow-empty="false"
 				:disabled="loading.quota||loading.all"
 				:options="quotaOptions"
 				:placeholder="t('settings', 'Select user quota')"
@@ -190,7 +190,7 @@
 		<div v-if="showConfig.showLanguages"
 			:class="{'icon-loading-small': loading.languages}"
 			class="languages">
-			<Multiselect :allow-empty="false"
+			<NcMultiselect :allow-empty="false"
 				:disabled="loading.languages||loading.all"
 				:options="languages"
 				:placeholder="t('settings', 'No language set')"
@@ -211,17 +211,17 @@
 		<div class="userActions">
 			<div v-if="!loading.all"
 				class="toggleUserActions">
-				<Actions>
-					<ActionButton icon="icon-checkmark"
+				<NcActions>
+					<NcActionButton icon="icon-checkmark"
 						@click="editing = false">
 						{{ t('settings', 'Done') }}
-					</ActionButton>
-				</Actions>
+					</NcActionButton>
+				</NcActions>
 				<div v-click-outside="hideMenu" class="userPopoverMenuWrapper">
 					<button class="icon-more"
 						@click.prevent="toggleMenu" />
 					<div :class="{ 'open': openedMenu }" class="popovermenu">
-						<PopoverMenu :menu="userActions" />
+						<NcPopoverMenu :menu="userActions" />
 					</div>
 				</div>
 			</div>
@@ -239,10 +239,10 @@ import ClickOutside from 'vue-click-outside'
 import Vue from 'vue'
 import VTooltip from 'v-tooltip'
 import {
-	PopoverMenu,
-	Multiselect,
-	Actions,
-	ActionButton,
+	NcPopoverMenu,
+	NcMultiselect,
+	NcActions,
+	NcActionButton,
 } from '@nextcloud/vue'
 import UserRowSimple from './UserRowSimple'
 import UserRowMixin from '../../mixins/UserRowMixin'
@@ -253,10 +253,10 @@ export default {
 	name: 'UserRow',
 	components: {
 		UserRowSimple,
-		PopoverMenu,
-		Actions,
-		ActionButton,
-		Multiselect,
+		NcPopoverMenu,
+		NcActions,
+		NcActionButton,
+		NcMultiselect,
 	},
 	directives: {
 		ClickOutside,
diff --git a/apps/settings/src/components/UserList/UserRowSimple.vue b/apps/settings/src/components/UserList/UserRowSimple.vue
index 8b3472cf3fa..105994e2f75 100644
--- a/apps/settings/src/components/UserList/UserRowSimple.vue
+++ b/apps/settings/src/components/UserList/UserRowSimple.vue
@@ -56,18 +56,18 @@
 
 		<div class="userActions">
 			<div v-if="canEdit && !loading.all" class="toggleUserActions">
-				<Actions>
-					<ActionButton icon="icon-rename" @click="toggleEdit">
+				<NcActions>
+					<NcActionButton icon="icon-rename" @click="toggleEdit">
 						{{ t('settings', 'Edit User') }}
-					</ActionButton>
-				</Actions>
+					</NcActionButton>
+				</NcActions>
 				<div class="userPopoverMenuWrapper">
 					<button v-click-outside="hideMenu"
 						class="icon-more"
 						:aria-label="t('settings', 'Toggle user actions menu')"
 						@click.prevent="toggleMenu" />
 					<div class="popovermenu" :class="{ 'open': openedMenu }" :aria-expanded="openedMenu">
-						<PopoverMenu :menu="userActions" />
+						<NcPopoverMenu :menu="userActions" />
 					</div>
 				</div>
 			</div>
@@ -80,18 +80,18 @@
 </template>
 
 <script>
-import PopoverMenu from '@nextcloud/vue/dist/Components/PopoverMenu'
-import Actions from '@nextcloud/vue/dist/Components/Actions'
-import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
+import NcPopoverMenu from '@nextcloud/vue/dist/Components/NcPopoverMenu'
+import NcActions from '@nextcloud/vue/dist/Components/NcActions'
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
 import ClickOutside from 'vue-click-outside'
 import { getCurrentUser } from '@nextcloud/auth'
 import UserRowMixin from '../../mixins/UserRowMixin'
 export default {
 	name: 'UserRowSimple',
 	components: {
-		PopoverMenu,
-		ActionButton,
-		Actions,
+		NcPopoverMenu,
+		NcActionButton,
+		NcActions,
 	},
 	directives: {
 		ClickOutside,
diff --git a/apps/settings/src/components/WebAuthn/Device.vue b/apps/settings/src/components/WebAuthn/Device.vue
index fc1bab3c8b0..d5a0623ab68 100644
--- a/apps/settings/src/components/WebAuthn/Device.vue
+++ b/apps/settings/src/components/WebAuthn/Device.vue
@@ -23,23 +23,23 @@
 	<div class="webauthn-device">
 		<span class="icon-webauthn-device" />
 		{{ name || t('settings', 'Unnamed device') }}
-		<Actions :force-menu="true">
-			<ActionButton icon="icon-delete" @click="$emit('delete')">
+		<NcActions :force-menu="true">
+			<NcActionButton icon="icon-delete" @click="$emit('delete')">
 				{{ t('settings', 'Delete') }}
-			</ActionButton>
-		</Actions>
+			</NcActionButton>
+		</NcActions>
 	</div>
 </template>
 
 <script>
-import Actions from '@nextcloud/vue/dist/Components/Actions'
-import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
+import NcActions from '@nextcloud/vue/dist/Components/NcActions'
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
 
 export default {
 	name: 'Device',
 	components: {
-		ActionButton,
-		Actions,
+		NcActionButton,
+		NcActions,
 	},
 	props: {
 		name: {
diff --git a/apps/settings/src/views/Apps.vue b/apps/settings/src/views/Apps.vue
index ee7f74c7877..ff7c05cdcd7 100644
--- a/apps/settings/src/views/Apps.vue
+++ b/apps/settings/src/views/Apps.vue
@@ -21,50 +21,50 @@
   -->
 
 <template>
-	<Content app-name="settings"
+	<NcContent app-name="settings"
 		:class="{ 'with-app-sidebar': app}"
 		:content-class="{ 'icon-loading': loadingList }"
 		:navigation-class="{ 'icon-loading': loading }">
 		<!-- Categories & filters -->
-		<AppNavigation>
+		<NcAppNavigation>
 			<template #list>
-				<AppNavigationItem id="app-category-your-apps"
+				<NcAppNavigationItem id="app-category-your-apps"
 					:to="{ name: 'apps' }"
 					:exact="true"
 					icon="icon-category-installed"
 					:title="t('settings', 'Your apps')" />
-				<AppNavigationItem id="app-category-enabled"
+				<NcAppNavigationItem id="app-category-enabled"
 					:to="{ name: 'apps-category', params: { category: 'enabled' } }"
 					icon="icon-category-enabled"
 					:title="t('settings', 'Active apps')" />
-				<AppNavigationItem id="app-category-disabled"
+				<NcAppNavigationItem id="app-category-disabled"
 					:to="{ name: 'apps-category', params: { category: 'disabled' } }"
 					icon="icon-category-disabled"
 					:title="t('settings', 'Disabled apps')" />
-				<AppNavigationItem v-if="updateCount > 0"
+				<NcAppNavigationItem v-if="updateCount > 0"
 					id="app-category-updates"
 					:to="{ name: 'apps-category', params: { category: 'updates' } }"
 					icon="icon-download"
 					:title="t('settings', 'Updates')">
-					<AppNavigationCounter slot="counter">
+					<NcAppNavigationCounter slot="counter">
 						{{ updateCount }}
-					</AppNavigationCounter>
-				</AppNavigationItem>
-				<AppNavigationItem id="app-category-your-bundles"
+					</NcAppNavigationCounter>
+				</NcAppNavigationItem>
+				<NcAppNavigationItem id="app-category-your-bundles"
 					:to="{ name: 'apps-category', params: { category: 'app-bundles' } }"
 					icon="icon-category-app-bundles"
 					:title="t('settings', 'App bundles')" />
 
-				<AppNavigationSpacer />
+				<NcAppNavigationSpacer />
 
 				<!-- App store categories -->
 				<template v-if="settings.appstoreEnabled">
-					<AppNavigationItem id="app-category-featured"
+					<NcAppNavigationItem id="app-category-featured"
 						:to="{ name: 'apps-category', params: { category: 'featured' } }"
 						icon="icon-favorite"
 						:title="t('settings', 'Featured apps')" />
 
-					<AppNavigationItem v-for="cat in categories"
+					<NcAppNavigationItem v-for="cat in categories"
 						:key="'icon-category-' + cat.ident"
 						:icon="'icon-category-' + cat.ident"
 						:to="{
@@ -74,19 +74,19 @@
 						:title="cat.displayName" />
 				</template>
 
-				<AppNavigationItem id="app-developer-docs"
+				<NcAppNavigationItem id="app-developer-docs"
 					:title="t('settings', 'Developer documentation') + ' ↗'"
 					@click="openDeveloperDocumentation" />
 			</template>
-		</AppNavigation>
+		</NcAppNavigation>
 
 		<!-- Apps list -->
-		<AppContent class="app-settings-content" :class="{ 'icon-loading': loadingList }">
+		<NcAppContent class="app-settings-content" :class="{ 'icon-loading': loadingList }">
 			<AppList :category="category" :app="app" :search="searchQuery" />
-		</AppContent>
+		</NcAppContent>
 
 		<!-- Selected app details -->
-		<AppSidebar v-if="id && app"
+		<NcAppSidebar v-if="id && app"
 			v-bind="appSidebar"
 			:class="{'app-sidebar--without-background': !appSidebar.background}"
 			@close="hideAppDetails">
@@ -114,13 +114,13 @@
 
 			<!-- Tab content -->
 
-			<AppSidebarTab id="desc"
+			<NcAppSidebarTab id="desc"
 				icon="icon-category-office"
 				:name="t('settings', 'Details')"
 				:order="0">
 				<AppDetails :app="app" />
-			</AppSidebarTab>
-			<AppSidebarTab v-if="app.appstoreData && app.releases[0].translations.en.changelog"
+			</NcAppSidebarTab>
+			<NcAppSidebarTab v-if="app.appstoreData && app.releases[0].translations.en.changelog"
 				id="desca"
 				icon="icon-category-organization"
 				:name="t('settings', 'Changelog')"
@@ -129,9 +129,9 @@
 					<h2>{{ release.version }}</h2>
 					<Markdown v-if="changelog(release)" :text="changelog(release)" />
 				</div>
-			</AppSidebarTab>
-		</AppSidebar>
-	</Content>
+			</NcAppSidebarTab>
+		</NcAppSidebar>
+	</NcContent>
 </template>
 
 <script>
@@ -139,14 +139,14 @@ import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 import Vue from 'vue'
 import VueLocalStorage from 'vue-localstorage'
 
-import AppContent from '@nextcloud/vue/dist/Components/AppContent'
-import AppNavigation from '@nextcloud/vue/dist/Components/AppNavigation'
-import AppNavigationCounter from '@nextcloud/vue/dist/Components/AppNavigationCounter'
-import AppNavigationItem from '@nextcloud/vue/dist/Components/AppNavigationItem'
-import AppNavigationSpacer from '@nextcloud/vue/dist/Components/AppNavigationSpacer'
-import AppSidebar from '@nextcloud/vue/dist/Components/AppSidebar'
-import AppSidebarTab from '@nextcloud/vue/dist/Components/AppSidebarTab'
-import Content from '@nextcloud/vue/dist/Components/Content'
+import NcAppContent from '@nextcloud/vue/dist/Components/NcAppContent'
+import NcAppNavigation from '@nextcloud/vue/dist/Components/NcAppNavigation'
+import NcAppNavigationCounter from '@nextcloud/vue/dist/Components/NcAppNavigationCounter'
+import NcAppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem'
+import NcAppNavigationSpacer from '@nextcloud/vue/dist/Components/NcAppNavigationSpacer'
+import NcAppSidebar from '@nextcloud/vue/dist/Components/NcAppSidebar'
+import NcAppSidebarTab from '@nextcloud/vue/dist/Components/NcAppSidebarTab'
+import NcContent from '@nextcloud/vue/dist/Components/NcContent'
 
 import AppList from '../components/AppList'
 import AppDetails from '../components/AppDetails'
@@ -160,17 +160,17 @@ export default {
 	name: 'Apps',
 
 	components: {
-		AppContent,
+		NcAppContent,
 		AppDetails,
 		AppList,
-		AppNavigation,
-		AppNavigationCounter,
-		AppNavigationItem,
-		AppNavigationSpacer,
+		NcAppNavigation,
+		NcAppNavigationCounter,
+		NcAppNavigationItem,
+		NcAppNavigationSpacer,
 		AppScore,
-		AppSidebar,
-		AppSidebarTab,
-		Content,
+		NcAppSidebar,
+		NcAppSidebarTab,
+		NcContent,
 		Markdown,
 	},
 
diff --git a/apps/settings/src/views/Users.vue b/apps/settings/src/views/Users.vue
index c3d3d9f3c72..ce3ce235c31 100644
--- a/apps/settings/src/views/Users.vue
+++ b/apps/settings/src/views/Users.vue
@@ -21,16 +21,16 @@
   -->
 
 <template>
-	<Content app-name="settings" :navigation-class="{ 'icon-loading': loadingAddGroup }">
-		<AppNavigation>
-			<AppNavigationNew button-id="new-user-button"
+	<NcContent app-name="settings" :navigation-class="{ 'icon-loading': loadingAddGroup }">
+		<NcAppNavigation>
+			<NcAppNavigationNew button-id="new-user-button"
 				:text="t('settings','New user')"
 				button-class="icon-add"
 				@click="showNewUserMenu"
 				@keyup.enter="showNewUserMenu"
 				@keyup.space="showNewUserMenu" />
 			<template #list>
-				<AppNavigationItem id="addgroup"
+				<NcAppNavigationItem id="addgroup"
 					ref="addGroup"
 					:edit-placeholder="t('settings', 'Enter group name')"
 					:editable="true"
@@ -39,39 +39,39 @@
 					icon="icon-add"
 					@click="showAddGroupForm"
 					@update:title="createGroup" />
-				<AppNavigationItem id="everyone"
+				<NcAppNavigationItem id="everyone"
 					:exact="true"
 					:title="t('settings', 'Active users')"
 					:to="{ name: 'users' }"
 					icon="icon-contacts-dark">
-					<AppNavigationCounter v-if="userCount > 0" slot="counter">
+					<NcAppNavigationCounter v-if="userCount > 0" slot="counter">
 						{{ userCount }}
-					</AppNavigationCounter>
-				</AppNavigationItem>
-				<AppNavigationItem v-if="settings.isAdmin"
+					</NcAppNavigationCounter>
+				</NcAppNavigationItem>
+				<NcAppNavigationItem v-if="settings.isAdmin"
 					id="admin"
 					:exact="true"
 					:title="t('settings', 'Admins')"
 					:to="{ name: 'group', params: { selectedGroup: 'admin' } }"
 					icon="icon-user-admin">
-					<AppNavigationCounter v-if="adminGroupMenu.count" slot="counter">
+					<NcAppNavigationCounter v-if="adminGroupMenu.count" slot="counter">
 						{{ adminGroupMenu.count }}
-					</AppNavigationCounter>
-				</AppNavigationItem>
+					</NcAppNavigationCounter>
+				</NcAppNavigationItem>
 
 				<!-- Hide the disabled if none, if we don't have the data (-1) show it -->
-				<AppNavigationItem v-if="disabledGroupMenu.usercount > 0 || disabledGroupMenu.usercount === -1"
+				<NcAppNavigationItem v-if="disabledGroupMenu.usercount > 0 || disabledGroupMenu.usercount === -1"
 					id="disabled"
 					:exact="true"
 					:title="t('settings', 'Disabled users')"
 					:to="{ name: 'group', params: { selectedGroup: 'disabled' } }"
 					icon="icon-disabled-users">
-					<AppNavigationCounter v-if="disabledGroupMenu.usercount > 0" slot="counter">
+					<NcAppNavigationCounter v-if="disabledGroupMenu.usercount > 0" slot="counter">
 						{{ disabledGroupMenu.usercount }}
-					</AppNavigationCounter>
-				</AppNavigationItem>
+					</NcAppNavigationCounter>
+				</NcAppNavigationItem>
 
-				<AppNavigationCaption v-if="groupList.length > 0" :title="t('settings', 'Groups')" />
+				<NcAppNavigationCaption v-if="groupList.length > 0" :title="t('settings', 'Groups')" />
 				<GroupListItem v-for="group in groupList"
 					:id="group.id"
 					:key="group.id"
@@ -79,10 +79,10 @@
 					:count="group.count" />
 			</template>
 			<template #footer>
-				<AppNavigationSettings>
+				<NcAppNavigationSettings>
 					<div>
 						<p>{{ t('settings', 'Default quota:') }}</p>
-						<Multiselect :value="defaultQuota"
+						<NcMultiselect :value="defaultQuota"
 							:options="quotaOptions"
 							tag-placeholder="create"
 							:placeholder="t('settings', 'Select default quota')"
@@ -129,30 +129,30 @@
 							class="checkbox">
 						<label for="sendWelcomeMail">{{ t('settings', 'Send email to new user') }}</label>
 					</div>
-				</AppNavigationSettings>
+				</NcAppNavigationSettings>
 			</template>
-		</AppNavigation>
-		<AppContent>
+		</NcAppNavigation>
+		<NcAppContent>
 			<UserList :users="users"
 				:show-config="showConfig"
 				:selected-group="selectedGroupDecoded"
 				:external-actions="externalActions" />
-		</AppContent>
-	</Content>
+		</NcAppContent>
+	</NcContent>
 </template>
 
 <script>
-import AppContent from '@nextcloud/vue/dist/Components/AppContent'
-import AppNavigation from '@nextcloud/vue/dist/Components/AppNavigation'
-import AppNavigationCaption from '@nextcloud/vue/dist/Components/AppNavigationCaption'
-import AppNavigationCounter from '@nextcloud/vue/dist/Components/AppNavigationCounter'
-import AppNavigationItem from '@nextcloud/vue/dist/Components/AppNavigationItem'
-import AppNavigationNew from '@nextcloud/vue/dist/Components/AppNavigationNew'
-import AppNavigationSettings from '@nextcloud/vue/dist/Components/AppNavigationSettings'
+import NcAppContent from '@nextcloud/vue/dist/Components/NcAppContent'
+import NcAppNavigation from '@nextcloud/vue/dist/Components/NcAppNavigation'
+import NcAppNavigationCaption from '@nextcloud/vue/dist/Components/NcAppNavigationCaption'
+import NcAppNavigationCounter from '@nextcloud/vue/dist/Components/NcAppNavigationCounter'
+import NcAppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem'
+import NcAppNavigationNew from '@nextcloud/vue/dist/Components/NcAppNavigationNew'
+import NcAppNavigationSettings from '@nextcloud/vue/dist/Components/NcAppNavigationSettings'
 import axios from '@nextcloud/axios'
-import Content from '@nextcloud/vue/dist/Components/Content'
+import NcContent from '@nextcloud/vue/dist/Components/NcContent'
 import { generateUrl } from '@nextcloud/router'
-import Multiselect from '@nextcloud/vue/dist/Components/Multiselect'
+import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect'
 import Vue from 'vue'
 import VueLocalStorage from 'vue-localstorage'
 
@@ -164,16 +164,16 @@ Vue.use(VueLocalStorage)
 export default {
 	name: 'Users',
 	components: {
-		AppContent,
-		AppNavigation,
-		AppNavigationCaption,
-		AppNavigationCounter,
-		AppNavigationItem,
-		AppNavigationNew,
-		AppNavigationSettings,
-		Content,
+		NcAppContent,
+		NcAppNavigation,
+		NcAppNavigationCaption,
+		NcAppNavigationCounter,
+		NcAppNavigationItem,
+		NcAppNavigationNew,
+		NcAppNavigationSettings,
+		NcContent,
 		GroupListItem,
-		Multiselect,
+		NcMultiselect,
 		UserList,
 	},
 	props: {
diff --git a/apps/sharebymail/src/components/AdminSettings.vue b/apps/sharebymail/src/components/AdminSettings.vue
index c84ded9bb2a..861afa4add1 100644
--- a/apps/sharebymail/src/components/AdminSettings.vue
+++ b/apps/sharebymail/src/components/AdminSettings.vue
@@ -21,25 +21,25 @@
 -->
 
 <template>
-	<SettingsSection :title="t('sharebymail', 'Share by mail')"
+	<NcSettingsSection :title="t('sharebymail', 'Share by mail')"
 		:description="t('sharebymail', 'Allows users to share a personalized link to a file or folder by putting in an email address.')">
-		<CheckboxRadioSwitch type="switch"
+		<NcCheckboxRadioSwitch type="switch"
 			:checked.sync="sendPasswordMail"
 			@update:checked="update('sendpasswordmail', sendPasswordMail)">
 			{{ t('sharebymail', 'Send password by mail') }}
-		</CheckboxRadioSwitch>
+		</NcCheckboxRadioSwitch>
 
-		<CheckboxRadioSwitch type="switch"
+		<NcCheckboxRadioSwitch type="switch"
 			:checked.sync="replyToInitiator"
 			@update:checked="update('replyToInitiator', replyToInitiator)">
 			{{ t('sharebymail', 'Reply to initiator') }}
-		</CheckboxRadioSwitch>
-	</SettingsSection>
+		</NcCheckboxRadioSwitch>
+	</NcSettingsSection>
 </template>
 
 <script>
-import CheckboxRadioSwitch from '@nextcloud/vue/dist/Components/CheckboxRadioSwitch'
-import SettingsSection from '@nextcloud/vue/dist/Components/SettingsSection'
+import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch'
+import NcSettingsSection from '@nextcloud/vue/dist/Components/NcSettingsSection'
 import { loadState } from '@nextcloud/initial-state'
 import { showError } from '@nextcloud/dialogs'
 import axios from '@nextcloud/axios'
@@ -49,8 +49,8 @@ import confirmPassword from '@nextcloud/password-confirmation'
 export default {
 	name: 'AdminSettings',
 	components: {
-		CheckboxRadioSwitch,
-		SettingsSection,
+		NcCheckboxRadioSwitch,
+		NcSettingsSection,
 	},
 	data() {
 		return {
diff --git a/apps/theming/src/UserThemes.vue b/apps/theming/src/UserThemes.vue
index 381cb142a71..8e7f1d54e37 100644
--- a/apps/theming/src/UserThemes.vue
+++ b/apps/theming/src/UserThemes.vue
@@ -1,5 +1,5 @@
 <template>
-	<SettingsSection class="theming" :title="t('themes', 'Appearance and accessibility')">
+	<NcSettingsSection class="theming" :title="t('themes', 'Appearance and accessibility')">
 		<p v-html="description" />
 		<p v-html="descriptionDetail" />
 
@@ -23,14 +23,14 @@
 				type="font"
 				@change="changeFont" />
 		</div>
-	</SettingsSection>
+	</NcSettingsSection>
 </template>
 
 <script>
 import { generateOcsUrl } from '@nextcloud/router'
 import { loadState } from '@nextcloud/initial-state'
 import axios from '@nextcloud/axios'
-import SettingsSection from '@nextcloud/vue/dist/Components/SettingsSection'
+import NcSettingsSection from '@nextcloud/vue/dist/Components/NcSettingsSection'
 
 import ItemPreview from './components/ItemPreview'
 
@@ -43,7 +43,7 @@ export default {
 	name: 'UserThemes',
 	components: {
 		ItemPreview,
-		SettingsSection,
+		NcSettingsSection,
 	},
 
 	data() {
diff --git a/apps/theming/src/components/ItemPreview.vue b/apps/theming/src/components/ItemPreview.vue
index 90fee453ddf..015a7480c72 100644
--- a/apps/theming/src/components/ItemPreview.vue
+++ b/apps/theming/src/components/ItemPreview.vue
@@ -7,25 +7,25 @@
 			<span v-if="enforced" class="theming__preview-warning" role="note">
 				{{ t('theming', 'Theme selection is enforced') }}
 			</span>
-			<CheckboxRadioSwitch class="theming__preview-toggle"
+			<NcCheckboxRadioSwitch class="theming__preview-toggle"
 				:checked.sync="checked"
 				:disabled="enforced"
 				:name="name"
 				:type="switchType">
 				{{ theme.enableLabel }}
-			</CheckboxRadioSwitch>
+			</NcCheckboxRadioSwitch>
 		</div>
 	</div>
 </template>
 
 <script>
 import { generateFilePath } from '@nextcloud/router'
-import CheckboxRadioSwitch from '@nextcloud/vue/dist/Components/CheckboxRadioSwitch'
+import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch'
 
 export default {
 	name: 'ItemPreview',
 	components: {
-		CheckboxRadioSwitch,
+		NcCheckboxRadioSwitch,
 	},
 	props: {
 		enforced: {
diff --git a/apps/updatenotification/src/components/UpdateNotification.vue b/apps/updatenotification/src/components/UpdateNotification.vue
index 5039ac22bb7..c18d65caa70 100644
--- a/apps/updatenotification/src/components/UpdateNotification.vue
+++ b/apps/updatenotification/src/components/UpdateNotification.vue
@@ -63,7 +63,7 @@
 						<div class="toggleWhatsNew">
 							<a v-click-outside="hideMenu" class="button" @click="toggleMenu">{{ t('updatenotification', 'What\'s new?') }}</a>
 							<div class="popovermenu" :class="{ 'menu-center': true, open: openedWhatsNew }">
-								<PopoverMenu :menu="whatsNew" />
+								<NcPopoverMenu :menu="whatsNew" />
 							</div>
 						</div>
 					</div>
@@ -96,7 +96,7 @@
 					<span class="icon-triangle-s" />
 				</span>
 				<div class="popovermenu menu menu-center" :class="{ 'show-menu': openedUpdateChannelMenu}">
-					<PopoverMenu :menu="channelList" />
+					<NcPopoverMenu :menu="channelList" />
 				</div>
 			</div>
 		</h3>
@@ -108,7 +108,7 @@
 
 		<p id="oca_updatenotification_groups">
 			{{ t('updatenotification', 'Notify members of the following groups about available updates:') }}
-			<Multiselect v-model="notifyGroups"
+			<NcMultiselect v-model="notifyGroups"
 				:options="availableGroups"
 				:multiple="true"
 				label="label"
@@ -123,8 +123,8 @@
 
 <script>
 import { generateUrl, getRootUrl, generateOcsUrl } from '@nextcloud/router'
-import PopoverMenu from '@nextcloud/vue/dist/Components/PopoverMenu'
-import Multiselect from '@nextcloud/vue/dist/Components/Multiselect'
+import NcPopoverMenu from '@nextcloud/vue/dist/Components/NcPopoverMenu'
+import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect'
 import { VTooltip } from 'v-tooltip'
 import ClickOutside from 'vue-click-outside'
 
@@ -133,8 +133,8 @@ VTooltip.options.defaultHtml = false
 export default {
 	name: 'UpdateNotification',
 	components: {
-		Multiselect,
-		PopoverMenu,
+		NcMultiselect,
+		NcPopoverMenu,
 	},
 	directives: {
 		ClickOutside,
diff --git a/apps/user_status/src/components/ClearAtSelect.vue b/apps/user_status/src/components/ClearAtSelect.vue
index d0a88ea8255..a2779389691 100644
--- a/apps/user_status/src/components/ClearAtSelect.vue
+++ b/apps/user_status/src/components/ClearAtSelect.vue
@@ -24,7 +24,7 @@
 		<span class="clear-at-select__label">
 			{{ $t('user_status', 'Clear status after') }}
 		</span>
-		<Multiselect label="label"
+		<NcMultiselect label="label"
 			:value="option"
 			:options="options"
 			open-direction="top"
@@ -33,14 +33,14 @@
 </template>
 
 <script>
-import Multiselect from '@nextcloud/vue/dist/Components/Multiselect'
+import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect'
 import { getAllClearAtOptions } from '../services/clearAtOptionsService'
 import { clearAtFilter } from '../filters/clearAtFilter'
 
 export default {
 	name: 'ClearAtSelect',
 	components: {
-		Multiselect,
+		NcMultiselect,
 	},
 	props: {
 		clearAt: {
diff --git a/apps/user_status/src/components/SetStatusModal.vue b/apps/user_status/src/components/SetStatusModal.vue
index c5387536e57..4584bd3c849 100644
--- a/apps/user_status/src/components/SetStatusModal.vue
+++ b/apps/user_status/src/components/SetStatusModal.vue
@@ -20,7 +20,7 @@
   -->
 
 <template>
-	<Modal size="normal"
+	<NcModal size="normal"
 		:title="$t('user_status', 'Set status')"
 		@close="closeModal">
 		<div class="set-status-modal">
@@ -41,11 +41,11 @@
 				<h3>{{ $t('user_status', 'Status message') }}</h3>
 			</div>
 			<div class="set-status-modal__custom-input">
-				<EmojiPicker @select="setIcon">
+				<NcEmojiPicker @select="setIcon">
 					<button class="custom-input__emoji-button">
 						{{ visibleIcon }}
 					</button>
-				</EmojiPicker>
+				</NcEmojiPicker>
 				<CustomMessageInput ref="customMessageInput"
 					:message="message"
 					@change="setMessage"
@@ -55,30 +55,30 @@
 			<ClearAtSelect :clear-at="clearAt"
 				@select-clear-at="setClearAt" />
 			<div class="status-buttons">
-				<ButtonVue :wide="true"
+				<NcButton :wide="true"
 					type="tertiary"
 					:text="$t('user_status', 'Clear status message')"
 					:disabled="isSavingStatus"
 					@click="clearStatus">
 					{{ $t('user_status', 'Clear status message') }}
-				</ButtonVue>
-				<ButtonVue :wide="true"
+				</NcButton>
+				<NcButton :wide="true"
 					type="primary"
 					:text="$t('user_status', 'Set status message')"
 					:disabled="isSavingStatus"
 					@click="saveStatus">
 					{{ $t('user_status', 'Set status message') }}
-				</ButtonVue>
+				</NcButton>
 			</div>
 		</div>
-	</Modal>
+	</NcModal>
 </template>
 
 <script>
 import { showError } from '@nextcloud/dialogs'
-import EmojiPicker from '@nextcloud/vue/dist/Components/EmojiPicker'
-import Modal from '@nextcloud/vue/dist/Components/Modal'
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue'
+import NcEmojiPicker from '@nextcloud/vue/dist/Components/NcEmojiPicker'
+import NcModal from '@nextcloud/vue/dist/Components/NcModal'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton'
 import { getAllStatusOptions } from '../services/statusOptionsService'
 import OnlineStatusMixin from '../mixins/OnlineStatusMixin'
 import PredefinedStatusesList from './PredefinedStatusesList'
@@ -92,11 +92,11 @@ export default {
 	components: {
 		ClearAtSelect,
 		CustomMessageInput,
-		EmojiPicker,
-		Modal,
+		NcEmojiPicker,
+		NcModal,
 		OnlineStatusSelect,
 		PredefinedStatusesList,
-		ButtonVue,
+		NcButton,
 	},
 	mixins: [OnlineStatusMixin],
 
diff --git a/apps/user_status/src/menu.js b/apps/user_status/src/menu.js
index 19d21939544..8714df3a1ff 100644
--- a/apps/user_status/src/menu.js
+++ b/apps/user_status/src/menu.js
@@ -26,7 +26,7 @@ import Vue from 'vue'
 import { getRequestToken } from '@nextcloud/auth'
 import UserStatus from './UserStatus'
 import store from './store'
-import Avatar from '@nextcloud/vue/dist/Components/Avatar'
+import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar'
 import { loadState } from '@nextcloud/initial-state'
 
 // eslint-disable-next-line camelcase
@@ -50,8 +50,8 @@ const propsData = {
 	disableTooltip: true,
 }
 
-const AvatarInMenu = Vue.extend(Avatar)
-new AvatarInMenu({ propsData }).$mount('#avatardiv-menu')
+const NcAvatarInMenu = Vue.extend(NcAvatar)
+new NcAvatarInMenu({ propsData }).$mount('#avatardiv-menu')
 
 // Register settings menu entry
 export default new Vue({
diff --git a/apps/user_status/src/views/Dashboard.vue b/apps/user_status/src/views/Dashboard.vue
index b8f68d77fdc..2b24ec6032f 100644
--- a/apps/user_status/src/views/Dashboard.vue
+++ b/apps/user_status/src/views/Dashboard.vue
@@ -27,7 +27,7 @@
 			<DashboardWidgetItem :main-text="item.mainText"
 				:sub-text="item.subText">
 				<template #avatar>
-					<Avatar class="item-avatar"
+					<NcAvatar class="item-avatar"
 						:size="44"
 						:user="item.avatarUsername"
 						:display-name="item.mainText"
@@ -37,12 +37,12 @@
 			</DashboardWidgetItem>
 		</template>
 		<template #empty-content>
-			<EmptyContent id="user_status-widget-empty-content">
+			<NcEmptyContent id="user_status-widget-empty-content">
 				<template #icon>
 					<div class="icon-user-status" />
 				</template>
 				{{ t('user_status', 'No recent status changes') }}
-			</EmptyContent>
+			</NcEmptyContent>
 		</template>
 	</DashboardWidget>
 </template>
@@ -50,17 +50,17 @@
 <script>
 import { DashboardWidget, DashboardWidgetItem } from '@nextcloud/vue-dashboard'
 import { loadState } from '@nextcloud/initial-state'
-import Avatar from '@nextcloud/vue/dist/Components/Avatar'
-import EmptyContent from '@nextcloud/vue/dist/Components/EmptyContent'
+import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar'
+import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent'
 import moment from '@nextcloud/moment'
 
 export default {
 	name: 'Dashboard',
 	components: {
-		Avatar,
+		NcAvatar,
 		DashboardWidget,
 		DashboardWidgetItem,
-		EmptyContent,
+		NcEmptyContent,
 	},
 	data() {
 		return {
diff --git a/apps/weather_status/src/App.vue b/apps/weather_status/src/App.vue
index 89482f61124..bba51163ec8 100644
--- a/apps/weather_status/src/App.vue
+++ b/apps/weather_status/src/App.vue
@@ -22,51 +22,51 @@
 <template>
 	<li :class="{ inline }">
 		<div id="weather-status-menu-item">
-			<Actions class="weather-status-menu-item__subheader"
+			<NcActions class="weather-status-menu-item__subheader"
 				:default-icon="weatherIcon"
 				:menu-title="currentWeatherMessage">
-				<ActionText v-if="gotWeather"
+				<NcActionText v-if="gotWeather"
 					:icon="futureWeatherIcon">
 					{{ forecastMessage }}
-				</ActionText>
-				<ActionLink v-if="gotWeather"
+				</NcActionText>
+				<NcActionLink v-if="gotWeather"
 					icon="icon-address"
 					target="_blank"
 					:href="weatherLinkTarget"
 					:close-after-click="true">
 					{{ locationText }}
-				</ActionLink>
-				<ActionButton v-if="gotWeather"
+				</NcActionLink>
+				<NcActionButton v-if="gotWeather"
 					:icon="addRemoveFavoriteIcon"
 					@click="onAddRemoveFavoriteClick">
 					{{ addRemoveFavoriteText }}
-				</ActionButton>
-				<ActionSeparator v-if="address && !errorMessage" />
-				<ActionButton icon="icon-crosshair"
+				</NcActionButton>
+				<NcActionSeparator v-if="address && !errorMessage" />
+				<NcActionButton icon="icon-crosshair"
 					:close-after-click="true"
 					@click="onBrowserLocationClick">
 					{{ t('weather_status', 'Detect location') }}
-				</ActionButton>
-				<ActionInput ref="addressInput"
+				</NcActionButton>
+				<NcActionInput ref="addressInput"
 					:disabled="false"
 					icon="icon-rename"
 					type="text"
 					value=""
 					@submit="onAddressSubmit">
 					{{ t('weather_status', 'Set custom address') }}
-				</ActionInput>
-				<ActionButton v-show="favorites.length > 0"
+				</NcActionInput>
+				<NcActionButton v-show="favorites.length > 0"
 					:icon="toggleFavoritesIcon"
 					@click="showFavorites = !showFavorites">
 					{{ t('weather_status', 'Favorites') }}
-				</ActionButton>
-				<ActionButton v-for="f in displayedFavorites"
+				</NcActionButton>
+				<NcActionButton v-for="f in displayedFavorites"
 					:key="f"
 					icon="icon-starred"
 					@click="onFavoriteClick($event, f)">
 					{{ f }}
-				</ActionButton>
-			</Actions>
+				</NcActionButton>
+			</NcActions>
 		</div>
 	</li>
 </template>
@@ -75,12 +75,12 @@
 import { showError } from '@nextcloud/dialogs'
 import moment from '@nextcloud/moment'
 import { getLocale } from '@nextcloud/l10n'
-import Actions from '@nextcloud/vue/dist/Components/Actions'
-import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
-import ActionInput from '@nextcloud/vue/dist/Components/ActionInput'
-import ActionLink from '@nextcloud/vue/dist/Components/ActionLink'
-import ActionSeparator from '@nextcloud/vue/dist/Components/ActionSeparator'
-import ActionText from '@nextcloud/vue/dist/Components/ActionText'
+import NcActions from '@nextcloud/vue/dist/Components/NcActions'
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
+import NcActionInput from '@nextcloud/vue/dist/Components/NcActionInput'
+import NcActionLink from '@nextcloud/vue/dist/Components/NcActionLink'
+import NcActionSeparator from '@nextcloud/vue/dist/Components/NcActionSeparator'
+import NcActionText from '@nextcloud/vue/dist/Components/NcActionText'
 import * as network from './services/weatherStatusService'
 
 const MODE_BROWSER_LOCATION = 1
@@ -193,7 +193,12 @@ const weatherOptions = {
 export default {
 	name: 'App',
 	components: {
-		Actions, ActionButton, ActionInput, ActionLink, ActionSeparator, ActionText,
+		NcActions,
+		NcActionButton,
+		NcActionInput,
+		NcActionLink,
+		NcActionSeparator,
+		NcActionText,
 	},
 	props: {
 		inline: {
diff --git a/apps/workflowengine/src/components/Check.vue b/apps/workflowengine/src/components/Check.vue
index d1c18f9d8a0..56ba68ee01e 100644
--- a/apps/workflowengine/src/components/Check.vue
+++ b/apps/workflowengine/src/components/Check.vue
@@ -1,6 +1,6 @@
 <template>
 	<div v-click-outside="hideDelete" class="check" @click="showDelete">
-		<Multiselect ref="checkSelector"
+		<NcMultiselect ref="checkSelector"
 			v-model="currentOption"
 			:options="options"
 			label="name"
@@ -8,7 +8,7 @@
 			:allow-empty="false"
 			:placeholder="t('workflowengine', 'Select a filter')"
 			@input="updateCheck" />
-		<Multiselect v-model="currentOperator"
+		<NcMultiselect v-model="currentOperator"
 			:disabled="!currentOption"
 			:options="operators"
 			class="comparator"
@@ -34,24 +34,24 @@
 			:placeholder="valuePlaceholder"
 			class="option"
 			@input="updateCheck">
-		<Actions v-if="deleteVisible || !currentOption">
-			<ActionButton icon="icon-close" @click="$emit('remove')" />
-		</Actions>
+		<NcActions v-if="deleteVisible || !currentOption">
+			<NcActionButton icon="icon-close" @click="$emit('remove')" />
+		</NcActions>
 	</div>
 </template>
 
 <script>
-import Multiselect from '@nextcloud/vue/dist/Components/Multiselect'
-import Actions from '@nextcloud/vue/dist/Components/Actions'
-import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
+import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect'
+import NcActions from '@nextcloud/vue/dist/Components/NcActions'
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
 import ClickOutside from 'vue-click-outside'
 
 export default {
 	name: 'Check',
 	components: {
-		ActionButton,
-		Actions,
-		Multiselect,
+		NcActionButton,
+		NcActions,
+		NcMultiselect,
 	},
 	directives: {
 		ClickOutside,
diff --git a/apps/workflowengine/src/components/Checks/FileMimeType.vue b/apps/workflowengine/src/components/Checks/FileMimeType.vue
index 7c4ea4d145e..86f1a6b8cb1 100644
--- a/apps/workflowengine/src/components/Checks/FileMimeType.vue
+++ b/apps/workflowengine/src/components/Checks/FileMimeType.vue
@@ -22,7 +22,7 @@
 
 <template>
 	<div>
-		<Multiselect :value="currentValue"
+		<NcMultiselect :value="currentValue"
 			:placeholder="t('workflowengine', 'Select a file type')"
 			label="label"
 			track-by="pattern"
@@ -46,7 +46,7 @@
 					alt="">
 				<span class="option__title">{{ props.option.label }}</span>
 			</template>
-		</Multiselect>
+		</NcMultiselect>
 		<input v-if="!isPredefined"
 			type="text"
 			:value="currentValue.pattern"
@@ -56,14 +56,14 @@
 </template>
 
 <script>
-import Multiselect from '@nextcloud/vue/dist/Components/Multiselect'
+import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect'
 import valueMixin from './../../mixins/valueMixin'
 import { imagePath } from '@nextcloud/router'
 
 export default {
 	name: 'FileMimeType',
 	components: {
-		Multiselect,
+		NcMultiselect,
 	},
 	mixins: [
 		valueMixin,
diff --git a/apps/workflowengine/src/components/Checks/MultiselectTag/MultiselectTag.vue b/apps/workflowengine/src/components/Checks/MultiselectTag/MultiselectTag.vue
index c5419f69c3f..780d66fd45e 100644
--- a/apps/workflowengine/src/components/Checks/MultiselectTag/MultiselectTag.vue
+++ b/apps/workflowengine/src/components/Checks/MultiselectTag/MultiselectTag.vue
@@ -21,7 +21,7 @@
   -->
 
 <template>
-	<Multiselect v-model="inputValObjects"
+	<NcMultiselect v-model="inputValObjects"
 		:options="tags"
 		:options-limit="5"
 		:placeholder="label"
@@ -37,18 +37,18 @@
 		<template #option="scope">
 			{{ tagLabel(scope.option) }}
 		</template>
-	</multiselect>
+	</NcMultiselect>
 </template>
 
 <script>
-import Multiselect from '@nextcloud/vue/dist/Components/Multiselect'
+import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect'
 import { searchTags } from './api'
 
 let uuid = 0
 export default {
 	name: 'MultiselectTag',
 	components: {
-		Multiselect,
+		NcMultiselect,
 	},
 	props: {
 		label: {
diff --git a/apps/workflowengine/src/components/Checks/RequestTime.vue b/apps/workflowengine/src/components/Checks/RequestTime.vue
index 6723ba52f93..d8bfaff63a5 100644
--- a/apps/workflowengine/src/components/Checks/RequestTime.vue
+++ b/apps/workflowengine/src/components/Checks/RequestTime.vue
@@ -12,7 +12,7 @@
 		<p v-if="!valid" class="invalid-hint">
 			{{ t('workflowengine', 'Please enter a valid time span') }}
 		</p>
-		<Multiselect v-show="valid"
+		<NcMultiselect v-show="valid"
 			v-model="newValue.timezone"
 			:options="timezones"
 			@input="update" />
@@ -20,7 +20,7 @@
 </template>
 
 <script>
-import Multiselect from '@nextcloud/vue/dist/Components/Multiselect'
+import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect'
 import moment from 'moment-timezone'
 import valueMixin from '../../mixins/valueMixin'
 
@@ -28,7 +28,7 @@ const zones = moment.tz.names()
 export default {
 	name: 'RequestTime',
 	components: {
-		Multiselect,
+		NcMultiselect,
 	},
 	mixins: [
 		valueMixin,
diff --git a/apps/workflowengine/src/components/Checks/RequestURL.vue b/apps/workflowengine/src/components/Checks/RequestURL.vue
index 85283a2a14f..1a5b5cc7f87 100644
--- a/apps/workflowengine/src/components/Checks/RequestURL.vue
+++ b/apps/workflowengine/src/components/Checks/RequestURL.vue
@@ -22,7 +22,7 @@
 
 <template>
 	<div>
-		<Multiselect :value="currentValue"
+		<NcMultiselect :value="currentValue"
 			:placeholder="t('workflowengine', 'Select a request URL')"
 			label="label"
 			track-by="pattern"
@@ -40,7 +40,7 @@
 				<span class="option__icon" :class="props.option.icon" />
 				<span class="option__title">{{ props.option.label }} {{ props.option.$groupLabel }}</span>
 			</template>
-		</Multiselect>
+		</NcMultiselect>
 		<input v-if="!isPredefined"
 			type="text"
 			:value="currentValue.pattern"
@@ -50,13 +50,13 @@
 </template>
 
 <script>
-import Multiselect from '@nextcloud/vue/dist/Components/Multiselect'
+import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect'
 import valueMixin from '../../mixins/valueMixin'
 
 export default {
 	name: 'RequestURL',
 	components: {
-		Multiselect,
+		NcMultiselect,
 	},
 	mixins: [
 		valueMixin,
diff --git a/apps/workflowengine/src/components/Checks/RequestUserAgent.vue b/apps/workflowengine/src/components/Checks/RequestUserAgent.vue
index 2bab6d7fed5..c4a5265ac99 100644
--- a/apps/workflowengine/src/components/Checks/RequestUserAgent.vue
+++ b/apps/workflowengine/src/components/Checks/RequestUserAgent.vue
@@ -22,7 +22,7 @@
 
 <template>
 	<div>
-		<Multiselect :value="currentValue"
+		<NcMultiselect :value="currentValue"
 			:placeholder="t('workflowengine', 'Select a user agent')"
 			label="label"
 			track-by="pattern"
@@ -43,7 +43,7 @@
 				<!-- eslint-disable-next-line vue/no-v-html -->
 				<span v-else class="option__title" v-html="props.option.label" />
 			</template>
-		</Multiselect>
+		</NcMultiselect>
 		<input v-if="!isPredefined"
 			type="text"
 			:value="currentValue.pattern"
@@ -52,13 +52,13 @@
 </template>
 
 <script>
-import Multiselect from '@nextcloud/vue/dist/Components/Multiselect'
+import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect'
 import valueMixin from '../../mixins/valueMixin'
 
 export default {
 	name: 'RequestUserAgent',
 	components: {
-		Multiselect,
+		NcMultiselect,
 	},
 	mixins: [
 		valueMixin,
diff --git a/apps/workflowengine/src/components/Checks/RequestUserGroup.vue b/apps/workflowengine/src/components/Checks/RequestUserGroup.vue
index 8fba0fe9211..ba55d88c81c 100644
--- a/apps/workflowengine/src/components/Checks/RequestUserGroup.vue
+++ b/apps/workflowengine/src/components/Checks/RequestUserGroup.vue
@@ -22,7 +22,7 @@
 
 <template>
 	<div>
-		<Multiselect :value="currentValue"
+		<NcMultiselect :value="currentValue"
 			:loading="status.isLoading && groups.length === 0"
 			:options="groups"
 			:multiple="false"
@@ -34,7 +34,7 @@
 </template>
 
 <script>
-import Multiselect from '@nextcloud/vue/dist/Components/Multiselect'
+import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect'
 import axios from '@nextcloud/axios'
 import { generateOcsUrl } from '@nextcloud/router'
 
@@ -46,7 +46,7 @@ const status = {
 export default {
 	name: 'RequestUserGroup',
 	components: {
-		Multiselect,
+		NcMultiselect,
 	},
 	props: {
 		value: {
diff --git a/apps/workflowengine/src/components/Event.vue b/apps/workflowengine/src/components/Event.vue
index 6eb3872e8f8..be0030095e1 100644
--- a/apps/workflowengine/src/components/Event.vue
+++ b/apps/workflowengine/src/components/Event.vue
@@ -4,7 +4,7 @@
 			<img class="option__icon" :src="entity.icon" alt="">
 			<span class="option__title option__title_single">{{ operation.triggerHint }}</span>
 		</div>
-		<Multiselect v-else
+		<NcMultiselect v-else
 			:value="currentEvent"
 			:options="allEvents"
 			track-by="id"
@@ -22,18 +22,18 @@
 				<img class="option__icon" :src="props.option.entity.icon" alt="">
 				<span class="option__title">{{ props.option.displayName }}</span>
 			</template>
-		</Multiselect>
+		</NcMultiselect>
 	</div>
 </template>
 
 <script>
-import Multiselect from '@nextcloud/vue/dist/Components/Multiselect'
+import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect'
 import { showWarning } from '@nextcloud/dialogs'
 
 export default {
 	name: 'Event',
 	components: {
-		Multiselect,
+		NcMultiselect,
 	},
 	props: {
 		rule: {
diff --git a/apps/workflowengine/src/components/Operation.vue b/apps/workflowengine/src/components/Operation.vue
index 4d02ae973cc..64875605b0b 100644
--- a/apps/workflowengine/src/components/Operation.vue
+++ b/apps/workflowengine/src/components/Operation.vue
@@ -4,9 +4,9 @@
 		<div class="actions__item__description">
 			<h3>{{ operation.name }}</h3>
 			<small>{{ operation.description }}</small>
-			<ButtonVue v-if="colored">
+			<NcButton v-if="colored">
 				{{ t('workflowengine', 'Add new flow') }}
-			</ButtonVue>
+			</NcButton>
 		</div>
 		<div class="actions__item_options">
 			<slot />
@@ -15,12 +15,12 @@
 </template>
 
 <script>
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton'
 
 export default {
 	name: 'Operation',
 	components: {
-		ButtonVue,
+		NcButton,
 	},
 	props: {
 		operation: {
diff --git a/apps/workflowengine/src/components/Rule.vue b/apps/workflowengine/src/components/Rule.vue
index 9890d613a2b..4c5162da926 100644
--- a/apps/workflowengine/src/components/Rule.vue
+++ b/apps/workflowengine/src/components/Rule.vue
@@ -31,19 +31,19 @@
 					@input="updateOperation" />
 			</Operation>
 			<div class="buttons">
-				<ButtonVue v-if="rule.id < -1 || dirty" @click="cancelRule">
+				<NcButton v-if="rule.id < -1 || dirty" @click="cancelRule">
 					{{ t('workflowengine', 'Cancel') }}
-				</ButtonVue>
-				<ButtonVue v-else-if="!dirty" @click="deleteRule">
+				</NcButton>
+				<NcButton v-else-if="!dirty" @click="deleteRule">
 					{{ t('workflowengine', 'Delete') }}
-				</ButtonVue>
-				<ButtonVue :type="ruleStatus.type"
+				</NcButton>
+				<NcButton :type="ruleStatus.type"
 					@click="saveRule">
 					<template #icon>
 						<component :is="ruleStatus.icon" :size="20" />
 					</template>
 					{{ ruleStatus.title }}
-				</ButtonVue>
+				</NcButton>
 			</div>
 			<p v-if="error" class="error-message">
 				{{ error }}
@@ -54,9 +54,9 @@
 
 <script>
 import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip'
-import Actions from '@nextcloud/vue/dist/Components/Actions'
-import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue'
+import NcActions from '@nextcloud/vue/dist/Components/NcActions'
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton'
 import ArrowRight from 'vue-material-design-icons/ArrowRight.vue'
 import CheckMark from 'vue-material-design-icons/Check.vue'
 import Close from 'vue-material-design-icons/Close.vue'
@@ -68,7 +68,15 @@ import Operation from './Operation'
 export default {
 	name: 'Rule',
 	components: {
-		Operation, Check, Event, Actions, ActionButton, ButtonVue, ArrowRight, CheckMark, Close,
+		ArrowRight,
+		Check,
+		CheckMark,
+		Close,
+		Event,
+		NcActionButton,
+		NcActions,
+		NcButton,
+		Operation,
 	},
 	directives: {
 		Tooltip,
diff --git a/apps/workflowengine/src/components/Workflow.vue b/apps/workflowengine/src/components/Workflow.vue
index cb8ec547ef6..ef911554a18 100644
--- a/apps/workflowengine/src/components/Workflow.vue
+++ b/apps/workflowengine/src/components/Workflow.vue
@@ -1,6 +1,6 @@
 <template>
 	<div id="workflowengine">
-		<SettingsSection :title="t('workflowengine', 'Available flows')"
+		<NcSettingsSection :title="t('workflowengine', 'Available flows')"
 			:doc-url="workflowDocUrl">
 
 			<p v-if="scope === 0" class="settings-hint">
@@ -26,13 +26,13 @@
 			</transition-group>
 
 			<div v-if="hasMoreOperations" class="actions__more">
-				<ButtonVue @click="showMoreOperations = !showMoreOperations">
+				<NcButton @click="showMoreOperations = !showMoreOperations">
 					<template #icon>
 						<MenuUp v-if="showMoreOperations" :size="20" />
 						<MenuDown v-else :size="20" />
 					</template>
 					{{ showMoreOperations ? t('workflowengine', 'Show less') : t('workflowengine', 'Show more') }}
-				</ButtonVue>
+				</NcButton>
 			</div>
 
 			<h2 v-if="scope === 0" class="configured-flows">
@@ -41,7 +41,7 @@
 			<h2 v-else class="configured-flows">
 				{{ t('workflowengine', 'Your flows') }}
 			</h2>
-		</SettingsSection>
+		</NcSettingsSection>
 
 		<transition-group v-if="rules.length > 0" name="slide">
 			<Rule v-for="rule in rules" :key="rule.id" :rule="rule" />
@@ -52,8 +52,8 @@
 <script>
 import Rule from './Rule'
 import Operation from './Operation'
-import SettingsSection from '@nextcloud/vue/dist/Components/SettingsSection'
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue'
+import NcSettingsSection from '@nextcloud/vue/dist/Components/NcSettingsSection'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton'
 import { mapGetters, mapState } from 'vuex'
 import { generateUrl } from '@nextcloud/router'
 import { loadState } from '@nextcloud/initial-state'
@@ -65,12 +65,12 @@ const ACTION_LIMIT = 3
 export default {
 	name: 'Workflow',
 	components: {
-		ButtonVue,
+		NcButton,
 		MenuDown,
 		MenuUp,
 		Operation,
 		Rule,
-		SettingsSection,
+		NcSettingsSection,
 	},
 	data() {
 		return {