From cb4462374ce5310007fe5b5beae19fca58cbd961 Mon Sep 17 00:00:00 2001
From: "Calum H. (IMB11)" <contact@cal.engineer>
Date: Fri, 31 Jul 2026 12:05:45 +0100
Subject: [PATCH] refactor: rename component

---
 .../src/components/GridDisplay.vue            |  4 +-
 .../src/components/ui/ExportModal.vue         | 10 ++--
 .../src/components/ui/JavaSelector.vue        |  4 +-
 .../src/components/ui/friends/FriendsList.vue |  6 +--
 .../install_flow/AddServerToInstanceModal.vue |  4 +-
 .../ui/instance_settings/GeneralSettings.vue  |  6 +--
 .../ui/instance_settings/HooksSettings.vue    |  8 ++--
 .../ui/instance_settings/JavaSettings.vue     |  8 ++--
 .../ui/instance_settings/WindowSettings.vue   |  6 +--
 .../instances/DefaultInstanceSettings.vue     | 16 +++----
 .../instances/ResourceManagementSettings.vue  |  6 +--
 .../modal/EditSingleplayerWorldModal.vue      |  4 +-
 .../ui/world/modal/ServerModalBody.vue        |  6 +--
 .../src/pages/instance/Worlds.vue             |  4 +-
 .../share/shared-instance-members-table.vue   |  4 +-
 .../analytics-table/index.vue                 |  4 +-
 .../components/ui/ConfirmTransferOrgModal.vue |  4 +-
 .../ui/ConfirmTransferProjectModal.vue        |  4 +-
 .../ui/ProjectCollectionSaveButton.vue        |  4 +-
 .../components/ui/admin/AssignNoticeModal.vue |  4 +-
 .../components/ui/admin/BatchCreditModal.vue  | 10 ++--
 .../src/components/ui/admin/TransferModal.vue | 18 ++++----
 .../src/components/ui/auth/CreateAccount.vue  |  4 +-
 .../components/ui/auth/PasskeySettings.vue    |  6 +--
 .../src/components/ui/auth/SignIn.vue         |  8 ++--
 .../src/components/ui/auth/SignUp.vue         |  6 +--
 .../components/McVersionPicker.vue            |  4 +-
 .../stages/DetailsStage.vue                   |  6 +--
 .../ui/create/CollectionCreateModal.vue       |  8 ++--
 .../ui/create/OrganizationCreateModal.vue     | 10 ++--
 .../ui/create/ProjectCreateModal.vue          | 10 ++--
 .../ui/dashboard/RevenueInputField.vue        | 10 ++--
 .../LegacyPaypalDetailsStage.vue              |  4 +-
 .../withdraw-stages/MuralpayDetailsStage.vue  | 12 ++---
 .../withdraw-stages/MuralpayKycStage.vue      | 20 ++++----
 .../TremendousDetailsStage.vue                |  6 +--
 .../ui/moderation/GlobalDetailTracesList.vue  |  4 +-
 .../checklist/ModerationChecklist.vue         |  5 +-
 .../checklist/ModpackPermissionsFlow.vue      |  8 ++--
 .../ui/moderation/checklist/NodeRenderer.vue  | 15 +++---
 .../src/pages/[type]/[project]/gallery.vue    | 10 ++--
 .../[type]/[project]/settings/gallery.vue     | 10 ++--
 .../[type]/[project]/settings/general.vue     |  8 ++--
 .../pages/[type]/[project]/settings/index.vue | 10 ++--
 .../[type]/[project]/settings/license.vue     |  8 ++--
 .../pages/[type]/[project]/settings/links.vue | 12 ++---
 .../[type]/[project]/settings/members.vue     | 12 ++---
 .../[type]/[project]/settings/permissions.vue |  4 +-
 .../[type]/[project]/settings/server.vue      |  6 +--
 apps/frontend/src/pages/admin/affiliates.vue  |  4 +-
 .../src/pages/admin/analytics/events.vue      | 10 ++--
 .../src/pages/admin/billing/[user].vue        |  6 +--
 apps/frontend/src/pages/admin/docs.vue        |  4 +-
 apps/frontend/src/pages/admin/emails.vue      |  6 +--
 .../src/pages/admin/servers/notices.vue       | 15 +++---
 apps/frontend/src/pages/admin/user_email.vue  |  4 +-
 .../src/pages/auth/reset-password.vue         |  8 ++--
 .../src/pages/collection/[collection].vue     |  8 ++--
 .../src/pages/dashboard/affiliate-links.vue   |  4 +-
 .../src/pages/dashboard/collections.vue       |  4 +-
 .../frontend/src/pages/dashboard/projects.vue | 10 ++--
 apps/frontend/src/pages/index.vue             |  4 +-
 .../pages/moderation/external-projects.vue    | 19 ++++----
 apps/frontend/src/pages/moderation/index.vue  |  4 +-
 .../src/pages/moderation/reports/index.vue    |  4 +-
 .../moderation/technical-review/index.vue     |  4 +-
 .../[organization]/settings/index.vue         | 10 ++--
 .../[organization]/settings/members.vue       |  8 ++--
 .../[organization]/settings/projects.vue      | 10 ++--
 apps/frontend/src/pages/report.vue            |  4 +-
 apps/frontend/src/pages/settings/account.vue  | 14 +++---
 .../src/pages/settings/applications.vue       | 12 ++---
 apps/frontend/src/pages/settings/flags.vue    |  4 +-
 apps/frontend/src/pages/settings/pats.vue     |  4 +-
 .../affiliate/AffiliateLinkCreateModal.vue    |  8 ++--
 .../ui/src/components/base/BaseTerminal.vue   |  4 +-
 packages/ui/src/components/base/Combobox.vue  |  8 ++--
 .../src/components/base/DropdownFilterBar.vue |  4 +-
 .../ui/src/components/base/I18nDebugPanel.vue |  4 +-
 .../ui/src/components/base/ManySelect.vue     |  4 +-
 .../ui/src/components/base/MarkdownEditor.vue | 12 ++---
 .../ui/src/components/base/MultiSelect.vue    |  6 +--
 packages/ui/src/components/base/Slider.vue    |  4 +-
 packages/ui/src/components/base/index.ts      |  6 +--
 .../{NativeDateInput.vue => DateInput.vue}    |  0
 .../inputs/{StyledInput.vue => Input.vue}     |  0
 .../{StyledTextarea.vue => Textarea.vue}      |  0
 .../ui/src/components/base/inputs/index.ts    |  6 +--
 .../src/components/billing/PurchaseModal.vue  | 10 ++--
 .../components/content/CollectionWidget.vue   |  4 +-
 .../AddFilesToAttributionGroupModal.vue       |  4 +-
 .../AddToExistingExternalProjectModal.vue     |  6 +--
 .../AddToGlobalPermissionsDatabaseModal.vue   | 12 ++---
 .../external_files/AttributionEditor.vue      | 10 ++--
 .../ExternalProjectPermissionsCard.vue        |  6 +--
 .../components/CustomSetupStage.vue           |  4 +-
 .../components/FinalConfigStage.vue           | 10 ++--
 .../components/ImportInstanceStage.vue        |  6 +--
 .../ui/src/components/modal/ConfirmModal.vue  |  4 +-
 .../ui/src/components/modal/ShareModal.vue    |  6 +--
 .../components/search/SearchSidebarFilter.vue |  4 +-
 .../servers/backups/BackupCreateModal.vue     |  4 +-
 .../servers/backups/BackupRenameModal.vue     |  4 +-
 .../components/settings/LanguageSelector.vue  |  4 +-
 ...nvite-players-modal-invite-link-editor.vue |  4 +-
 .../ui/src/components/version/VersionPage.vue |  4 +-
 .../src/layouts/shared/browse-tab/layout.vue  |  4 +-
 .../ui/src/layouts/shared/console/layout.vue  |  4 +-
 .../components/modals/ContentInstallModal.vue |  6 +--
 .../components/modals/ModpackContentModal.vue |  4 +-
 .../modals/content-updater-modal/index.vue    |  4 +-
 .../src/layouts/shared/content-tab/layout.vue |  4 +-
 .../files-tab/components/FileNavbar.vue       |  6 +--
 .../components/editor/EditorFindReplace.vue   |  6 +--
 .../components/modals/FileCreateItemModal.vue |  4 +-
 .../components/modals/FileMoveItemModal.vue   |  4 +-
 .../components/modals/FileRenameItemModal.vue |  4 +-
 .../modals/FileUploadZipUrlModal.vue          |  4 +-
 .../shared/server-settings/pages/advanced.vue |  4 +-
 .../shared/server-settings/pages/general.vue  |  4 +-
 .../shared/server-settings/pages/network.vue  |  8 ++--
 .../server-settings/pages/properties.vue      | 14 +++---
 .../wrapped/AccountProfileSettings.vue        |  8 ++--
 .../hosting/manage/[id]/access/access.vue     |  4 +-
 .../layouts/wrapped/hosting/manage/index.vue  |  4 +-
 ...eInput.stories.ts => DateInput.stories.ts} | 12 ++---
 ...tyledInput.stories.ts => Input.stories.ts} | 46 +++++++++----------
 ...extarea.stories.ts => Textarea.stories.ts} | 22 ++++-----
 standards/frontend/MODALS.md                  |  4 +-
 129 files changed, 453 insertions(+), 457 deletions(-)
 rename packages/ui/src/components/base/inputs/{NativeDateInput.vue => DateInput.vue} (100%)
 rename packages/ui/src/components/base/inputs/{StyledInput.vue => Input.vue} (100%)
 rename packages/ui/src/components/base/inputs/{StyledTextarea.vue => Textarea.vue} (100%)
 rename packages/ui/src/stories/base/{NativeDateInput.stories.ts => DateInput.stories.ts} (63%)
 rename packages/ui/src/stories/base/{StyledInput.stories.ts => Input.stories.ts} (89%)
 rename packages/ui/src/stories/base/{StyledTextarea.stories.ts => Textarea.stories.ts} (65%)

diff --git a/apps/app-frontend/src/components/GridDisplay.vue b/apps/app-frontend/src/components/GridDisplay.vue
index 5004b927b..d365523fd 100644
--- a/apps/app-frontend/src/components/GridDisplay.vue
+++ b/apps/app-frontend/src/components/GridDisplay.vue
@@ -14,7 +14,7 @@ import {
 	DropdownSelect,
 	formatLoader,
 	injectNotificationManager,
-	StyledInput,
+	Input,
 	useVIntl,
 } from '@modrinth/ui'
 import { useStorage } from '@vueuse/core'
@@ -275,7 +275,7 @@ const filteredResults = computed(() => {
 </script>
 <template>
 	<div class="flex gap-2">
-		<StyledInput
+		<Input
 			v-model="search"
 			:icon="SearchIcon"
 			type="text"
diff --git a/apps/app-frontend/src/components/ui/ExportModal.vue b/apps/app-frontend/src/components/ui/ExportModal.vue
index e97f833f5..840f02d6e 100644
--- a/apps/app-frontend/src/components/ui/ExportModal.vue
+++ b/apps/app-frontend/src/components/ui/ExportModal.vue
@@ -7,7 +7,8 @@ import {
 	FileTreeSelect,
 	injectNotificationManager,
 	NewModal,
-	StyledInput,
+	Input,
+	Textarea,
 	useVIntl,
 } from '@modrinth/ui'
 import { save } from '@tauri-apps/plugin-dialog'
@@ -244,7 +245,7 @@ function isExportCandidateDisabled(path) {
 			<div class="grid grid-cols-2 gap-4">
 				<div class="labeled_input w-full">
 					<p class="text-contrast font-semibold">{{ formatMessage(messages.modpackNameLabel) }}</p>
-					<StyledInput
+					<Input
 						v-model="nameInput"
 						type="text"
 						:placeholder="formatMessage(messages.modpackNamePlaceholder)"
@@ -256,7 +257,7 @@ function isExportCandidateDisabled(path) {
 					<p class="text-contrast font-semibold">
 						{{ formatMessage(messages.versionNumberLabel) }}
 					</p>
-					<StyledInput
+					<Input
 						v-model="versionInput"
 						type="text"
 						:placeholder="formatMessage(messages.versionNumberPlaceholder)"
@@ -269,9 +270,8 @@ function isExportCandidateDisabled(path) {
 				<p class="m-0 text-contrast font-semibold">
 					{{ formatMessage(commonMessages.descriptionLabel) }}
 				</p>
-				<StyledInput
+				<Textarea
 					v-model="exportDescription"
-					multiline
 					:placeholder="formatMessage(messages.descriptionPlaceholder)"
 					wrapper-class="w-full"
 				/>
diff --git a/apps/app-frontend/src/components/ui/JavaSelector.vue b/apps/app-frontend/src/components/ui/JavaSelector.vue
index e29aa2d6f..4bc37dd01 100644
--- a/apps/app-frontend/src/components/ui/JavaSelector.vue
+++ b/apps/app-frontend/src/components/ui/JavaSelector.vue
@@ -2,7 +2,7 @@
 	<JavaDetectionModal ref="detectJavaModal" @submit="(val) => emit('update:modelValue', val)" />
 	<div :id="props.id" class="toggle-setting" :class="{ compact }">
 		<div class="input-with-status">
-			<StyledInput
+			<Input
 				autocomplete="off"
 				:disabled="props.disabled"
 				:model-value="props.modelValue ? props.modelValue.path : ''"
@@ -93,7 +93,7 @@ import {
 	ButtonStyled,
 	defineMessages,
 	injectNotificationManager,
-	StyledInput,
+	Input,
 	useVIntl,
 } from '@modrinth/ui'
 import { open } from '@tauri-apps/plugin-dialog'
diff --git a/apps/app-frontend/src/components/ui/friends/FriendsList.vue b/apps/app-frontend/src/components/ui/friends/FriendsList.vue
index 71c8c1c8f..eccdb8335 100644
--- a/apps/app-frontend/src/components/ui/friends/FriendsList.vue
+++ b/apps/app-frontend/src/components/ui/friends/FriendsList.vue
@@ -6,7 +6,7 @@ import {
 	defineMessages,
 	injectNotificationManager,
 	IntlFormatted,
-	StyledInput,
+	Input,
 	useRelativeTime,
 	useVIntl,
 } from '@modrinth/ui'
@@ -232,7 +232,7 @@ const messages = defineMessages({
 				{{ formatMessage(messages.usernameDescription) }}
 			</p>
 			<div class="flex items-center gap-2 mt-4">
-				<StyledInput
+				<Input
 					v-model="username"
 					:icon="UserIcon"
 					type="text"
@@ -260,7 +260,7 @@ const messages = defineMessages({
 					<UserPlusIcon />
 				</button>
 			</ButtonStyled>
-			<StyledInput
+			<Input
 				v-model="search"
 				:icon="SearchIcon"
 				type="text"
diff --git a/apps/app-frontend/src/components/ui/install_flow/AddServerToInstanceModal.vue b/apps/app-frontend/src/components/ui/install_flow/AddServerToInstanceModal.vue
index e3c523c8a..b478ed381 100644
--- a/apps/app-frontend/src/components/ui/install_flow/AddServerToInstanceModal.vue
+++ b/apps/app-frontend/src/components/ui/install_flow/AddServerToInstanceModal.vue
@@ -5,7 +5,7 @@ import {
 	Avatar,
 	ButtonStyled,
 	injectNotificationManager,
-	StyledInput,
+	Input,
 } from '@modrinth/ui'
 import { useQueryClient } from '@tanstack/vue-query'
 import { convertFileSrc } from '@tauri-apps/api/core'
@@ -85,7 +85,7 @@ async function addServer(instance) {
 	<ModalWrapper ref="modal" header="Add server to instance">
 		<div class="flex flex-col gap-4 min-w-[350px]">
 			<Admonition type="warning" body="This server may not be compatible with all instances." />
-			<StyledInput
+			<Input
 				v-model="searchFilter"
 				:icon="SearchIcon"
 				type="search"
diff --git a/apps/app-frontend/src/components/ui/instance_settings/GeneralSettings.vue b/apps/app-frontend/src/components/ui/instance_settings/GeneralSettings.vue
index 8568ebefa..0eafe4140 100644
--- a/apps/app-frontend/src/components/ui/instance_settings/GeneralSettings.vue
+++ b/apps/app-frontend/src/components/ui/instance_settings/GeneralSettings.vue
@@ -8,7 +8,7 @@ import {
 	defineMessages,
 	injectNotificationManager,
 	OverflowMenu,
-	StyledInput,
+	Input,
 	useVIntl,
 } from '@modrinth/ui'
 import { useQueryClient } from '@tanstack/vue-query'
@@ -339,7 +339,7 @@ const messages = defineMessages({
 			{{ formatMessage(messages.name) }}
 		</label>
 		<div class="flex">
-			<StyledInput
+			<Input
 				id="instance-name"
 				v-model="title"
 				autocomplete="off"
@@ -382,7 +382,7 @@ const messages = defineMessages({
 					@click="toggleGroup(group)"
 				/>
 				<div class="flex gap-2 items-center">
-					<StyledInput
+					<Input
 						v-model="newCategoryInput"
 						:placeholder="formatMessage(messages.libraryGroupsEnterName)"
 						class="w-full max-w-[300px]"
diff --git a/apps/app-frontend/src/components/ui/instance_settings/HooksSettings.vue b/apps/app-frontend/src/components/ui/instance_settings/HooksSettings.vue
index bfd016d94..2c5598d26 100644
--- a/apps/app-frontend/src/components/ui/instance_settings/HooksSettings.vue
+++ b/apps/app-frontend/src/components/ui/instance_settings/HooksSettings.vue
@@ -3,7 +3,7 @@ import {
 	Checkbox,
 	defineMessages,
 	injectNotificationManager,
-	StyledInput,
+	Input,
 	useVIntl,
 } from '@modrinth/ui'
 import { computed, ref, watch } from 'vue'
@@ -112,7 +112,7 @@ const messages = defineMessages({
 		<h2 class="mt-6 m-0 text-lg font-semibold text-contrast">
 			{{ formatMessage(messages.preLaunch) }}
 		</h2>
-		<StyledInput
+		<Input
 			id="pre-launch"
 			v-model="hooks.pre_launch"
 			autocomplete="off"
@@ -127,7 +127,7 @@ const messages = defineMessages({
 		<h2 class="mt-6 m-0 text-lg font-semibold text-contrast">
 			{{ formatMessage(messages.wrapper) }}
 		</h2>
-		<StyledInput
+		<Input
 			id="wrapper"
 			v-model="hooks.wrapper"
 			autocomplete="off"
@@ -142,7 +142,7 @@ const messages = defineMessages({
 		<h2 class="mt-6 m-0 text-lg font-semibold text-contrast">
 			{{ formatMessage(messages.postExit) }}
 		</h2>
-		<StyledInput
+		<Input
 			id="post-exit"
 			v-model="hooks.post_exit"
 			autocomplete="off"
diff --git a/apps/app-frontend/src/components/ui/instance_settings/JavaSettings.vue b/apps/app-frontend/src/components/ui/instance_settings/JavaSettings.vue
index 71e444993..c0323a91e 100644
--- a/apps/app-frontend/src/components/ui/instance_settings/JavaSettings.vue
+++ b/apps/app-frontend/src/components/ui/instance_settings/JavaSettings.vue
@@ -14,7 +14,7 @@ import {
 	defineMessages,
 	injectNotificationManager,
 	Slider,
-	StyledInput,
+	Input,
 	useVIntl,
 } from '@modrinth/ui'
 import { open } from '@tauri-apps/plugin-dialog'
@@ -216,7 +216,7 @@ const messages = defineMessages({
 						>Java {{ optimalJava?.parsed_version }}</span
 					>
 					<div class="flex gap-2 items-center">
-						<StyledInput
+						<Input
 							:model-value="activePath"
 							:disabled="!overrideJavaInstall"
 							autocomplete="off"
@@ -294,7 +294,7 @@ const messages = defineMessages({
 			:label="formatMessage(messages.customJavaArguments)"
 			class="my-2"
 		/>
-		<StyledInput
+		<Input
 			id="java-args"
 			v-model="javaArgs"
 			autocomplete="off"
@@ -310,7 +310,7 @@ const messages = defineMessages({
 			:label="formatMessage(messages.customEnvironmentVariables)"
 			class="mb-2"
 		/>
-		<StyledInput
+		<Input
 			id="env-vars"
 			v-model="envVars"
 			autocomplete="off"
diff --git a/apps/app-frontend/src/components/ui/instance_settings/WindowSettings.vue b/apps/app-frontend/src/components/ui/instance_settings/WindowSettings.vue
index 925a22a3d..bf1b21ed3 100644
--- a/apps/app-frontend/src/components/ui/instance_settings/WindowSettings.vue
+++ b/apps/app-frontend/src/components/ui/instance_settings/WindowSettings.vue
@@ -3,7 +3,7 @@ import {
 	Checkbox,
 	defineMessages,
 	injectNotificationManager,
-	StyledInput,
+	Input,
 	Toggle,
 	useVIntl,
 } from '@modrinth/ui'
@@ -129,7 +129,7 @@ const messages = defineMessages({
 					{{ formatMessage(messages.widthDescription) }}
 				</p>
 			</div>
-			<StyledInput
+			<Input
 				id="width"
 				v-model="resolution[0]"
 				autocomplete="off"
@@ -148,7 +148,7 @@ const messages = defineMessages({
 					{{ formatMessage(messages.heightDescription) }}
 				</p>
 			</div>
-			<StyledInput
+			<Input
 				id="height"
 				v-model="resolution[1]"
 				autocomplete="off"
diff --git a/apps/app-frontend/src/components/ui/settings/instances/DefaultInstanceSettings.vue b/apps/app-frontend/src/components/ui/settings/instances/DefaultInstanceSettings.vue
index 02183800b..55381fa1e 100644
--- a/apps/app-frontend/src/components/ui/settings/instances/DefaultInstanceSettings.vue
+++ b/apps/app-frontend/src/components/ui/settings/instances/DefaultInstanceSettings.vue
@@ -3,7 +3,7 @@ import {
 	defineMessages,
 	injectNotificationManager,
 	Slider,
-	StyledInput,
+	Input,
 	Toggle,
 	useVIntl,
 } from '@modrinth/ui'
@@ -187,7 +187,7 @@ watch(
 					</p>
 				</div>
 
-				<StyledInput
+				<Input
 					id="width"
 					v-model="settings.game_resolution[0]"
 					:disabled="settings.force_fullscreen"
@@ -207,7 +207,7 @@ watch(
 					</p>
 				</div>
 
-				<StyledInput
+				<Input
 					id="height"
 					v-model="settings.game_resolution[1]"
 					:disabled="settings.force_fullscreen"
@@ -244,7 +244,7 @@ watch(
 				<h2 class="m-0 text-lg font-semibold text-contrast">
 					{{ formatMessage(messages.javaArgumentsTitle) }}
 				</h2>
-				<StyledInput
+				<Input
 					id="java-args"
 					v-model="settings.launchArgs"
 					autocomplete="off"
@@ -261,7 +261,7 @@ watch(
 				<h2 class="m-0 text-lg font-semibold text-contrast">
 					{{ formatMessage(messages.environmentVariablesTitle) }}
 				</h2>
-				<StyledInput
+				<Input
 					id="env-vars"
 					v-model="settings.envVars"
 					autocomplete="off"
@@ -282,7 +282,7 @@ watch(
 				<h3 class="m-0 text-lg font-semibold text-contrast">
 					{{ formatMessage(messages.preLaunchHookTitle) }}
 				</h3>
-				<StyledInput
+				<Input
 					id="pre-launch"
 					v-model="settings.hooks.pre_launch"
 					autocomplete="off"
@@ -299,7 +299,7 @@ watch(
 				<h3 class="m-0 text-lg font-semibold text-contrast">
 					{{ formatMessage(messages.wrapperHookTitle) }}
 				</h3>
-				<StyledInput
+				<Input
 					id="wrapper"
 					v-model="settings.hooks.wrapper"
 					autocomplete="off"
@@ -316,7 +316,7 @@ watch(
 				<h3 class="m-0 text-lg font-semibold text-contrast">
 					{{ formatMessage(messages.postExitHookTitle) }}
 				</h3>
-				<StyledInput
+				<Input
 					id="post-exit"
 					v-model="settings.hooks.post_exit"
 					autocomplete="off"
diff --git a/apps/app-frontend/src/components/ui/settings/instances/ResourceManagementSettings.vue b/apps/app-frontend/src/components/ui/settings/instances/ResourceManagementSettings.vue
index 9b6aa9206..b1a6c52a4 100644
--- a/apps/app-frontend/src/components/ui/settings/instances/ResourceManagementSettings.vue
+++ b/apps/app-frontend/src/components/ui/settings/instances/ResourceManagementSettings.vue
@@ -5,7 +5,7 @@ import {
 	defineMessages,
 	injectNotificationManager,
 	Slider,
-	StyledInput,
+	Input,
 	Toggle,
 	useVIntl,
 } from '@modrinth/ui'
@@ -175,7 +175,7 @@ async function findLauncherDir() {
 			<h2 class="m-0 text-lg font-semibold text-contrast">
 				{{ formatMessage(messages.appDirectoryTitle) }}
 			</h2>
-			<StyledInput
+			<Input
 				id="appDir"
 				v-model="settings.custom_dir"
 				:icon="BoxIcon"
@@ -194,7 +194,7 @@ async function findLauncherDir() {
 						</button>
 					</ButtonStyled>
 				</template>
-			</StyledInput>
+			</Input>
 			<p class="m-0 leading-tight text-secondary">
 				{{ formatMessage(messages.appDirectoryDescription) }}
 			</p>
diff --git a/apps/app-frontend/src/components/ui/world/modal/EditSingleplayerWorldModal.vue b/apps/app-frontend/src/components/ui/world/modal/EditSingleplayerWorldModal.vue
index b611ce4a5..e39be6953 100644
--- a/apps/app-frontend/src/components/ui/world/modal/EditSingleplayerWorldModal.vue
+++ b/apps/app-frontend/src/components/ui/world/modal/EditSingleplayerWorldModal.vue
@@ -6,7 +6,7 @@ import {
 	commonMessages,
 	defineMessages,
 	injectNotificationManager,
-	StyledInput,
+	Input,
 	useVIntl,
 } from '@modrinth/ui'
 import { computed, ref } from 'vue'
@@ -104,7 +104,7 @@ const messages = defineMessages({
 			<h2 class="text-lg font-extrabold text-contrast mt-0 mb-1">
 				{{ formatMessage(messages.name) }}
 			</h2>
-			<StyledInput
+			<Input
 				v-model="name"
 				:placeholder="formatMessage(messages.placeholderName)"
 				autocomplete="off"
diff --git a/apps/app-frontend/src/components/ui/world/modal/ServerModalBody.vue b/apps/app-frontend/src/components/ui/world/modal/ServerModalBody.vue
index d1603da94..50ecca9b3 100644
--- a/apps/app-frontend/src/components/ui/world/modal/ServerModalBody.vue
+++ b/apps/app-frontend/src/components/ui/world/modal/ServerModalBody.vue
@@ -3,7 +3,7 @@ import {
 	Combobox,
 	defineMessages,
 	type MessageDescriptor,
-	StyledInput,
+	Input,
 	useVIntl,
 } from '@modrinth/ui'
 
@@ -65,7 +65,7 @@ defineExpose({ resourcePackOptions })
 	<div class="space-y-4 w-full">
 		<label class="flex flex-col gap-2">
 			<span class="font-semibold text-contrast">{{ formatMessage(messages.name) }}</span>
-			<StyledInput
+			<Input
 				v-model="name"
 				:placeholder="formatMessage(messages.placeholderName)"
 				autocomplete="off"
@@ -74,7 +74,7 @@ defineExpose({ resourcePackOptions })
 		</label>
 		<label class="flex flex-col gap-2">
 			<span class="font-semibold text-contrast">{{ formatMessage(messages.address) }}</span>
-			<StyledInput
+			<Input
 				v-model="address"
 				:placeholder="formatMessage(messages.placeholderAddress)"
 				autocomplete="off"
diff --git a/apps/app-frontend/src/pages/instance/Worlds.vue b/apps/app-frontend/src/pages/instance/Worlds.vue
index 1ddcb5e94..a671f6a33 100644
--- a/apps/app-frontend/src/pages/instance/Worlds.vue
+++ b/apps/app-frontend/src/pages/instance/Worlds.vue
@@ -21,7 +21,7 @@
 	<ReadyTransition :pending="worldsReadyPending">
 		<div v-if="dedupedWorlds.length > 0" class="flex flex-col gap-4">
 			<div class="flex flex-wrap items-center gap-2">
-				<StyledInput
+				<Input
 					v-model="searchFilter"
 					:icon="SearchIcon"
 					type="text"
@@ -155,7 +155,7 @@ import {
 	type GameVersion,
 	injectNotificationManager,
 	ReadyTransition,
-	StyledInput,
+	Input,
 	useReadyState,
 	useVIntl,
 } from '@modrinth/ui'
diff --git a/apps/app-frontend/src/pages/instance/share/shared-instance-members-table.vue b/apps/app-frontend/src/pages/instance/share/shared-instance-members-table.vue
index 85cc02c8c..4bf1c542e 100644
--- a/apps/app-frontend/src/pages/instance/share/shared-instance-members-table.vue
+++ b/apps/app-frontend/src/pages/instance/share/shared-instance-members-table.vue
@@ -2,7 +2,7 @@
 	<div class="flex flex-col gap-4">
 		<div class="flex flex-col gap-4">
 			<div class="flex items-center gap-2">
-				<StyledInput
+				<Input
 					v-model="search"
 					:icon="SearchIcon"
 					:placeholder="`Search ${rows.length} users...`"
@@ -151,7 +151,7 @@ import {
 	ButtonStyled,
 	defineMessages,
 	type SortDirection,
-	StyledInput,
+	Input,
 	Table,
 	type TableColumn,
 	truncatedTooltip,
diff --git a/apps/frontend/src/components/analytics-dashboard/analytics-table/index.vue b/apps/frontend/src/components/analytics-dashboard/analytics-table/index.vue
index 2b625b3a9..858820b8a 100644
--- a/apps/frontend/src/components/analytics-dashboard/analytics-table/index.vue
+++ b/apps/frontend/src/components/analytics-dashboard/analytics-table/index.vue
@@ -23,7 +23,7 @@
 					</div>
 
 					<div class="flex w-full flex-wrap items-center gap-2 md:w-auto">
-						<StyledInput
+						<Input
 							v-model="searchQuery"
 							:icon="SearchIcon"
 							:placeholder="formatMessage(analyticsTableMessages.searchPlaceholder)"
@@ -196,7 +196,7 @@ import {
 	OverflowMenu,
 	type OverflowMenuOption,
 	Pagination,
-	StyledInput,
+	Input,
 	Table,
 	useFormatNumber,
 	useVIntl,
diff --git a/apps/frontend/src/components/ui/ConfirmTransferOrgModal.vue b/apps/frontend/src/components/ui/ConfirmTransferOrgModal.vue
index e4f62b43f..7addb4208 100644
--- a/apps/frontend/src/components/ui/ConfirmTransferOrgModal.vue
+++ b/apps/frontend/src/components/ui/ConfirmTransferOrgModal.vue
@@ -48,7 +48,7 @@
 					To confirm this transfer, type
 					<span class="font-bold text-contrast">{{ organization.name }}</span> below
 				</p>
-				<StyledInput
+				<Input
 					v-model="confirmationText"
 					:placeholder="`Enter ${organization.name}`"
 					wrapper-class="w-full"
@@ -76,7 +76,7 @@
 
 <script setup lang="ts">
 import { RightArrowIcon, TransferIcon, XIcon } from '@modrinth/assets'
-import { Admonition, Avatar, ButtonStyled, NewModal, StyledInput } from '@modrinth/ui'
+import { Admonition, Avatar, ButtonStyled, NewModal, Input } from '@modrinth/ui'
 import { computed, ref } from 'vue'
 
 const props = defineProps<{
diff --git a/apps/frontend/src/components/ui/ConfirmTransferProjectModal.vue b/apps/frontend/src/components/ui/ConfirmTransferProjectModal.vue
index d47a619fa..35d99eaac 100644
--- a/apps/frontend/src/components/ui/ConfirmTransferProjectModal.vue
+++ b/apps/frontend/src/components/ui/ConfirmTransferProjectModal.vue
@@ -55,7 +55,7 @@
 					To confirm this transfer, type
 					<span class="font-bold text-contrast">{{ project.name }}</span> below
 				</p>
-				<StyledInput
+				<Input
 					v-model="confirmationText"
 					:placeholder="`Enter ${project.name}`"
 					wrapper-class="w-full"
@@ -83,7 +83,7 @@
 
 <script setup lang="ts">
 import { RightArrowIcon, TransferIcon, XIcon } from '@modrinth/assets'
-import { Admonition, Avatar, ButtonStyled, NewModal, StyledInput } from '@modrinth/ui'
+import { Admonition, Avatar, ButtonStyled, NewModal, Input } from '@modrinth/ui'
 import { computed, ref } from 'vue'
 
 const props = defineProps<{
diff --git a/apps/frontend/src/components/ui/ProjectCollectionSaveButton.vue b/apps/frontend/src/components/ui/ProjectCollectionSaveButton.vue
index 34752468c..8409c2a04 100644
--- a/apps/frontend/src/components/ui/ProjectCollectionSaveButton.vue
+++ b/apps/frontend/src/components/ui/ProjectCollectionSaveButton.vue
@@ -11,7 +11,7 @@
 		>
 			<BookmarkIcon aria-hidden="true" :fill="saved ? 'currentColor' : 'none'" />
 			<template #menu>
-				<StyledInput
+				<Input
 					v-model="displayCollectionsSearch"
 					:placeholder="formatMessage(commonMessages.searchPlaceholder)"
 					wrapper-class="menu-search"
@@ -57,7 +57,7 @@ import {
 	Checkbox,
 	commonMessages,
 	PopoutMenu,
-	StyledInput,
+	Input,
 	useVIntl,
 } from '@modrinth/ui'
 import { computed, ref } from 'vue'
diff --git a/apps/frontend/src/components/ui/admin/AssignNoticeModal.vue b/apps/frontend/src/components/ui/admin/AssignNoticeModal.vue
index a52bb5c01..b44c13e60 100644
--- a/apps/frontend/src/components/ui/admin/AssignNoticeModal.vue
+++ b/apps/frontend/src/components/ui/admin/AssignNoticeModal.vue
@@ -8,7 +8,7 @@ import {
 	injectNotificationManager,
 	NewModal,
 	ServerNotice,
-	StyledInput,
+	Input,
 	TagItem,
 } from '@modrinth/ui'
 import { ref } from 'vue'
@@ -175,7 +175,7 @@ defineExpose({ show, hide })
 					<span v-else class="mb-2"> No nodes assigned yet </span>
 				</div>
 				<div class="flex w-[45rem] items-center gap-2">
-					<StyledInput
+					<Input
 						id="server-assign-field"
 						v-model="inputField"
 						wrapper-class="w-full"
diff --git a/apps/frontend/src/components/ui/admin/BatchCreditModal.vue b/apps/frontend/src/components/ui/admin/BatchCreditModal.vue
index 587402cf1..133f4f188 100644
--- a/apps/frontend/src/components/ui/admin/BatchCreditModal.vue
+++ b/apps/frontend/src/components/ui/admin/BatchCreditModal.vue
@@ -20,7 +20,7 @@
 				<label for="days" class="flex flex-col gap-1">
 					<span class="text-lg font-semibold text-contrast"> Days to credit </span>
 				</label>
-				<StyledInput
+				<Input
 					id="days"
 					v-model="days"
 					wrapper-class="w-32"
@@ -36,7 +36,7 @@
 						<span class="text-lg font-semibold text-contrast"> Node hostnames </span>
 					</label>
 					<div class="flex items-center gap-2">
-						<StyledInput
+						<Input
 							id="node-input"
 							v-model="nodeInput"
 							wrapper-class="w-32"
@@ -92,10 +92,9 @@
 					class="text-muted flex flex-col gap-2 rounded-lg border border-surface-5 bg-button-bg p-4"
 				>
 					<span>Hi {user.name},</span>
-					<StyledInput
+					<Textarea
 						id="message-batch"
 						v-model="message"
-						multiline
 						:rows="3"
 						input-class="!bg-surface-3"
 					/>
@@ -136,7 +135,8 @@ import {
 	injectModrinthClient,
 	injectNotificationManager,
 	NewModal,
-	StyledInput,
+	Input,
+	Textarea,
 	TagItem,
 	Toggle,
 } from '@modrinth/ui'
diff --git a/apps/frontend/src/components/ui/admin/TransferModal.vue b/apps/frontend/src/components/ui/admin/TransferModal.vue
index bd0d5ce39..a47504429 100644
--- a/apps/frontend/src/components/ui/admin/TransferModal.vue
+++ b/apps/frontend/src/components/ui/admin/TransferModal.vue
@@ -25,10 +25,9 @@
 					</span>
 					<span>Server IDs (one per line or comma-separated.)</span>
 				</label>
-				<StyledInput
+				<Textarea
 					id="server-ids"
 					v-model="serverIdsInput"
-					multiline
 					:rows="4"
 					input-class="bg-surface-3"
 					placeholder="123e4569-e89b-12d3-a456-426614174005&#10;123e9569-e89b-12d3-a456-413678919876"
@@ -48,7 +47,7 @@
 						<span>Add nodes to transfer (comma or space-separated).</span>
 					</label>
 					<div class="flex items-center gap-2">
-						<StyledInput
+						<Input
 							id="node-input"
 							v-model="nodeInput"
 							wrapper-class="w-64"
@@ -86,7 +85,7 @@
 						<span class="text-lg font-semibold text-contrast">Tag transferred nodes</span>
 						<span>Optional tag to add to the transferred nodes.</span>
 					</label>
-					<StyledInput
+					<Input
 						id="tag-nodes"
 						v-model="tagNodes"
 						wrapper-class="max-w-[12rem]"
@@ -114,7 +113,7 @@
 					<span>Optional preferred node tags for node selection.</span>
 				</label>
 				<div class="flex items-center gap-2">
-					<StyledInput
+					<Input
 						id="tag-input"
 						v-model="tagInput"
 						wrapper-class="w-40"
@@ -147,7 +146,7 @@
 					:format-label="(item) => scheduleOptionLabels[item]"
 					:capitalize="false"
 				/>
-				<StyledInput
+				<DateInput
 					v-if="scheduleOption === 'later'"
 					v-model="scheduledDate"
 					type="datetime-local"
@@ -164,10 +163,9 @@
 					</span>
 					<span>Provide a reason for this transfer batch.</span>
 				</label>
-				<StyledInput
+				<Textarea
 					id="reason"
 					v-model="reason"
-					multiline
 					:rows="2"
 					input-class="bg-surface-3"
 					placeholder="Node maintenance scheduled"
@@ -200,8 +198,10 @@ import {
 	Combobox,
 	injectModrinthClient,
 	injectNotificationManager,
+	DateInput,
 	NewModal,
-	StyledInput,
+	Input,
+	Textarea,
 	TagItem,
 	Toggle,
 } from '@modrinth/ui'
diff --git a/apps/frontend/src/components/ui/auth/CreateAccount.vue b/apps/frontend/src/components/ui/auth/CreateAccount.vue
index 412883ace..fdfeba530 100644
--- a/apps/frontend/src/components/ui/auth/CreateAccount.vue
+++ b/apps/frontend/src/components/ui/auth/CreateAccount.vue
@@ -45,7 +45,7 @@
 			<label class="text-md font-semibold text-contrast" for="create-account-username">
 				{{ formatMessage(messages.usernameOptionalLabel) }}
 			</label>
-			<StyledInput
+			<Input
 				id="create-account-username"
 				v-model="usernameModel"
 				type="text"
@@ -106,7 +106,7 @@ import {
 	DatePicker,
 	defineMessages,
 	injectNotificationManager,
-	StyledInput,
+	Input,
 	useVIntl,
 } from '@modrinth/ui'
 import { computed, ref } from 'vue'
diff --git a/apps/frontend/src/components/ui/auth/PasskeySettings.vue b/apps/frontend/src/components/ui/auth/PasskeySettings.vue
index 0aeb0aef2..b1dfb2a02 100644
--- a/apps/frontend/src/components/ui/auth/PasskeySettings.vue
+++ b/apps/frontend/src/components/ui/auth/PasskeySettings.vue
@@ -111,7 +111,7 @@
 					<div class="text-md font-semibold text-contrast">
 						{{ formatMessage(messages.passkeyNameLabel) }}
 					</div>
-					<StyledInput
+					<Input
 						id="passkey-name"
 						v-model="pendingPasskeyName"
 						:maxlength="255"
@@ -150,7 +150,7 @@
 					<div class="text-md font-semibold text-contrast">
 						{{ formatMessage(messages.passkeyNameLabel) }}
 					</div>
-					<StyledInput
+					<Input
 						id="passkey-rename"
 						v-model="passkeyToRenameName"
 						:maxlength="255"
@@ -216,7 +216,7 @@ import {
 	injectModrinthClient,
 	injectNotificationManager,
 	NewModal,
-	StyledInput,
+	Input,
 	useFormatDateTime,
 	useRelativeTime,
 	useVIntl,
diff --git a/apps/frontend/src/components/ui/auth/SignIn.vue b/apps/frontend/src/components/ui/auth/SignIn.vue
index e86d795ba..f5b93f9f8 100644
--- a/apps/frontend/src/components/ui/auth/SignIn.vue
+++ b/apps/frontend/src/components/ui/auth/SignIn.vue
@@ -18,7 +18,7 @@
 							{{ formatMessage(messages.twoFactorCodeLabelDescription) }}
 						</span>
 					</label>
-					<StyledInput
+					<Input
 						id="two-factor-code"
 						v-model="twoFactorCodeModel"
 						:maxlength="11"
@@ -89,7 +89,7 @@
 
 				<section class="mx-auto flex w-full flex-col gap-2.5">
 					<label for="email" hidden>{{ formatMessage(commonMessages.emailUsernameLabel) }}</label>
-					<StyledInput
+					<Input
 						id="email"
 						v-model="emailModel"
 						:icon="MailIcon"
@@ -101,7 +101,7 @@
 					/>
 
 					<label for="password" hidden>{{ formatMessage(commonMessages.passwordLabel) }}</label>
-					<StyledInput
+					<Input
 						id="password"
 						v-model="passwordModel"
 						:icon="KeyIcon"
@@ -167,7 +167,7 @@ import {
 	SteamColorIcon,
 	UserKeyIcon,
 } from '@modrinth/assets'
-import { ButtonStyled, commonMessages, defineMessages, StyledInput, useVIntl } from '@modrinth/ui'
+import { ButtonStyled, commonMessages, defineMessages, Input, useVIntl } from '@modrinth/ui'
 import { useStorage } from '@vueuse/core'
 import { computed } from 'vue'
 import type { LocationQuery } from 'vue-router'
diff --git a/apps/frontend/src/components/ui/auth/SignUp.vue b/apps/frontend/src/components/ui/auth/SignUp.vue
index 9da5b7371..075246aad 100644
--- a/apps/frontend/src/components/ui/auth/SignUp.vue
+++ b/apps/frontend/src/components/ui/auth/SignUp.vue
@@ -84,7 +84,7 @@
 
 		<section class="flex flex-col gap-2.5">
 			<label for="email" hidden>{{ formatMessage(commonMessages.emailLabel) }}</label>
-			<StyledInput
+			<Input
 				id="email"
 				v-model="emailModel"
 				:icon="MailIcon"
@@ -95,7 +95,7 @@
 			/>
 
 			<label for="password" hidden>{{ formatMessage(commonMessages.passwordLabel) }}</label>
-			<StyledInput
+			<Input
 				id="password"
 				v-model="passwordModel"
 				:icon="KeyIcon"
@@ -163,7 +163,7 @@ import {
 	commonMessages,
 	defineMessages,
 	IntlFormatted,
-	StyledInput,
+	Input,
 	useVIntl,
 } from '@modrinth/ui'
 import { useStorage } from '@vueuse/core'
diff --git a/apps/frontend/src/components/ui/create-project-version/components/McVersionPicker.vue b/apps/frontend/src/components/ui/create-project-version/components/McVersionPicker.vue
index c921513b4..8c11d7a99 100644
--- a/apps/frontend/src/components/ui/create-project-version/components/McVersionPicker.vue
+++ b/apps/frontend/src/components/ui/create-project-version/components/McVersionPicker.vue
@@ -13,7 +13,7 @@
 				size="small"
 			/>
 		</div>
-		<StyledInput
+		<Input
 			v-model="searchQuery"
 			:icon="SearchIcon"
 			type="text"
@@ -68,7 +68,7 @@
 <script lang="ts" setup>
 import type { Labrinth } from '@modrinth/api-client'
 import { SearchIcon } from '@modrinth/assets'
-import { ButtonStyled, Chips, StyledInput } from '@modrinth/ui'
+import { ButtonStyled, Chips, Input } from '@modrinth/ui'
 import { useMagicKeys } from '@vueuse/core'
 import { computed, nextTick, onMounted, ref } from 'vue'
 
diff --git a/apps/frontend/src/components/ui/create-project-version/stages/DetailsStage.vue b/apps/frontend/src/components/ui/create-project-version/stages/DetailsStage.vue
index 7774b371e..1b0d45a90 100644
--- a/apps/frontend/src/components/ui/create-project-version/stages/DetailsStage.vue
+++ b/apps/frontend/src/components/ui/create-project-version/stages/DetailsStage.vue
@@ -24,7 +24,7 @@
 			<span class="font-semibold text-contrast">
 				{{ formatMessage(messages.versionNumber) }} <span class="text-red">*</span>
 			</span>
-			<StyledInput
+			<Input
 				id="version-number"
 				v-model="draftVersion.version_number"
 				:disabled="isUploading"
@@ -36,7 +36,7 @@
 		</div>
 		<div class="flex flex-col gap-2">
 			<span class="font-semibold text-contrast">{{ formatMessage(messages.versionSubtitle) }}</span>
-			<StyledInput
+			<Input
 				id="version-number"
 				v-model="draftVersion.name"
 				:placeholder="formatMessage(messages.versionSubtitlePlaceholder)"
@@ -67,7 +67,7 @@ import {
 	Chips,
 	defineMessages,
 	MarkdownEditor,
-	StyledInput,
+	Input,
 	Tabs,
 	type TabsTab,
 	useVIntl,
diff --git a/apps/frontend/src/components/ui/create/CollectionCreateModal.vue b/apps/frontend/src/components/ui/create/CollectionCreateModal.vue
index 50c4e96aa..b17e2cf2b 100644
--- a/apps/frontend/src/components/ui/create/CollectionCreateModal.vue
+++ b/apps/frontend/src/components/ui/create/CollectionCreateModal.vue
@@ -9,7 +9,7 @@
 						<span class="text-brand-red">*</span>
 					</span>
 				</label>
-				<StyledInput
+				<Input
 					id="name"
 					v-model="name"
 					:maxlength="64"
@@ -25,10 +25,9 @@
 					}}</span>
 					<span>{{ formatMessage(messages.summaryDescription) }}</span>
 				</label>
-				<StyledInput
+				<Textarea
 					id="additional-information"
 					v-model="description"
-					multiline
 					:maxlength="256"
 					:placeholder="formatMessage(messages.summaryPlaceholder)"
 					:disabled="hasHitLimit"
@@ -62,7 +61,8 @@ import {
 	defineMessages,
 	injectNotificationManager,
 	NewModal,
-	StyledInput,
+	Input,
+	Textarea,
 	useVIntl,
 } from '@modrinth/ui'
 
diff --git a/apps/frontend/src/components/ui/create/OrganizationCreateModal.vue b/apps/frontend/src/components/ui/create/OrganizationCreateModal.vue
index 687e2c236..926ad6ec4 100644
--- a/apps/frontend/src/components/ui/create/OrganizationCreateModal.vue
+++ b/apps/frontend/src/components/ui/create/OrganizationCreateModal.vue
@@ -9,7 +9,7 @@
 						<span class="text-brand-red">*</span>
 					</span>
 				</label>
-				<StyledInput
+				<Input
 					id="name"
 					v-model="name"
 					:maxlength="64"
@@ -28,7 +28,7 @@
 				</label>
 				<div class="text-input-wrapper">
 					<div class="text-input-wrapper__before">https://modrinth.com/organization/</div>
-					<StyledInput
+					<Input
 						id="slug"
 						v-model="slug"
 						:maxlength="64"
@@ -46,10 +46,9 @@
 					</span>
 					<span>{{ formatMessage(messages.summaryDescription) }}</span>
 				</label>
-				<StyledInput
+				<Textarea
 					id="additional-information"
 					v-model="description"
-					multiline
 					:maxlength="256"
 					:placeholder="formatMessage(messages.summaryPlaceholder)"
 					:disabled="hasHitLimit"
@@ -84,7 +83,8 @@ import {
 	defineMessages,
 	injectNotificationManager,
 	NewModal,
-	StyledInput,
+	Input,
+	Textarea,
 	useVIntl,
 } from '@modrinth/ui'
 import { ref } from 'vue'
diff --git a/apps/frontend/src/components/ui/create/ProjectCreateModal.vue b/apps/frontend/src/components/ui/create/ProjectCreateModal.vue
index 0000146bb..9b2380f3f 100644
--- a/apps/frontend/src/components/ui/create/ProjectCreateModal.vue
+++ b/apps/frontend/src/components/ui/create/ProjectCreateModal.vue
@@ -32,7 +32,7 @@
 						{{ formatMessage(messages.nameLabel) }}
 					</span>
 				</label>
-				<StyledInput
+				<Input
 					id="name"
 					v-model="name"
 					:maxlength="64"
@@ -48,7 +48,7 @@
 				</span>
 				<div class="text-input-wrapper !w-full">
 					<div class="text-input-wrapper__before">https://modrinth.com/project/</div>
-					<StyledInput
+					<Input
 						id="slug"
 						v-model="slug"
 						:maxlength="64"
@@ -100,10 +100,9 @@
 						{{ formatMessage(messages.summaryLabel) }}
 					</span>
 				</label>
-				<StyledInput
+				<Textarea
 					id="additional-information"
 					v-model="description"
-					multiline
 					:maxlength="256"
 					:placeholder="formatMessage(messages.summaryPlaceholder)"
 					:disabled="hasHitLimit"
@@ -141,7 +140,8 @@ import {
 	injectModrinthClient,
 	injectNotificationManager,
 	NewModal,
-	StyledInput,
+	Input,
+	Textarea,
 	useVIntl,
 } from '@modrinth/ui'
 import { computed, defineAsyncComponent, h } from 'vue'
diff --git a/apps/frontend/src/components/ui/dashboard/RevenueInputField.vue b/apps/frontend/src/components/ui/dashboard/RevenueInputField.vue
index fb1b469d3..a09d65e83 100644
--- a/apps/frontend/src/components/ui/dashboard/RevenueInputField.vue
+++ b/apps/frontend/src/components/ui/dashboard/RevenueInputField.vue
@@ -2,7 +2,7 @@
 	<div class="flex flex-col gap-2">
 		<div class="flex items-center gap-2">
 			<div class="relative flex-1">
-				<StyledInput
+				<Input
 					ref="amountInput"
 					:model-value="modelValue"
 					type="number"
@@ -12,7 +12,7 @@
 					:disabled="isDisabled"
 					:placeholder="formatMessage(formFieldPlaceholders.amountPlaceholder)"
 					wrapper-class="w-full"
-					@update:model-value="handleStyledInput"
+					@update:model-value="handleInput"
 				/>
 			</div>
 			<Combobox
@@ -54,7 +54,7 @@ import {
 	Combobox,
 	commonMessages,
 	formFieldPlaceholders,
-	StyledInput,
+	Input,
 	useFormatMoney,
 	useVIntl,
 } from '@modrinth/ui'
@@ -83,7 +83,7 @@ const emit = defineEmits<{
 
 const { formatMessage } = useVIntl()
 const formatMoney = useFormatMoney()
-const amountInput = ref<InstanceType<typeof StyledInput> | null>(null)
+const amountInput = ref<InstanceType<typeof Input> | null>(null)
 
 const safeMaxAmount = computed(() => {
 	return Math.max(0, props.maxAmount)
@@ -108,7 +108,7 @@ function setMaxAmount() {
 	emit('update:modelValue', maxValue)
 }
 
-function handleStyledInput(val: string | number) {
+function handleInput(val: string | number) {
 	const value = String(val)
 
 	if (value && value.includes('.')) {
diff --git a/apps/frontend/src/components/ui/dashboard/withdraw-stages/LegacyPaypalDetailsStage.vue b/apps/frontend/src/components/ui/dashboard/withdraw-stages/LegacyPaypalDetailsStage.vue
index 24974b3bb..2b888d0c6 100644
--- a/apps/frontend/src/components/ui/dashboard/withdraw-stages/LegacyPaypalDetailsStage.vue
+++ b/apps/frontend/src/components/ui/dashboard/withdraw-stages/LegacyPaypalDetailsStage.vue
@@ -41,7 +41,7 @@
 				>
 			</label>
 			<div class="flex flex-row gap-2">
-				<StyledInput
+				<Input
 					v-model="venmoHandle"
 					:placeholder="formatMessage(messages.venmoHandlePlaceholder)"
 					wrapper-class="w-full"
@@ -112,7 +112,7 @@ import {
 	formFieldLabels,
 	IntlFormatted,
 	normalizeChildren,
-	StyledInput,
+	Input,
 	useVIntl,
 } from '@modrinth/ui'
 import { useDebounceFn } from '@vueuse/core'
diff --git a/apps/frontend/src/components/ui/dashboard/withdraw-stages/MuralpayDetailsStage.vue b/apps/frontend/src/components/ui/dashboard/withdraw-stages/MuralpayDetailsStage.vue
index f0e4b6311..42064021f 100644
--- a/apps/frontend/src/components/ui/dashboard/withdraw-stages/MuralpayDetailsStage.vue
+++ b/apps/frontend/src/components/ui/dashboard/withdraw-stages/MuralpayDetailsStage.vue
@@ -56,7 +56,7 @@
 			</span>
 			<div class="flex flex-col gap-3 sm:flex-row sm:gap-4">
 				<div class="flex flex-1 flex-col gap-2.5">
-					<StyledInput
+					<Input
 						v-model="formData.bankAccountOwnerFirstName"
 						:placeholder="formatMessage(formFieldPlaceholders.firstNamePlaceholder)"
 						autocomplete="given-name"
@@ -64,7 +64,7 @@
 					/>
 				</div>
 				<div class="flex flex-1 flex-col gap-2.5">
-					<StyledInput
+					<Input
 						v-model="formData.bankAccountOwnerLastName"
 						:placeholder="formatMessage(formFieldPlaceholders.lastNamePlaceholder)"
 						autocomplete="family-name"
@@ -91,7 +91,7 @@
 				class="h-10"
 			/>
 
-			<StyledInput
+			<Input
 				v-else
 				v-model="formData.bankName"
 				:placeholder="formatMessage(formFieldPlaceholders.bankNamePlaceholder)"
@@ -108,7 +108,7 @@
 				</span>
 			</label>
 
-			<StyledInput
+			<Input
 				v-if="['text', 'email', 'tel'].includes(field.type)"
 				v-model="formData[field.name]"
 				:type="field.type === 'tel' ? undefined : field.type === 'text' ? undefined : field.type"
@@ -158,7 +158,7 @@
 							<span v-if="dynamicDocumentNumberField.required" class="text-red">*</span>
 						</span>
 					</label>
-					<StyledInput
+					<Input
 						v-model="formData.documentNumber"
 						:placeholder="dynamicDocumentNumberField.placeholder"
 						autocomplete="off"
@@ -240,7 +240,7 @@ import {
 	getCurrencyIcon,
 	IntlFormatted,
 	normalizeChildren,
-	StyledInput,
+	Input,
 	useVIntl,
 } from '@modrinth/ui'
 import { useDebounceFn } from '@vueuse/core'
diff --git a/apps/frontend/src/components/ui/dashboard/withdraw-stages/MuralpayKycStage.vue b/apps/frontend/src/components/ui/dashboard/withdraw-stages/MuralpayKycStage.vue
index 6ba3e3048..153225837 100644
--- a/apps/frontend/src/components/ui/dashboard/withdraw-stages/MuralpayKycStage.vue
+++ b/apps/frontend/src/components/ui/dashboard/withdraw-stages/MuralpayKycStage.vue
@@ -32,7 +32,7 @@
 						<span class="text-red">*</span>
 					</span>
 				</label>
-				<StyledInput
+				<Input
 					v-model="formData.businessName"
 					:placeholder="formatMessage(formFieldPlaceholders.businessNamePlaceholder)"
 					autocomplete="organization"
@@ -47,7 +47,7 @@
 						<span class="text-red">*</span>
 					</span>
 				</label>
-				<StyledInput
+				<Input
 					v-model="formData.email"
 					type="email"
 					:placeholder="formatMessage(formFieldPlaceholders.emailPlaceholder)"
@@ -65,7 +65,7 @@
 								<span class="text-red">*</span>
 							</span>
 						</label>
-						<StyledInput
+						<Input
 							v-model="formData.firstName"
 							:placeholder="formatMessage(formFieldPlaceholders.firstNamePlaceholder)"
 							autocomplete="given-name"
@@ -79,7 +79,7 @@
 								<span class="text-red">*</span>
 							</span>
 						</label>
-						<StyledInput
+						<Input
 							v-model="formData.lastName"
 							:placeholder="formatMessage(formFieldPlaceholders.lastNamePlaceholder)"
 							autocomplete="family-name"
@@ -112,7 +112,7 @@
 						<span class="text-red">*</span>
 					</span>
 				</label>
-				<StyledInput
+				<Input
 					v-model="formData.physicalAddress.address1"
 					:placeholder="formatMessage(formFieldPlaceholders.addressPlaceholder)"
 					autocomplete="address-line1"
@@ -126,7 +126,7 @@
 						{{ formatMessage(formFieldLabels.addressLine2) }}
 					</span>
 				</label>
-				<StyledInput
+				<Input
 					v-model="formData.physicalAddress.address2"
 					:placeholder="formatMessage(formFieldPlaceholders.address2Placeholder)"
 					autocomplete="address-line2"
@@ -142,7 +142,7 @@
 							<span class="text-red">*</span>
 						</span>
 					</label>
-					<StyledInput
+					<Input
 						v-model="formData.physicalAddress.city"
 						:placeholder="formatMessage(formFieldPlaceholders.cityPlaceholder)"
 						autocomplete="address-level2"
@@ -164,7 +164,7 @@
 						searchable
 						:search-placeholder="formatMessage(messages.searchSubdivisionsPlaceholder)"
 					/>
-					<StyledInput
+					<Input
 						v-else
 						v-model="formData.physicalAddress.state"
 						:placeholder="formatMessage(formFieldPlaceholders.statePlaceholder)"
@@ -182,7 +182,7 @@
 							<span class="text-red">*</span>
 						</span>
 					</label>
-					<StyledInput
+					<Input
 						v-model="formData.physicalAddress.zip"
 						:placeholder="formatMessage(formFieldPlaceholders.postalCodePlaceholder)"
 						autocomplete="postal-code"
@@ -217,7 +217,7 @@ import {
 	defineMessages,
 	formFieldLabels,
 	formFieldPlaceholders,
-	StyledInput,
+	Input,
 	useVIntl,
 } from '@modrinth/ui'
 // TODO: Switch to using Muralpay's improved endpoint when it's available.
diff --git a/apps/frontend/src/components/ui/dashboard/withdraw-stages/TremendousDetailsStage.vue b/apps/frontend/src/components/ui/dashboard/withdraw-stages/TremendousDetailsStage.vue
index 764108e70..cba52fb19 100644
--- a/apps/frontend/src/components/ui/dashboard/withdraw-stages/TremendousDetailsStage.vue
+++ b/apps/frontend/src/components/ui/dashboard/withdraw-stages/TremendousDetailsStage.vue
@@ -39,7 +39,7 @@
 					>{{ formatMessage(formFieldLabels.email) }} <span class="text-red">*</span></span
 				>
 			</label>
-			<StyledInput
+			<Input
 				v-model="deliveryEmail"
 				type="email"
 				:placeholder="formatMessage(formFieldPlaceholders.emailPlaceholder)"
@@ -131,7 +131,7 @@
 
 			<div v-if="showGiftCardSelector && useFixedDenominations" class="flex flex-col gap-2.5">
 				<template v-if="useDenominationSuggestions">
-					<StyledInput
+					<Input
 						v-model="denominationSearchInput"
 						type="number"
 						:icon="SearchIcon"
@@ -324,7 +324,7 @@ import {
 	IntlFormatted,
 	normalizeChildren,
 	paymentMethodMessages,
-	StyledInput,
+	Input,
 	useDebugLogger,
 	useFormatMoney,
 	useVIntl,
diff --git a/apps/frontend/src/components/ui/moderation/GlobalDetailTracesList.vue b/apps/frontend/src/components/ui/moderation/GlobalDetailTracesList.vue
index 8d42abbc1..3961866af 100644
--- a/apps/frontend/src/components/ui/moderation/GlobalDetailTracesList.vue
+++ b/apps/frontend/src/components/ui/moderation/GlobalDetailTracesList.vue
@@ -1,7 +1,7 @@
 <template>
 	<div>
 		<form class="flex flex-col gap-2 sm:flex-row" @submit.prevent="executeSearch">
-			<StyledInput
+			<Input
 				v-model="query"
 				:icon="SearchIcon"
 				type="text"
@@ -129,7 +129,7 @@ import {
 	injectModrinthClient,
 	injectNotificationManager,
 	Pagination,
-	StyledInput,
+	Input,
 } from '@modrinth/ui'
 
 import GlobalDetailLocalTraceCard from '~/components/ui/moderation/GlobalDetailLocalTraceCard.vue'
diff --git a/apps/frontend/src/components/ui/moderation/checklist/ModerationChecklist.vue b/apps/frontend/src/components/ui/moderation/checklist/ModerationChecklist.vue
index 3727b6197..3e6bc477b 100644
--- a/apps/frontend/src/components/ui/moderation/checklist/ModerationChecklist.vue
+++ b/apps/frontend/src/components/ui/moderation/checklist/ModerationChecklist.vue
@@ -218,10 +218,9 @@
 								:heading-buttons="false"
 								:on-image-upload="onUploadHandler"
 							/>
-							<StyledInput
+							<Textarea
 								v-else
 								v-model="messageText"
-								multiline
 								placeholder="No message generated."
 								autocomplete="off"
 								input-class="h-[400px] font-mono"
@@ -414,7 +413,7 @@ import {
 	injectNotificationManager,
 	injectProjectPageContext,
 	MarkdownEditor,
-	StyledInput,
+	Textarea,
 	useDebugLogger,
 } from '@modrinth/ui'
 import TeleportOverflowMenu from '@modrinth/ui/src/components/base/TeleportOverflowMenu.vue'
diff --git a/apps/frontend/src/components/ui/moderation/checklist/ModpackPermissionsFlow.vue b/apps/frontend/src/components/ui/moderation/checklist/ModpackPermissionsFlow.vue
index 6aec854a4..33908052b 100644
--- a/apps/frontend/src/components/ui/moderation/checklist/ModpackPermissionsFlow.vue
+++ b/apps/frontend/src/components/ui/moderation/checklist/ModpackPermissionsFlow.vue
@@ -34,7 +34,7 @@
 					<label for="proof">
 						<span class="label__title">Proof</span>
 					</label>
-					<StyledInput
+					<Input
 						id="proof"
 						v-model="(modPackData[currentIndex] as ModerationUnknownModpackItem).proof"
 						autocomplete="off"
@@ -44,7 +44,7 @@
 					<label for="link">
 						<span class="label__title">Link</span>
 					</label>
-					<StyledInput
+					<Input
 						id="link"
 						v-model="(modPackData[currentIndex] as ModerationUnknownModpackItem).url"
 						autocomplete="off"
@@ -54,7 +54,7 @@
 					<label for="title">
 						<span class="label__title">Title</span>
 					</label>
-					<StyledInput
+					<Input
 						id="title"
 						v-model="(modPackData[currentIndex] as ModerationUnknownModpackItem).title"
 						autocomplete="off"
@@ -143,7 +143,7 @@
 
 <script setup lang="ts">
 import { LeftArrowIcon, RightArrowIcon } from '@modrinth/assets'
-import { ButtonStyled, StyledInput } from '@modrinth/ui'
+import { ButtonStyled, Input } from '@modrinth/ui'
 import type {
 	ModerationFlameModpackItem,
 	ModerationJudgements,
diff --git a/apps/frontend/src/components/ui/moderation/checklist/NodeRenderer.vue b/apps/frontend/src/components/ui/moderation/checklist/NodeRenderer.vue
index 92641ce1b..c8e85453c 100644
--- a/apps/frontend/src/components/ui/moderation/checklist/NodeRenderer.vue
+++ b/apps/frontend/src/components/ui/moderation/checklist/NodeRenderer.vue
@@ -31,10 +31,10 @@ import {
 	Combobox,
 	injectProjectPageContext,
 	MarkdownEditor,
-	StyledInput,
+	Input,
 } from '@modrinth/ui'
 import { renderHighlightedString, renderString } from '@modrinth/utils'
-import { inject, nextTick, onMounted, reactive, watchEffect } from 'vue'
+import { inject, onMounted, reactive, watchEffect } from 'vue'
 
 import { NODE_META_KEY, STATE_KEY } from './checklist-context'
 
@@ -266,7 +266,6 @@ function setTextState(node: IdentifiedNodeBuilder, v: string): void {
 		const def = resolveDefault(node as ValueNodeBuilder)
 		const defStr = typeof def === 'string' ? def : ''
 		setNodeState(node, ov === defStr ? undefined : ov || undefined)
-		nextTick(() => textInputRefs.get(node)?.setValue(ov))
 		return
 	}
 
@@ -277,7 +276,7 @@ function setTextState(node: IdentifiedNodeBuilder, v: string): void {
 
 function handleButtonClick(node: ButtonNodeBuilder): void {
 	const before = new Map<NodeBuilder, string>()
-	for (const inputNode of textInputRefs.keys()) {
+	for (const inputNode of textInputNodes) {
 		before.set(inputNode, getTextState(asIdentified(inputNode)))
 	}
 	node._onClick?.(props.showContext)
@@ -288,7 +287,7 @@ function handleButtonClick(node: ButtonNodeBuilder): void {
 }
 
 onMounted(() => {
-	for (const inputNode of textInputRefs.keys()) {
+	for (const inputNode of textInputNodes) {
 		setTextState(asIdentified(inputNode), getTextState(asIdentified(inputNode)))
 	}
 })
@@ -325,7 +324,7 @@ function toggleChip(parent: IdentifiedNodeBuilder, child: IdentifiedNodeBuilder)
 	setNodeState(parent, selected.size > 0 ? selected : undefined)
 }
 
-const textInputRefs = new Map<NodeBuilder, { setValue: (v: string) => void }>()
+const textInputNodes = new Set<NodeBuilder>()
 const overrideHelpers = { override: (v: string): OverrideValue => ({ __override: v }) }
 
 function isOverrideValue(v: unknown): v is OverrideValue {
@@ -720,9 +719,9 @@ watchEffect(async () => {
 
 					<!-- text -->
 					<template v-else-if="item.type === 'text'">
-						<StyledInput
+						<Input
 							:id="`node-${asIdentified(item).id}`"
-							:ref="(el: any) => (el ? textInputRefs.set(item, el) : textInputRefs.delete(item))"
+							:ref="(el: any) => (el ? textInputNodes.add(item) : textInputNodes.delete(item))"
 							v-tooltip="getTooltipConfig(item, showContext)"
 							:model-value="getTextState(asIdentified(item))"
 							:placeholder="getPlaceholder(asInput(item))"
diff --git a/apps/frontend/src/pages/[type]/[project]/gallery.vue b/apps/frontend/src/pages/[type]/[project]/gallery.vue
index 801a86017..3b66b1681 100644
--- a/apps/frontend/src/pages/[type]/[project]/gallery.vue
+++ b/apps/frontend/src/pages/[type]/[project]/gallery.vue
@@ -43,7 +43,7 @@
 				<label for="gallery-image-title">
 					<span class="label__title">Title</span>
 				</label>
-				<StyledInput
+				<Input
 					id="gallery-image-title"
 					v-model="editTitle"
 					:maxlength="64"
@@ -52,17 +52,16 @@
 				<label for="gallery-image-desc">
 					<span class="label__title">Description</span>
 				</label>
-				<StyledInput
+				<Textarea
 					id="gallery-image-desc"
 					v-model="editDescription"
-					multiline
 					:maxlength="255"
 					placeholder="Enter description..."
 				/>
 				<label for="gallery-image-ordering">
 					<span class="label__title">Order Index</span>
 				</label>
-				<StyledInput
+				<Input
 					id="gallery-image-ordering"
 					v-model="editOrder"
 					type="number"
@@ -306,7 +305,8 @@ import {
 	FileInput,
 	injectProjectPageContext,
 	NewModal as Modal,
-	StyledInput,
+	Input,
+	Textarea,
 	useFormatDateTime,
 } from '@modrinth/ui'
 import { useEventListener } from '@vueuse/core'
diff --git a/apps/frontend/src/pages/[type]/[project]/settings/gallery.vue b/apps/frontend/src/pages/[type]/[project]/settings/gallery.vue
index cf135ac42..898e0dc7e 100644
--- a/apps/frontend/src/pages/[type]/[project]/settings/gallery.vue
+++ b/apps/frontend/src/pages/[type]/[project]/settings/gallery.vue
@@ -43,7 +43,7 @@
 				<label for="gallery-image-title">
 					<span class="label__title">Title</span>
 				</label>
-				<StyledInput
+				<Input
 					id="gallery-image-title"
 					v-model="editTitle"
 					:maxlength="64"
@@ -52,17 +52,16 @@
 				<label for="gallery-image-desc">
 					<span class="label__title">Description</span>
 				</label>
-				<StyledInput
+				<Textarea
 					id="gallery-image-desc"
 					v-model="editDescription"
-					multiline
 					:maxlength="255"
 					placeholder="Enter description..."
 				/>
 				<label for="gallery-image-ordering">
 					<span class="label__title">Order Index</span>
 				</label>
-				<StyledInput
+				<Input
 					id="gallery-image-ordering"
 					v-model="editOrder"
 					type="number"
@@ -296,7 +295,8 @@ import {
 	FileInput,
 	injectProjectPageContext,
 	NewModal as Modal,
-	StyledInput,
+	Input,
+	Textarea,
 	useFormatDateTime,
 } from '@modrinth/ui'
 
diff --git a/apps/frontend/src/pages/[type]/[project]/settings/general.vue b/apps/frontend/src/pages/[type]/[project]/settings/general.vue
index 54570dde3..a67f49e40 100644
--- a/apps/frontend/src/pages/[type]/[project]/settings/general.vue
+++ b/apps/frontend/src/pages/[type]/[project]/settings/general.vue
@@ -6,7 +6,7 @@ import {
 	injectProjectPageContext,
 	type MessageDescriptor,
 	SettingsLabel,
-	StyledInput,
+	Input,
 	UnsavedChangesPopup,
 	usePageLeaveSafety,
 	useSavable,
@@ -140,7 +140,7 @@ const placeholder = computed(() => placeholders[placeholderIndex.value] ?? place
 					:description="messages.nameDescription"
 				/>
 				<div class="flex">
-					<StyledInput
+					<Input
 						id="project-name"
 						v-model="current.title"
 						:placeholder="formatMessage(placeholder.name)"
@@ -156,7 +156,7 @@ const placeholder = computed(() => placeholders[placeholderIndex.value] ?? place
 					:title="messages.taglineTitle"
 					:description="messages.taglineDescription"
 				/>
-				<StyledInput
+				<Input
 					id="project-tagline"
 					v-model="current.tagline"
 					:placeholder="formatMessage(placeholder.tagline)"
@@ -169,7 +169,7 @@ const placeholder = computed(() => placeholders[placeholderIndex.value] ?? place
 				<SettingsLabel id="project-url" :title="messages.urlTitle" />
 				<div class="text-input-wrapper">
 					<div class="text-input-wrapper__before">https://modrinth.com/project/</div>
-					<StyledInput id="project-url" v-model="current.url" :maxlength="64" autocomplete="off" />
+					<Input id="project-url" v-model="current.url" :maxlength="64" autocomplete="off" />
 				</div>
 			</div>
 		</div>
diff --git a/apps/frontend/src/pages/[type]/[project]/settings/index.vue b/apps/frontend/src/pages/[type]/[project]/settings/index.vue
index 9e755434f..f59c7f463 100644
--- a/apps/frontend/src/pages/[type]/[project]/settings/index.vue
+++ b/apps/frontend/src/pages/[type]/[project]/settings/index.vue
@@ -21,7 +21,7 @@
 					<label for="project-name">
 						<span class="label__title">Name</span>
 					</label>
-					<StyledInput
+					<Input
 						id="project-name"
 						v-model="name"
 						:maxlength="2048"
@@ -39,7 +39,7 @@
 								$getProjectTypeForUrl(project.project_type, project.loaders)
 							}}/
 						</div>
-						<StyledInput
+						<Input
 							id="project-slug"
 							v-model="slug"
 							:maxlength="64"
@@ -53,10 +53,9 @@
 					<label for="project-summary">
 						<span class="label__title">Summary</span>
 					</label>
-					<StyledInput
+					<Textarea
 						id="project-summary"
 						v-model="summary"
-						multiline
 						:maxlength="256"
 						:disabled="!hasPermission"
 						resize="vertical"
@@ -341,7 +340,8 @@ import {
 	injectModrinthClient,
 	injectNotificationManager,
 	injectProjectPageContext,
-	StyledInput,
+	Input,
+	Textarea,
 	Toggle,
 	UnsavedChangesPopup,
 	useFormatBytes,
diff --git a/apps/frontend/src/pages/[type]/[project]/settings/license.vue b/apps/frontend/src/pages/[type]/[project]/settings/license.vue
index 34e2f3564..d9c884999 100644
--- a/apps/frontend/src/pages/[type]/[project]/settings/license.vue
+++ b/apps/frontend/src/pages/[type]/[project]/settings/license.vue
@@ -72,7 +72,7 @@
 				</label>
 
 				<div class="w-1/2">
-					<StyledInput
+					<Input
 						id="license-url"
 						v-model="current.licenseUrl"
 						type="url"
@@ -105,7 +105,7 @@
 				</label>
 
 				<div class="flex w-1/2 flex-col gap-2">
-					<StyledInput
+					<Input
 						v-if="!current.nonSpdxLicense"
 						id="license-spdx"
 						v-model="current.license.short"
@@ -114,7 +114,7 @@
 						placeholder="SPDX identifier"
 						:disabled="!hasPermission"
 					/>
-					<StyledInput
+					<Input
 						v-else
 						id="license-name"
 						v-model="current.license.short"
@@ -158,7 +158,7 @@ import {
 	ConfirmLeaveModal,
 	DropdownSelect,
 	injectProjectPageContext,
-	StyledInput,
+	Input,
 	UnsavedChangesPopup,
 	usePageLeaveSafety,
 	useSavable,
diff --git a/apps/frontend/src/pages/[type]/[project]/settings/links.vue b/apps/frontend/src/pages/[type]/[project]/settings/links.vue
index 090260dde..4eb8ef8b9 100644
--- a/apps/frontend/src/pages/[type]/[project]/settings/links.vue
+++ b/apps/frontend/src/pages/[type]/[project]/settings/links.vue
@@ -142,7 +142,7 @@
 					v-tooltip="`Link includes a domain which isn't common for this link type.`"
 					class="size-6 animate-pulse text-orange"
 				/>
-				<StyledInput
+				<Input
 					id="project-issue-tracker"
 					v-model="issuesUrl"
 					type="url"
@@ -176,7 +176,7 @@
 					v-tooltip="`Link includes a domain which isn't common for this link type.`"
 					class="size-6 animate-pulse text-orange"
 				/>
-				<StyledInput
+				<Input
 					id="project-source-code"
 					v-model="sourceUrl"
 					type="url"
@@ -205,7 +205,7 @@
 					v-tooltip="`Discord invites are not appropriate for this link type.`"
 					class="size-6 animate-pulse text-orange"
 				/>
-				<StyledInput
+				<Input
 					id="project-wiki-page"
 					v-model="wikiUrl"
 					type="url"
@@ -229,7 +229,7 @@
 					v-tooltip="`You're using a link which isn't common for this link type.`"
 					class="size-6 animate-pulse text-orange"
 				/>
-				<StyledInput
+				<Input
 					id="project-discord-invite"
 					v-model="discordUrl"
 					type="url"
@@ -250,7 +250,7 @@
 				:key="`donation-link-${index}`"
 				class="input-group donation-link-group"
 			>
-				<StyledInput
+				<Input
 					v-model="donationLink.url"
 					type="url"
 					:maxlength="2048"
@@ -292,7 +292,7 @@ import {
 	injectModrinthClient,
 	injectNotificationManager,
 	injectProjectPageContext,
-	StyledInput,
+	Input,
 } from '@modrinth/ui'
 
 const tags = useGeneratedState()
diff --git a/apps/frontend/src/pages/[type]/[project]/settings/members.vue b/apps/frontend/src/pages/[type]/[project]/settings/members.vue
index e6ed7a5a5..56fa14e72 100644
--- a/apps/frontend/src/pages/[type]/[project]/settings/members.vue
+++ b/apps/frontend/src/pages/[type]/[project]/settings/members.vue
@@ -33,7 +33,7 @@
 				</span>
 			</span>
 			<div class="input-group">
-				<StyledInput
+				<Input
 					id="username"
 					v-model="currentUsername"
 					placeholder="Username"
@@ -112,7 +112,7 @@
 							The title of the role that this member plays for this project.
 						</span>
 					</label>
-					<StyledInput
+					<Input
 						:id="`member-${allTeamMembers[index].user.username}-role`"
 						v-model="allTeamMembers[index].role"
 						:disabled="(currentMember?.permissions & EDIT_MEMBER) !== EDIT_MEMBER"
@@ -126,7 +126,7 @@
 							this project's revenue goes to this member.
 						</span>
 					</label>
-					<StyledInput
+					<Input
 						:id="`member-${allTeamMembers[index].user.username}-monetization-weight`"
 						v-model="allTeamMembers[index].payouts_split"
 						type="number"
@@ -378,7 +378,7 @@
 							The title of the role that this member plays for this project.
 						</span>
 					</label>
-					<StyledInput
+					<Input
 						:id="`member-${allOrgMembers[index].user.username}-role`"
 						v-model="allOrgMembers[index].role"
 						:disabled="
@@ -395,7 +395,7 @@
 							this project's revenue goes to this member.
 						</span>
 					</label>
-					<StyledInput
+					<Input
 						:id="`member-${allOrgMembers[index].user.username}-monetization-weight`"
 						v-model="allOrgMembers[index].payouts_split"
 						type="number"
@@ -568,7 +568,7 @@ import {
 	injectModrinthClient,
 	injectNotificationManager,
 	injectProjectPageContext,
-	StyledInput,
+	Input,
 	Toggle,
 } from '@modrinth/ui'
 import { useQuery } from '@tanstack/vue-query'
diff --git a/apps/frontend/src/pages/[type]/[project]/settings/permissions.vue b/apps/frontend/src/pages/[type]/[project]/settings/permissions.vue
index 16997ddf5..04995dd3e 100644
--- a/apps/frontend/src/pages/[type]/[project]/settings/permissions.vue
+++ b/apps/frontend/src/pages/[type]/[project]/settings/permissions.vue
@@ -30,7 +30,7 @@ import {
 	injectNotificationManager,
 	injectProjectPageContext,
 	IntlFormatted,
-	StyledInput,
+	Input,
 	useVIntl,
 } from '@modrinth/ui'
 import { isStaff } from '@modrinth/utils'
@@ -563,7 +563,7 @@ function dismissInfoBanner() {
 		</template>
 		<div class="flex flex-col gap-2">
 			<div class="grid grid-cols-1 gap-2 sm:grid-cols-[minmax(0,1fr)_auto_auto_auto]">
-				<StyledInput
+				<Input
 					v-model="searchQuery"
 					type="text"
 					autocomplete="off"
diff --git a/apps/frontend/src/pages/[type]/[project]/settings/server.vue b/apps/frontend/src/pages/[type]/[project]/settings/server.vue
index 4df46c828..8ff1e18ba 100644
--- a/apps/frontend/src/pages/[type]/[project]/settings/server.vue
+++ b/apps/frontend/src/pages/[type]/[project]/settings/server.vue
@@ -62,7 +62,7 @@
 							}
 						"
 					>
-						<StyledInput
+						<Input
 							id="java-address"
 							v-model="javaAddress"
 							:placeholder="formatMessage(messages.enterAddressPlaceholder)"
@@ -142,7 +142,7 @@
 						</span>
 					</label>
 					<div class="mt-2 flex items-center gap-2">
-						<StyledInput
+						<Input
 							id="bedrock-address"
 							v-model="bedrockAddress"
 							:placeholder="formatMessage(messages.enterAddressPlaceholder)"
@@ -182,7 +182,7 @@ import {
 	normalizeChildren,
 	SERVER_LANGUAGES,
 	SERVER_REGIONS,
-	StyledInput,
+	Input,
 	UnsavedChangesPopup,
 	usePageLeaveSafety,
 	useVIntl,
diff --git a/apps/frontend/src/pages/admin/affiliates.vue b/apps/frontend/src/pages/admin/affiliates.vue
index 92925757c..ecaad2d00 100644
--- a/apps/frontend/src/pages/admin/affiliates.vue
+++ b/apps/frontend/src/pages/admin/affiliates.vue
@@ -19,7 +19,7 @@
 		>
 			<h1 class="m-0 grow text-2xl font-extrabold">Manage affiliate links</h1>
 			<div class="flex items-center gap-2">
-				<StyledInput
+				<Input
 					v-model="filterQuery"
 					:icon="SearchIcon"
 					type="text"
@@ -94,7 +94,7 @@ import {
 	ConfirmModal,
 	injectModrinthClient,
 	injectNotificationManager,
-	StyledInput,
+	Input,
 } from '@modrinth/ui'
 import type { User } from '@modrinth/utils'
 import { useQuery } from '@tanstack/vue-query'
diff --git a/apps/frontend/src/pages/admin/analytics/events.vue b/apps/frontend/src/pages/admin/analytics/events.vue
index a471615ce..df86e8d09 100644
--- a/apps/frontend/src/pages/admin/analytics/events.vue
+++ b/apps/frontend/src/pages/admin/analytics/events.vue
@@ -18,7 +18,7 @@
 		<div class="flex flex-col gap-5" @submit.prevent="saveEvent">
 			<div class="flex flex-col gap-2">
 				<span class="label__title font-semibold">Title</span>
-				<StyledInput
+				<Input
 					id="analytics-event-title"
 					ref="titleInput"
 					v-model="form.title"
@@ -48,7 +48,7 @@
 					</ButtonStyled>
 				</div>
 				<div class="flex items-center gap-2">
-					<StyledInput
+					<Input
 						id="analytics-event-link"
 						v-model="form.announcementUrl"
 						type="url"
@@ -129,7 +129,7 @@
 				<h1 class="m-0 text-2xl font-extrabold text-contrast">Analytics Events</h1>
 
 				<div class="flex flex-col gap-2 sm:flex-row sm:items-center">
-					<StyledInput
+					<Input
 						v-model="searchQuery"
 						:icon="SearchIcon"
 						type="search"
@@ -249,7 +249,7 @@ import {
 	type MultiSelectOption,
 	NewModal,
 	type SortDirection,
-	StyledInput,
+	Input,
 	Table,
 	type TableColumn,
 } from '@modrinth/ui'
@@ -319,7 +319,7 @@ const allMetricKinds = metricKindOptions.map((option) => option.value)
 
 const deleteEventModal = ref<InstanceType<typeof ConfirmModal> | null>(null)
 const eventModal = ref<InstanceType<typeof NewModal> | null>(null)
-const titleInput = ref<InstanceType<typeof StyledInput> | null>(null)
+const titleInput = ref<InstanceType<typeof Input> | null>(null)
 const searchQuery = ref('')
 const sortColumn = ref<EventColumnKey | undefined>('date')
 const sortDirection = ref<SortDirection>('desc')
diff --git a/apps/frontend/src/pages/admin/billing/[user].vue b/apps/frontend/src/pages/admin/billing/[user].vue
index 936ac39ca..655919c82 100644
--- a/apps/frontend/src/pages/admin/billing/[user].vue
+++ b/apps/frontend/src/pages/admin/billing/[user].vue
@@ -30,7 +30,7 @@
 						{{ selectedCharge.net }})
 					</span>
 				</label>
-				<StyledInput id="amount" v-model="refundAmount" type="number" autocomplete="off" />
+				<Input id="amount" v-model="refundAmount" type="number" autocomplete="off" />
 			</div>
 			<div class="flex flex-col gap-2">
 				<label for="unprovision" class="flex flex-col gap-1">
@@ -107,7 +107,7 @@
 					<span class="text-lg font-semibold text-contrast">Days to credit</span>
 					<span>Enter the number of days to add to the next due date.</span>
 				</label>
-				<StyledInput id="days" v-model="creditDays" type="number" :min="1" autocomplete="off" />
+				<Input id="days" v-model="creditDays" type="number" :min="1" autocomplete="off" />
 			</div>
 			<div class="flex flex-col gap-2">
 				<label for="sendEmail" class="flex flex-col gap-1">
@@ -233,7 +233,7 @@ import {
 	injectModrinthClient,
 	injectNotificationManager,
 	NewModal,
-	StyledInput,
+	Input,
 	Toggle,
 	useFormatDateTime,
 	useRelativeTime,
diff --git a/apps/frontend/src/pages/admin/docs.vue b/apps/frontend/src/pages/admin/docs.vue
index 557caf30f..44aebf81a 100644
--- a/apps/frontend/src/pages/admin/docs.vue
+++ b/apps/frontend/src/pages/admin/docs.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { CopyIcon, LibraryIcon, PlayIcon, SearchIcon } from '@modrinth/assets'
-import { ButtonStyled, Card, StyledInput } from '@modrinth/ui'
+import { ButtonStyled, Card, Input } from '@modrinth/ui'
 import { computed, onMounted, ref } from 'vue'
 
 import docs from '~/templates/docs'
@@ -51,7 +51,7 @@ onMounted(() => {
 		<div class="normal-page__content">
 			<Card class="mb-6 flex flex-col gap-4">
 				<div class="flex flex-wrap items-center gap-3">
-					<StyledInput
+					<Input
 						id="doc-search"
 						v-model="query"
 						type="search"
diff --git a/apps/frontend/src/pages/admin/emails.vue b/apps/frontend/src/pages/admin/emails.vue
index 71b08af93..490bc82ac 100644
--- a/apps/frontend/src/pages/admin/emails.vue
+++ b/apps/frontend/src/pages/admin/emails.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { CopyIcon, LibraryIcon, PlayIcon, SearchIcon } from '@modrinth/assets'
-import { ButtonStyled, NewModal, StyledInput } from '@modrinth/ui'
+import { ButtonStyled, NewModal, Input } from '@modrinth/ui'
 import { computed, onMounted, ref } from 'vue'
 
 import emails from '~/templates/emails'
@@ -153,7 +153,7 @@ onMounted(() => {
 							class="flex flex-col"
 						>
 							<span class="label__title">{{ variable }}</span>
-							<StyledInput
+							<Input
 								:id="`preview-${variable}`"
 								v-model="variableValues[variable]"
 								type="text"
@@ -191,7 +191,7 @@ onMounted(() => {
 		</NewModal>
 		<div class="normal-page__content">
 			<div class="flex flex-wrap items-center gap-3">
-				<StyledInput
+				<Input
 					id="email-search"
 					v-model="query"
 					type="search"
diff --git a/apps/frontend/src/pages/admin/servers/notices.vue b/apps/frontend/src/pages/admin/servers/notices.vue
index a3e846571..ad4138ec6 100644
--- a/apps/frontend/src/pages/admin/servers/notices.vue
+++ b/apps/frontend/src/pages/admin/servers/notices.vue
@@ -24,7 +24,7 @@
 				<label for="notice-title" class="flex flex-col gap-1">
 					<span class="text-lg font-semibold text-contrast"> Title </span>
 				</label>
-				<StyledInput
+				<Input
 					id="notice-title"
 					v-model="newNoticeTitle"
 					placeholder="E.g. Maintenance"
@@ -38,18 +38,17 @@
 						<span class="text-brand-red">*</span>
 					</span>
 				</label>
-				<StyledInput
+				<Input
 					v-if="newNoticeSurvey"
 					id="notice-message"
 					v-model="newNoticeMessage"
 					placeholder="E.g. rXGtq2"
 					autocomplete="off"
 				/>
-				<StyledInput
+				<Textarea
 					v-else
 					id="notice-message"
 					v-model="newNoticeMessage"
-					multiline
 					wrapper-class="h-32"
 				/>
 			</div>
@@ -65,7 +64,7 @@
 					<span class="text-lg font-semibold text-contrast"> Announcement date </span>
 					<span>Leave blank for notice to be available immediately.</span>
 				</label>
-				<StyledInput
+				<DateInput
 					id="scheduled-date"
 					v-model="newNoticeScheduledDate"
 					type="datetime-local"
@@ -77,7 +76,7 @@
 					<span class="text-lg font-semibold text-contrast"> Expiration date </span>
 					<span>The notice will automatically be deleted after this date.</span>
 				</label>
-				<StyledInput
+				<DateInput
 					id="expiration-date"
 					v-model="newNoticeExpiresDate"
 					type="datetime-local"
@@ -270,9 +269,11 @@ import {
 	defineMessages,
 	injectModrinthClient,
 	injectNotificationManager,
+	DateInput,
 	NewModal,
 	ServerNotice,
-	StyledInput,
+	Input,
+	Textarea,
 	TagItem,
 	Toggle,
 	useFormatDateTime,
diff --git a/apps/frontend/src/pages/admin/user_email.vue b/apps/frontend/src/pages/admin/user_email.vue
index 30169a147..62be81d61 100644
--- a/apps/frontend/src/pages/admin/user_email.vue
+++ b/apps/frontend/src/pages/admin/user_email.vue
@@ -10,7 +10,7 @@
 							<span class="text-brand-red">*</span>
 						</span>
 					</label>
-					<StyledInput
+					<Input
 						id="name"
 						v-model="userEmail"
 						type="email"
@@ -33,7 +33,7 @@
 </template>
 <script setup lang="ts">
 import { MailIcon } from '@modrinth/assets'
-import { ButtonStyled, injectNotificationManager, StyledInput } from '@modrinth/ui'
+import { ButtonStyled, injectNotificationManager, Input } from '@modrinth/ui'
 
 const { addNotification } = injectNotificationManager()
 
diff --git a/apps/frontend/src/pages/auth/reset-password.vue b/apps/frontend/src/pages/auth/reset-password.vue
index 86f6bcab0..b704c8eea 100644
--- a/apps/frontend/src/pages/auth/reset-password.vue
+++ b/apps/frontend/src/pages/auth/reset-password.vue
@@ -20,7 +20,7 @@
 				<label class="text-md font-semibold text-contrast" for="email">
 					{{ formatMessage(commonMessages.emailLabel) }}
 				</label>
-				<StyledInput
+				<Input
 					id="email"
 					v-model="email"
 					:icon="MailIcon"
@@ -61,7 +61,7 @@
 
 			<div class="flex flex-col gap-2.5">
 				<label for="password" hidden>{{ formatMessage(commonMessages.passwordLabel) }}</label>
-				<StyledInput
+				<Input
 					id="password"
 					v-model="newPassword"
 					:icon="KeyIcon"
@@ -74,7 +74,7 @@
 				<label for="confirm-password" hidden>
 					{{ formatMessage(commonMessages.passwordLabel) }}
 				</label>
-				<StyledInput
+				<Input
 					id="confirm-password"
 					v-model="confirmNewPassword"
 					:icon="KeyIcon"
@@ -102,7 +102,7 @@ import {
 	defineMessages,
 	injectModrinthClient,
 	injectNotificationManager,
-	StyledInput,
+	Input,
 	useVIntl,
 } from '@modrinth/ui'
 import { useQuery } from '@tanstack/vue-query'
diff --git a/apps/frontend/src/pages/collection/[collection].vue b/apps/frontend/src/pages/collection/[collection].vue
index db4424666..3d6861aff 100644
--- a/apps/frontend/src/pages/collection/[collection].vue
+++ b/apps/frontend/src/pages/collection/[collection].vue
@@ -80,7 +80,7 @@
 						<label class="mb-2 block text-lg font-semibold text-contrast" for="collection-title">
 							{{ formatMessage(commonMessages.titleLabel) }}
 						</label>
-						<StyledInput
+						<Input
 							id="collection-title"
 							v-model="current.name"
 							:maxlength="255"
@@ -94,10 +94,9 @@
 					>
 						{{ formatMessage(commonMessages.descriptionLabel) }}
 					</label>
-					<StyledInput
+					<Textarea
 						id="collection-description"
 						v-model="current.description"
-						multiline
 						:maxlength="255"
 						wrapper-class="h-24"
 					/>
@@ -422,7 +421,8 @@ import {
 	ProjectCardList,
 	RadioButtons,
 	SidebarCard,
-	StyledInput,
+	Input,
+	Textarea,
 	useCompactNumber,
 	useFormatDateTime,
 	useRelativeTime,
diff --git a/apps/frontend/src/pages/dashboard/affiliate-links.vue b/apps/frontend/src/pages/dashboard/affiliate-links.vue
index a02b7fea4..e066f8ced 100644
--- a/apps/frontend/src/pages/dashboard/affiliate-links.vue
+++ b/apps/frontend/src/pages/dashboard/affiliate-links.vue
@@ -18,7 +18,7 @@
 				{{ formatMessage(messages.yourAffiliateLinks) }}
 			</h1>
 			<div class="flex items-center gap-2">
-				<StyledInput
+				<Input
 					v-model="filterQuery"
 					:icon="SearchIcon"
 					type="text"
@@ -68,7 +68,7 @@ import {
 	defineMessages,
 	injectModrinthClient,
 	injectNotificationManager,
-	StyledInput,
+	Input,
 	useVIntl,
 } from '@modrinth/ui'
 import { useQuery } from '@tanstack/vue-query'
diff --git a/apps/frontend/src/pages/dashboard/collections.vue b/apps/frontend/src/pages/dashboard/collections.vue
index a2bf61191..e763c3268 100644
--- a/apps/frontend/src/pages/dashboard/collections.vue
+++ b/apps/frontend/src/pages/dashboard/collections.vue
@@ -4,7 +4,7 @@
 		<h2 class="text-2xl">{{ formatMessage(commonMessages.collectionsLabel) }}</h2>
 		<div class="mb-3 flex flex-col gap-3">
 			<label for="search-input" hidden>{{ formatMessage(messages.searchInputLabel) }}</label>
-			<StyledInput
+			<Input
 				id="search-input"
 				v-model="filterQuery"
 				:icon="SearchIcon"
@@ -149,7 +149,7 @@ import {
 	defineMessages,
 	DropdownSelect,
 	injectModrinthClient,
-	StyledInput,
+	Input,
 	useCompactNumber,
 	useVIntl,
 } from '@modrinth/ui'
diff --git a/apps/frontend/src/pages/dashboard/projects.vue b/apps/frontend/src/pages/dashboard/projects.vue
index 3d57d8402..34322a73a 100644
--- a/apps/frontend/src/pages/dashboard/projects.vue
+++ b/apps/frontend/src/pages/dashboard/projects.vue
@@ -8,7 +8,7 @@
 						<span class="label__title">{{ formatMessage(messages.issueTrackerLabel) }}</span>
 					</label>
 					<div class="flex gap-2">
-						<StyledInput
+						<Input
 							id="issue-tracker-input"
 							v-model="editLinks.issues.val"
 							:disabled="editLinks.issues.clear"
@@ -33,7 +33,7 @@
 						<span class="label__title">{{ formatMessage(messages.sourceCodeLabel) }}</span>
 					</label>
 					<div class="flex gap-2">
-						<StyledInput
+						<Input
 							id="source-code-input"
 							v-model="editLinks.source.val"
 							:disabled="editLinks.source.clear"
@@ -58,7 +58,7 @@
 						<span class="label__title">{{ formatMessage(messages.wikiPageLabel) }}</span>
 					</label>
 					<div class="flex gap-2">
-						<StyledInput
+						<Input
 							id="wiki-page-input"
 							v-model="editLinks.wiki.val"
 							:disabled="editLinks.wiki.clear"
@@ -86,7 +86,7 @@
 						<span class="label__title">{{ formatMessage(messages.discordInviteLabel) }}</span>
 					</label>
 					<div class="flex gap-2">
-						<StyledInput
+						<Input
 							id="discord-invite-input"
 							v-model="editLinks.discord.val"
 							:disabled="editLinks.discord.clear"
@@ -367,7 +367,7 @@ import {
 	IntlFormatted,
 	NewModal,
 	ProjectStatusBadge,
-	StyledInput,
+	Input,
 	Table,
 	useVIntl,
 } from '@modrinth/ui'
diff --git a/apps/frontend/src/pages/index.vue b/apps/frontend/src/pages/index.vue
index 406db8351..f0aded61d 100644
--- a/apps/frontend/src/pages/index.vue
+++ b/apps/frontend/src/pages/index.vue
@@ -94,7 +94,7 @@
 								<label class="hidden" for="search">{{
 									formatMessage(commonMessages.searchLabel)
 								}}</label>
-								<StyledInput
+								<Input
 									id="search"
 									v-model="searchQuery"
 									:icon="SearchIcon"
@@ -451,7 +451,7 @@ import {
 	injectModrinthClient,
 	IntlFormatted,
 	ProjectCard,
-	StyledInput,
+	Input,
 	useRelativeTime,
 	useVIntl,
 } from '@modrinth/ui'
diff --git a/apps/frontend/src/pages/moderation/external-projects.vue b/apps/frontend/src/pages/moderation/external-projects.vue
index fde7ff7ef..e10bce7c0 100644
--- a/apps/frontend/src/pages/moderation/external-projects.vue
+++ b/apps/frontend/src/pages/moderation/external-projects.vue
@@ -2,13 +2,13 @@
 	<NewModal ref="editModal" header="Edit external project">
 		<form class="flex flex-col gap-2" @submit.prevent="saveExternalProjectEdit">
 			<label class="font-semibold text-contrast" for="edit-form-title">Title</label>
-			<StyledInput id="edit-form-title" v-model="editForm.title" type="text" />
+			<Input id="edit-form-title" v-model="editForm.title" type="text" />
 			<label class="mt-2 font-semibold text-contrast" for="edit-form-link">Link</label>
-			<StyledInput id="edit-form-link" v-model="editForm.link" type="text" />
+			<Input id="edit-form-link" v-model="editForm.link" type="text" />
 			<label class="mt-2 font-semibold text-contrast" for="edit-form-cf-id">
 				CurseForge project ID
 			</label>
-			<StyledInput id="edit-form-cf-id" v-model="editForm.flameProjectId" type="text" />
+			<Input id="edit-form-cf-id" v-model="editForm.flameProjectId" type="text" />
 			<label class="mt-2 font-semibold text-contrast" for="edit-form-status">Allowed?</label>
 			<Combobox
 				id="edit-form-status"
@@ -17,22 +17,18 @@
 				class="!w-full"
 			/>
 			<label class="mt-2 font-semibold text-contrast" for="edit-form-proof">Proof</label>
-			<StyledInput
+			<Textarea
 				id="edit-form-proof"
 				v-model="editForm.proof"
-				type="text"
-				multiline
 				resize="both"
 				class="w-[30rem]"
 			/>
 			<label class="mt-2 font-semibold text-contrast" for="edit-form-exceptions">
 				Exceptions / notes
 			</label>
-			<StyledInput
+			<Textarea
 				id="edit-form-exceptions"
 				v-model="editForm.exceptions"
-				type="text"
-				multiline
 				resize="both"
 				class="w-[30rem]"
 			/>
@@ -50,7 +46,7 @@
 	</NewModal>
 	<div>
 		<form class="flex gap-2" @submit.prevent="executeSearch">
-			<StyledInput
+			<Input
 				v-model="query"
 				:icon="SearchIcon"
 				type="text"
@@ -140,7 +136,8 @@ import {
 	ExternalProjectLookupCard,
 	injectModrinthClient,
 	NewModal,
-	StyledInput,
+	Input,
+	Textarea,
 	useVIntl,
 } from '@modrinth/ui'
 
diff --git a/apps/frontend/src/pages/moderation/index.vue b/apps/frontend/src/pages/moderation/index.vue
index f89d6d2c8..a1ecc6766 100644
--- a/apps/frontend/src/pages/moderation/index.vue
+++ b/apps/frontend/src/pages/moderation/index.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="flex flex-col gap-4">
 		<div class="flex flex-col justify-between gap-3 lg:flex-row">
-			<StyledInput
+			<Input
 				v-model="query"
 				:icon="SearchIcon"
 				type="text"
@@ -149,7 +149,7 @@ import {
 	injectModrinthClient,
 	injectNotificationManager,
 	Pagination,
-	StyledInput,
+	Input,
 	Toggle,
 	useVIntl,
 } from '@modrinth/ui'
diff --git a/apps/frontend/src/pages/moderation/reports/index.vue b/apps/frontend/src/pages/moderation/reports/index.vue
index 69b82307d..797cd24ca 100644
--- a/apps/frontend/src/pages/moderation/reports/index.vue
+++ b/apps/frontend/src/pages/moderation/reports/index.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="flex flex-col gap-4">
 		<div class="flex flex-col justify-between gap-3 lg:flex-row">
-			<StyledInput
+			<Input
 				v-model="query"
 				:icon="SearchIcon"
 				type="text"
@@ -213,7 +213,7 @@ import {
 	MultiSelect,
 	type MultiSelectItem,
 	Pagination,
-	StyledInput,
+	Input,
 	useVIntl,
 } from '@modrinth/ui'
 import Fuse from 'fuse.js'
diff --git a/apps/frontend/src/pages/moderation/technical-review/index.vue b/apps/frontend/src/pages/moderation/technical-review/index.vue
index d66a0a4b2..f8cddc699 100644
--- a/apps/frontend/src/pages/moderation/technical-review/index.vue
+++ b/apps/frontend/src/pages/moderation/technical-review/index.vue
@@ -15,7 +15,7 @@ import {
 	FloatingPanel,
 	injectModrinthClient,
 	Pagination,
-	StyledInput,
+	Input,
 	Toggle,
 	useVIntl,
 } from '@modrinth/ui'
@@ -582,7 +582,7 @@ watch(totalPages, (pages) => {
 		/> -->
 
 		<div class="flex flex-col justify-between gap-2 lg:flex-row">
-			<StyledInput
+			<Input
 				v-model="query"
 				:icon="SearchIcon"
 				type="text"
diff --git a/apps/frontend/src/pages/organization/[organization]/settings/index.vue b/apps/frontend/src/pages/organization/[organization]/settings/index.vue
index a4169823e..3ecd486a2 100644
--- a/apps/frontend/src/pages/organization/[organization]/settings/index.vue
+++ b/apps/frontend/src/pages/organization/[organization]/settings/index.vue
@@ -6,7 +6,8 @@ import {
 	ConfirmModal,
 	FileInput,
 	injectNotificationManager,
-	StyledInput,
+	Input,
+	Textarea,
 	UnsavedChangesPopup,
 	useSavable,
 } from '@modrinth/ui'
@@ -188,7 +189,7 @@ const onDeleteOrganization = useClientTry(async () => {
 			<label for="project-name">
 				<span class="label__title">Name</span>
 			</label>
-			<StyledInput
+			<Input
 				id="project-name"
 				v-model="current.name"
 				:maxlength="2048"
@@ -200,7 +201,7 @@ const onDeleteOrganization = useClientTry(async () => {
 			</label>
 			<div class="text-input-wrapper">
 				<div class="text-input-wrapper__before">https://modrinth.com/organization/</div>
-				<StyledInput
+				<Input
 					id="project-slug"
 					v-model="current.slug"
 					:maxlength="64"
@@ -212,10 +213,9 @@ const onDeleteOrganization = useClientTry(async () => {
 			<label for="project-summary">
 				<span class="label__title">Summary</span>
 			</label>
-			<StyledInput
+			<Textarea
 				id="project-summary"
 				v-model="current.summary"
-				multiline
 				:maxlength="256"
 				:disabled="!hasPermission"
 				resize="vertical"
diff --git a/apps/frontend/src/pages/organization/[organization]/settings/members.vue b/apps/frontend/src/pages/organization/[organization]/settings/members.vue
index 59efe57a5..c6104d136 100644
--- a/apps/frontend/src/pages/organization/[organization]/settings/members.vue
+++ b/apps/frontend/src/pages/organization/[organization]/settings/members.vue
@@ -30,7 +30,7 @@
 				</span>
 			</span>
 			<div class="input-group">
-				<StyledInput
+				<Input
 					id="username"
 					v-model="currentUsername"
 					placeholder="Username"
@@ -118,7 +118,7 @@
 							The title of the role that this member plays for this organization.
 						</span>
 					</label>
-					<StyledInput
+					<Input
 						:id="`member-${member.user.id}-role`"
 						v-model="member.role"
 						:disabled="
@@ -137,7 +137,7 @@
 							the organization projects' revenue goes to this member.
 						</span>
 					</label>
-					<StyledInput
+					<Input
 						:id="`member-${member.user.id}-monetization-weight`"
 						v-model="member.payouts_split"
 						type="number"
@@ -249,7 +249,7 @@ import {
 	ButtonStyled,
 	Checkbox,
 	injectNotificationManager,
-	StyledInput,
+	Input,
 } from '@modrinth/ui'
 import { nextTick, ref } from 'vue'
 
diff --git a/apps/frontend/src/pages/organization/[organization]/settings/projects.vue b/apps/frontend/src/pages/organization/[organization]/settings/projects.vue
index d625181b1..5513005fa 100644
--- a/apps/frontend/src/pages/organization/[organization]/settings/projects.vue
+++ b/apps/frontend/src/pages/organization/[organization]/settings/projects.vue
@@ -8,7 +8,7 @@
 						<span class="label__title">{{ formatMessage(messages.issueTrackerLabel) }}</span>
 					</label>
 					<div class="flex gap-2">
-						<StyledInput
+						<Input
 							id="issue-tracker-input"
 							v-model="editLinks.issues.val"
 							:disabled="editLinks.issues.clear"
@@ -33,7 +33,7 @@
 						<span class="label__title">{{ formatMessage(messages.sourceCodeLabel) }}</span>
 					</label>
 					<div class="flex gap-2">
-						<StyledInput
+						<Input
 							id="source-code-input"
 							v-model="editLinks.source.val"
 							:disabled="editLinks.source.clear"
@@ -58,7 +58,7 @@
 						<span class="label__title">{{ formatMessage(messages.wikiPageLabel) }}</span>
 					</label>
 					<div class="flex gap-2">
-						<StyledInput
+						<Input
 							id="wiki-page-input"
 							v-model="editLinks.wiki.val"
 							:disabled="editLinks.wiki.clear"
@@ -86,7 +86,7 @@
 						<span class="label__title">{{ formatMessage(messages.discordInviteLabel) }}</span>
 					</label>
 					<div class="flex gap-2">
-						<StyledInput
+						<Input
 							id="discord-invite-input"
 							v-model="editLinks.discord.val"
 							:disabled="editLinks.discord.clear"
@@ -368,7 +368,7 @@ import {
 	IntlFormatted,
 	NewModal,
 	ProjectStatusBadge,
-	StyledInput,
+	Input,
 	Table,
 	useVIntl,
 } from '@modrinth/ui'
diff --git a/apps/frontend/src/pages/report.vue b/apps/frontend/src/pages/report.vue
index 4457940c7..7dd19c7e6 100644
--- a/apps/frontend/src/pages/report.vue
+++ b/apps/frontend/src/pages/report.vue
@@ -136,7 +136,7 @@
 								}}
 							</span>
 							<div class="flex gap-4">
-								<StyledInput
+								<Input
 									id="report-item-id"
 									v-model="reportItemID"
 									placeholder="ex: Dc7EYhxG"
@@ -298,7 +298,7 @@ import {
 	type MessageDescriptor,
 	RadialHeader,
 	RadioButtons,
-	StyledInput,
+	Input,
 	useVIntl,
 } from '@modrinth/ui'
 import type { Project, Report, User, Version } from '@modrinth/utils'
diff --git a/apps/frontend/src/pages/settings/account.vue b/apps/frontend/src/pages/settings/account.vue
index ce57a3361..5bebe2b7e 100644
--- a/apps/frontend/src/pages/settings/account.vue
+++ b/apps/frontend/src/pages/settings/account.vue
@@ -24,7 +24,7 @@
 							formatMessage(messages.emailAddressLabel)
 						}}</span>
 					</label>
-					<StyledInput
+					<Input
 						id="email-input"
 						v-model="email"
 						:maxlength="2048"
@@ -72,7 +72,7 @@
 							formatMessage(messages.oldPasswordLabel)
 						}}</span>
 					</label>
-					<StyledInput
+					<Input
 						id="old-password"
 						v-model="oldPassword"
 						:maxlength="2048"
@@ -96,7 +96,7 @@
 								formatMessage(messages.newPasswordLabel)
 							}}</span></label
 						>
-						<StyledInput
+						<Input
 							id="new-password"
 							v-model="newPassword"
 							:maxlength="2048"
@@ -112,7 +112,7 @@
 								formatMessage(messages.confirmNewPasswordLabel)
 							}}</span>
 						</label>
-						<StyledInput
+						<Input
 							id="confirm-new-password"
 							v-model="confirmNewPassword"
 							:maxlength="2048"
@@ -191,7 +191,7 @@
 							formatMessage(messages.twoFactorEnterCodeDescription)
 						}}</span>
 					</label>
-					<StyledInput
+					<Input
 						id="two-factor-code"
 						v-model="twoFactorCode"
 						:maxlength="11"
@@ -260,7 +260,7 @@
 								formatMessage(messages.twoFactorVerifyCodeDescription)
 							}}</span>
 						</label>
-						<StyledInput
+						<Input
 							id="verify-code"
 							v-model="twoFactorCode"
 							:maxlength="6"
@@ -501,7 +501,7 @@ import {
 	injectNotificationManager,
 	IntlFormatted,
 	NewModal,
-	StyledInput,
+	Input,
 	Table,
 	useVIntl,
 } from '@modrinth/ui'
diff --git a/apps/frontend/src/pages/settings/applications.vue b/apps/frontend/src/pages/settings/applications.vue
index cf85773eb..6c4f01c23 100644
--- a/apps/frontend/src/pages/settings/applications.vue
+++ b/apps/frontend/src/pages/settings/applications.vue
@@ -12,7 +12,7 @@
 				<label for="app-name" class="m-0 mb-2 text-lg font-semibold text-contrast">
 					{{ formatMessage(messages.nameLabel) }}
 				</label>
-				<StyledInput
+				<Input
 					id="app-name"
 					v-model="name"
 					:maxlength="2048"
@@ -43,7 +43,7 @@
 				<label v-if="editingId" for="app-url" class="mb-2 mt-4 text-lg font-semibold text-contrast">
 					{{ formatMessage(messages.urlLabel) }}
 				</label>
-				<StyledInput
+				<Input
 					v-if="editingId"
 					id="app-url"
 					v-model="url"
@@ -59,11 +59,10 @@
 				>
 					{{ formatMessage(messages.descriptionLabel) }}
 				</label>
-				<StyledInput
+				<Textarea
 					v-if="editingId"
 					id="app-description"
 					v-model="description"
-					multiline
 					:maxlength="255"
 					autocomplete="off"
 					:placeholder="formatMessage(messages.descriptionPlaceholder)"
@@ -94,7 +93,7 @@
 				<div class="uri-input-list">
 					<div v-for="(_, index) in redirectUris" :key="index">
 						<div class="input-group url-input-group-fixes">
-							<StyledInput
+							<Input
 								v-model="redirectUris[index]"
 								:maxlength="2048"
 								type="url"
@@ -265,7 +264,8 @@ import {
 	IntlFormatted,
 	NewModal,
 	normalizeChildren,
-	StyledInput,
+	Input,
+	Textarea,
 	useFormatDateTime,
 	useVIntl,
 } from '@modrinth/ui'
diff --git a/apps/frontend/src/pages/settings/flags.vue b/apps/frontend/src/pages/settings/flags.vue
index 796f6f6a6..ab08da4bb 100644
--- a/apps/frontend/src/pages/settings/flags.vue
+++ b/apps/frontend/src/pages/settings/flags.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { SearchIcon } from '@modrinth/assets'
-import { ButtonStyled, StyledInput, Toggle } from '@modrinth/ui'
+import { ButtonStyled, Input, Toggle } from '@modrinth/ui'
 import Fuse from 'fuse.js'
 import { computed, ref, shallowReactive } from 'vue'
 
@@ -42,7 +42,7 @@ useSeoMeta({
 
 <template>
 	<div class="mb-2">
-		<StyledInput
+		<Input
 			v-model="searchQuery"
 			type="search"
 			:icon="SearchIcon"
diff --git a/apps/frontend/src/pages/settings/pats.vue b/apps/frontend/src/pages/settings/pats.vue
index 1fa084991..0fa66ff4b 100644
--- a/apps/frontend/src/pages/settings/pats.vue
+++ b/apps/frontend/src/pages/settings/pats.vue
@@ -21,7 +21,7 @@
 					<label for="pat-name">
 						<span class="font-semibold">{{ formatMessage(createModalMessages.nameLabel) }}</span>
 					</label>
-					<StyledInput
+					<Input
 						id="pat-name"
 						v-model="name"
 						:maxlength="2048"
@@ -218,7 +218,7 @@ import {
 	injectNotificationManager,
 	IntlFormatted,
 	NewModal,
-	StyledInput,
+	Input,
 	useFormatDateTime,
 	useRelativeTime,
 	useVIntl,
diff --git a/packages/ui/src/components/affiliate/AffiliateLinkCreateModal.vue b/packages/ui/src/components/affiliate/AffiliateLinkCreateModal.vue
index 22bda76c7..a9a84fe80 100644
--- a/packages/ui/src/components/affiliate/AffiliateLinkCreateModal.vue
+++ b/packages/ui/src/components/affiliate/AffiliateLinkCreateModal.vue
@@ -7,7 +7,7 @@
 				</span>
 				<span class="text-secondary mb-2">{{ formatMessage(messages.createUserDescription) }}</span>
 			</label>
-			<StyledInput
+			<Input
 				v-if="showUserField"
 				id="create-affiliate-user-input"
 				v-model="affiliateUsername"
@@ -28,7 +28,7 @@
 			</label>
 			<div class="flex items-center gap-2">
 				<div class="relative inline-flex items-center flex-1">
-					<StyledInput
+					<Input
 						id="create-affiliate-title-input"
 						v-model="affiliateLinkTitle"
 						autocomplete="off"
@@ -42,7 +42,7 @@
 								<AffiliateIcon />
 							</AutoBrandIcon>
 						</template>
-					</StyledInput>
+					</Input>
 				</div>
 				<ButtonStyled color="brand">
 					<button :disabled="creatingLink || !canCreate" @click="createAffiliateLink">
@@ -62,7 +62,7 @@ import { computed, ref, useTemplateRef } from 'vue'
 
 import { defineMessages, useVIntl } from '../../composables/i18n'
 import { commonMessages } from '../../utils/common-messages'
-import { AutoBrandIcon, ButtonStyled, NewModal, StyledInput } from '../index'
+import { AutoBrandIcon, ButtonStyled, NewModal, Input } from '../index'
 export type CreateAffiliateProps = { sourceName: string; username?: string }
 
 const props = withDefaults(
diff --git a/packages/ui/src/components/base/BaseTerminal.vue b/packages/ui/src/components/base/BaseTerminal.vue
index 54a765086..92d8be2a5 100644
--- a/packages/ui/src/components/base/BaseTerminal.vue
+++ b/packages/ui/src/components/base/BaseTerminal.vue
@@ -24,7 +24,7 @@
 			ref="inputRef"
 			class="border-t border-solid border-b-0 border-x-0 border-surface-4 bg-surface-3 p-4"
 		>
-			<StyledInput
+			<Input
 				v-model="commandInput"
 				v-tooltip="disableInput ? disableInputTooltip : undefined"
 				:icon="TerminalSquareIcon"
@@ -44,7 +44,7 @@ import type { Terminal } from '@xterm/xterm'
 import { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 
 import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
-import StyledInput from '#ui/components/base/inputs/StyledInput.vue'
+import Input from '#ui/components/base/inputs/Input.vue'
 import { useTerminal } from '#ui/composables/terminal'
 
 const props = withDefaults(
diff --git a/packages/ui/src/components/base/Combobox.vue b/packages/ui/src/components/base/Combobox.vue
index 0915d9adc..c3d906a6c 100644
--- a/packages/ui/src/components/base/Combobox.vue
+++ b/packages/ui/src/components/base/Combobox.vue
@@ -12,7 +12,7 @@
 				<span class="min-w-0 truncate">{{ searchQuery }}</span>
 				<slot name="search-selection-affix" :option="selectedOption" />
 			</div>
-			<StyledInput
+			<Input
 				ref="searchTriggerRef"
 				v-model="searchQuery"
 				:icon="showSearchIcon ? SearchIcon : undefined"
@@ -41,7 +41,7 @@
 						:class="isOpen ? (openDirection === 'down' ? 'rotate-90' : '-rotate-90') : '-rotate-90'"
 					/>
 				</template>
-			</StyledInput>
+			</Input>
 		</div>
 
 		<!-- Standard mode: button trigger -->
@@ -213,7 +213,7 @@ import {
 	watch,
 } from 'vue'
 
-import StyledInput from './inputs/StyledInput.vue'
+import Input from './inputs/Input.vue'
 
 export interface ComboboxOption<T> {
 	value: T
@@ -340,7 +340,7 @@ const userHasTyped = ref(false)
 const focusedIndex = ref(-1)
 const containerRef = ref<HTMLElement>()
 const triggerRef = ref<HTMLElement>()
-const searchTriggerRef = ref<InstanceType<typeof StyledInput>>()
+const searchTriggerRef = ref<InstanceType<typeof Input>>()
 const dropdownRef = ref<HTMLElement>()
 const optionsScrollbarRef = ref<HTMLElement>()
 const optionsContainerRef = ref<HTMLElement>()
diff --git a/packages/ui/src/components/base/DropdownFilterBar.vue b/packages/ui/src/components/base/DropdownFilterBar.vue
index 5cc2cfe05..90b2f8bb5 100644
--- a/packages/ui/src/components/base/DropdownFilterBar.vue
+++ b/packages/ui/src/components/base/DropdownFilterBar.vue
@@ -192,7 +192,7 @@
 				v-if="activeCategory.searchable"
 				class="flex justify-between border-0 border-b border-solid border-b-surface-5 py-1.5 w-full"
 			>
-				<StyledInput
+				<Input
 					v-model="categorySearchQuery"
 					:icon="SearchIcon"
 					type="text"
@@ -387,7 +387,7 @@ import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue'
 import { useVirtualScroll } from '../../composables/virtual-scroll'
 import ButtonStyled from './ButtonStyled.vue'
 import MultiSelect, { type MultiSelectItem } from './MultiSelect.vue'
-import StyledInput from './inputs/StyledInput.vue'
+import Input from './inputs/Input.vue'
 
 export type DropdownFilterBarOption = {
 	value: string
diff --git a/packages/ui/src/components/base/I18nDebugPanel.vue b/packages/ui/src/components/base/I18nDebugPanel.vue
index 86f83784c..1b86e0108 100644
--- a/packages/ui/src/components/base/I18nDebugPanel.vue
+++ b/packages/ui/src/components/base/I18nDebugPanel.vue
@@ -12,7 +12,7 @@ import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue'
 
 import { injectI18nDebug } from '../../composables/i18n-debug'
 import ButtonStyled from './ButtonStyled.vue'
-import StyledInput from './inputs/StyledInput.vue'
+import Input from './inputs/Input.vue'
 
 const debugContext = injectI18nDebug()
 
@@ -341,7 +341,7 @@ const listMaxHeight = computed(() => `${panelHeight.value - 120}px`)
 					<div v-if="!minimized" class="flex flex-col overflow-hidden w-full">
 						<!-- Search -->
 						<div class="px-3 py-2.5 !w-full">
-							<StyledInput
+							<Input
 								ref="searchInputRef"
 								v-model="searchQuery"
 								placeholder="Search keys or values..."
diff --git a/packages/ui/src/components/base/ManySelect.vue b/packages/ui/src/components/base/ManySelect.vue
index ed495af30..20f6052ed 100644
--- a/packages/ui/src/components/base/ManySelect.vue
+++ b/packages/ui/src/components/base/ManySelect.vue
@@ -18,7 +18,7 @@
 			<slot />
 			<DropdownIcon class="h-5 w-5 text-secondary" />
 			<template #menu>
-				<StyledInput
+				<Input
 					v-if="search"
 					id="search-input"
 					ref="searchInput"
@@ -74,7 +74,7 @@
 import { CheckIcon, DropdownIcon, SearchIcon } from '@modrinth/assets'
 import { computed, ref } from 'vue'
 
-import { Button, ButtonStyled, PopoutMenu, StyledInput } from '../index'
+import { Button, ButtonStyled, PopoutMenu, Input } from '../index'
 import ScrollablePanel from './ScrollablePanel.vue'
 
 type Option = string | number | object
diff --git a/packages/ui/src/components/base/MarkdownEditor.vue b/packages/ui/src/components/base/MarkdownEditor.vue
index 6fff656b1..d35fb3aad 100644
--- a/packages/ui/src/components/base/MarkdownEditor.vue
+++ b/packages/ui/src/components/base/MarkdownEditor.vue
@@ -4,7 +4,7 @@
 			<label class="label" for="insert-link-label">
 				<span class="label__title">{{ formatMessage(messages.linkModalLabelFieldTitle) }}</span>
 			</label>
-			<StyledInput
+			<Input
 				id="insert-link-label"
 				v-model="linkText"
 				:icon="AlignLeftIcon"
@@ -18,7 +18,7 @@
 					{{ formatMessage(messages.urlLabel) }}<span class="required">*</span>
 				</span>
 			</label>
-			<StyledInput
+			<Input
 				id="insert-link-url"
 				v-model="linkUrl"
 				:icon="LinkIcon"
@@ -78,7 +78,7 @@
 					{{ formatMessage(messages.imageModalDescriptionFieldDescription) }}
 				</span>
 			</label>
-			<StyledInput
+			<Input
 				id="insert-image-alt"
 				v-model="linkText"
 				:icon="AlignLeftIcon"
@@ -115,7 +115,7 @@
 					<UploadIcon />
 				</FileInput>
 			</div>
-			<StyledInput
+			<Input
 				v-if="!props.onImageUpload || imageUploadOption === 'link'"
 				id="insert-link-url"
 				v-model="linkUrl"
@@ -175,7 +175,7 @@
 					{{ formatMessage(messages.videoModalUrlFieldDescription) }}
 				</span>
 			</label>
-			<StyledInput
+			<Input
 				id="insert-video-url"
 				v-model="linkUrl"
 				:icon="YouTubeIcon"
@@ -340,7 +340,7 @@ import ButtonStyled from './ButtonStyled.vue'
 import Chips from './Chips.vue'
 import FileInput from './FileInput.vue'
 import IntlFormatted from './IntlFormatted.vue'
-import StyledInput from './inputs/StyledInput.vue'
+import Input from './inputs/Input.vue'
 import Toggle from './Toggle.vue'
 
 const { formatMessage } = useVIntl()
diff --git a/packages/ui/src/components/base/MultiSelect.vue b/packages/ui/src/components/base/MultiSelect.vue
index 7fe8e5bf9..89c64e340 100644
--- a/packages/ui/src/components/base/MultiSelect.vue
+++ b/packages/ui/src/components/base/MultiSelect.vue
@@ -127,7 +127,7 @@
 							v-if="searchable"
 							class="px-0 py-1.5 border-0 border-solid border-b border-b-surface-5 flex"
 						>
-							<StyledInput
+							<Input
 								ref="searchInputRef"
 								v-model="searchQuery"
 								:icon="SearchIcon"
@@ -414,7 +414,7 @@ import {
 } from 'vue'
 
 import { useVirtualScroll } from '../../composables/virtual-scroll'
-import StyledInput from './inputs/StyledInput.vue'
+import Input from './inputs/Input.vue'
 
 export interface MultiSelectOption<T> {
 	value: T
@@ -546,7 +546,7 @@ const dropdownRef = ref<HTMLElement>()
 const optionsScrollbarRef = ref<HTMLElement>()
 const optionsContainerRef = ref<HTMLElement>()
 const selectionActionsRef = ref<HTMLElement>()
-const searchInputRef = ref<InstanceType<typeof StyledInput>>()
+const searchInputRef = ref<InstanceType<typeof Input>>()
 const rafId = ref<number | null>(null)
 const tagsContainerRef = ref<HTMLElement>()
 const optionsOverlayScrollbars = ref<OverlayScrollbarsInstance | null>(null)
diff --git a/packages/ui/src/components/base/Slider.vue b/packages/ui/src/components/base/Slider.vue
index a73376c56..a7e6f3527 100644
--- a/packages/ui/src/components/base/Slider.vue
+++ b/packages/ui/src/components/base/Slider.vue
@@ -44,7 +44,7 @@
 				<span> {{ max }} {{ unit }} </span>
 			</div>
 		</div>
-		<StyledInput
+		<Input
 			:model-value="String(currentValue)"
 			type="number"
 			class="w-24 ml-3"
@@ -60,7 +60,7 @@
 <script setup lang="ts">
 import { ref, watch } from 'vue'
 
-import StyledInput from './inputs/StyledInput.vue'
+import Input from './inputs/Input.vue'
 
 const emit = defineEmits<{ 'update:modelValue': [number] }>()
 
diff --git a/packages/ui/src/components/base/index.ts b/packages/ui/src/components/base/index.ts
index c841b9802..de3331922 100644
--- a/packages/ui/src/components/base/index.ts
+++ b/packages/ui/src/components/base/index.ts
@@ -102,9 +102,9 @@ export {
 	DatePicker,
 	InputClearButton,
 	InputFrame,
-	NativeDateInput,
-	StyledInput,
-	StyledTextarea,
+	DateInput,
+	Input,
+	Textarea,
 } from './inputs'
 export type { InputAppearance, InputSize } from './inputs'
 export type { SortDirection, TableColumn } from './Table.vue'
diff --git a/packages/ui/src/components/base/inputs/NativeDateInput.vue b/packages/ui/src/components/base/inputs/DateInput.vue
similarity index 100%
rename from packages/ui/src/components/base/inputs/NativeDateInput.vue
rename to packages/ui/src/components/base/inputs/DateInput.vue
diff --git a/packages/ui/src/components/base/inputs/StyledInput.vue b/packages/ui/src/components/base/inputs/Input.vue
similarity index 100%
rename from packages/ui/src/components/base/inputs/StyledInput.vue
rename to packages/ui/src/components/base/inputs/Input.vue
diff --git a/packages/ui/src/components/base/inputs/StyledTextarea.vue b/packages/ui/src/components/base/inputs/Textarea.vue
similarity index 100%
rename from packages/ui/src/components/base/inputs/StyledTextarea.vue
rename to packages/ui/src/components/base/inputs/Textarea.vue
diff --git a/packages/ui/src/components/base/inputs/index.ts b/packages/ui/src/components/base/inputs/index.ts
index 3d504c56f..29970eedf 100644
--- a/packages/ui/src/components/base/inputs/index.ts
+++ b/packages/ui/src/components/base/inputs/index.ts
@@ -1,7 +1,7 @@
 export { default as DatePicker } from './DatePicker.vue'
 export { default as InputClearButton } from './InputClearButton.vue'
 export { default as InputFrame } from './InputFrame.vue'
-export { default as NativeDateInput } from './NativeDateInput.vue'
-export { default as StyledInput } from './StyledInput.vue'
-export { default as StyledTextarea } from './StyledTextarea.vue'
+export { default as DateInput } from './DateInput.vue'
+export { default as Input } from './Input.vue'
+export { default as Textarea } from './Textarea.vue'
 export type { InputAppearance, InputSize } from './types'
diff --git a/packages/ui/src/components/billing/PurchaseModal.vue b/packages/ui/src/components/billing/PurchaseModal.vue
index 3e0230fb5..e273f9767 100644
--- a/packages/ui/src/components/billing/PurchaseModal.vue
+++ b/packages/ui/src/components/billing/PurchaseModal.vue
@@ -60,7 +60,7 @@
 			<div v-if="!existingSubscription">
 				<p class="my-2 text-lg font-bold">Configure your server</p>
 				<div class="flex flex-col gap-4">
-					<StyledInput v-model="serverName" placeholder="Server name" :maxlength="48" />
+					<Input v-model="serverName" placeholder="Server name" :maxlength="48" />
 					<!-- <DropdownSelect
             v-model="serverLoader"
             v-tooltip="'Select the mod loader for your server'"
@@ -136,7 +136,7 @@
 					>
 						<div class="flex flex-col w-full gap-2">
 							<div class="font-semibold">Shared CPUs</div>
-							<StyledInput :model-value="sharedCpus" disabled wrapper-class="w-full" />
+							<Input :model-value="sharedCpus" disabled wrapper-class="w-full" />
 						</div>
 						<div class="flex flex-col w-full gap-2">
 							<div class="font-semibold flex items-center gap-1">
@@ -148,7 +148,7 @@
 									class="h-4 w-4text-secondary opacity-60"
 								/>
 							</div>
-							<StyledInput
+							<Input
 								:model-value="mutatedProduct.metadata.cpu"
 								disabled
 								wrapper-class="w-full"
@@ -156,7 +156,7 @@
 						</div>
 						<div class="flex flex-col w-full gap-2">
 							<div class="font-semibold">Storage</div>
-							<StyledInput
+							<Input
 								v-model="customServerConfig.storageGbFormatted"
 								disabled
 								wrapper-class="w-full"
@@ -477,7 +477,7 @@ import Admonition from '../base/Admonition.vue'
 import Checkbox from '../base/Checkbox.vue'
 import Combobox from '../base/Combobox.vue'
 import Slider from '../base/Slider.vue'
-import StyledInput from '../base/inputs/StyledInput.vue'
+import Input from '../base/inputs/Input.vue'
 import AnimatedLogo from '../brand/AnimatedLogo.vue'
 import NewModal from '../modal/NewModal.vue'
 import LoaderIcon from '../servers/icons/LoaderIcon.vue'
diff --git a/packages/ui/src/components/content/CollectionWidget.vue b/packages/ui/src/components/content/CollectionWidget.vue
index 1d9a62a31..a4c51e44c 100644
--- a/packages/ui/src/components/content/CollectionWidget.vue
+++ b/packages/ui/src/components/content/CollectionWidget.vue
@@ -10,7 +10,7 @@ import { defineMessages, useVIntl } from '../../composables/i18n'
 import { injectModrinthClient } from '../../providers/api-client'
 import AutoLink from '../base/AutoLink.vue'
 import Avatar from '../base/Avatar.vue'
-import StyledInput from '../base/inputs/StyledInput.vue'
+import Input from '../base/inputs/Input.vue'
 
 const { formatMessage } = useVIntl()
 const { formatCompactNumber } = useCompactNumber()
@@ -105,7 +105,7 @@ const messages = defineMessages({
 		<div
 			class="flex flex-col bg-surface-2 border-0 border-l border-solid border-surface-4 overflow-hidden"
 		>
-			<StyledInput
+			<Input
 				v-if="(projects?.length ?? 0) > 5"
 				v-model="query"
 				:placeholder="formatMessage(messages.searchPlaceholder)"
diff --git a/packages/ui/src/components/external_files/AddFilesToAttributionGroupModal.vue b/packages/ui/src/components/external_files/AddFilesToAttributionGroupModal.vue
index e1340b4bc..894cbc2ab 100644
--- a/packages/ui/src/components/external_files/AddFilesToAttributionGroupModal.vue
+++ b/packages/ui/src/components/external_files/AddFilesToAttributionGroupModal.vue
@@ -3,7 +3,7 @@ import type { Labrinth } from '@modrinth/api-client'
 import { CheckIcon, PlusIcon, SearchIcon, SpinnerIcon, XIcon } from '@modrinth/assets'
 import { computed, nextTick, ref } from 'vue'
 
-import { ButtonStyled, NewModal, StyledInput } from '#ui/components'
+import { ButtonStyled, NewModal, Input } from '#ui/components'
 import { commonMessages } from '#ui/utils'
 
 import { defineMessages, useVIntl } from '../../composables/i18n'
@@ -189,7 +189,7 @@ defineExpose({ show, hide })
 			<p class="text-secondary m-0">
 				{{ formatMessage(messages.addFilesModalDescription) }}
 			</p>
-			<StyledInput
+			<Input
 				ref="searchInputRef"
 				v-model="searchQuery"
 				type="text"
diff --git a/packages/ui/src/components/external_files/AddToExistingExternalProjectModal.vue b/packages/ui/src/components/external_files/AddToExistingExternalProjectModal.vue
index 9ad61e3b1..c780e4eb0 100644
--- a/packages/ui/src/components/external_files/AddToExistingExternalProjectModal.vue
+++ b/packages/ui/src/components/external_files/AddToExistingExternalProjectModal.vue
@@ -4,7 +4,7 @@ import { PlusIcon, SearchIcon, SpinnerIcon, XIcon } from '@modrinth/assets'
 import { useMutation } from '@tanstack/vue-query'
 import { computed, ref, useTemplateRef } from 'vue'
 
-import { Accordion, ButtonStyled, NewModal, StyledInput } from '#ui/components'
+import { Accordion, ButtonStyled, NewModal, Input } from '#ui/components'
 
 import { injectModrinthClient, injectNotificationManager } from '../../providers'
 import AttributionGroupFilePicker from './AttributionGroupFilePicker.vue'
@@ -44,7 +44,7 @@ const { addNotification } = injectNotificationManager()
 const modalRef = useTemplateRef<InstanceType<typeof NewModal>>('modalRef')
 const searchAccordionRef = useTemplateRef<InstanceType<typeof Accordion>>('searchAccordionRef')
 const filesAccordionRef = useTemplateRef<InstanceType<typeof Accordion>>('filesAccordionRef')
-const searchInputRef = useTemplateRef<InstanceType<typeof StyledInput>>('searchInputRef')
+const searchInputRef = useTemplateRef<InstanceType<typeof Input>>('searchInputRef')
 
 const query = ref('')
 const isLoading = ref(false)
@@ -217,7 +217,7 @@ defineExpose({ show, hide })
 						class="flex flex-wrap gap-2 shrink-0 p-4 bg-surface-3 border-0 border-b border-solid border-surface-5"
 						@submit.prevent="executeSearch"
 					>
-						<StyledInput
+						<Input
 							ref="searchInputRef"
 							v-model="query"
 							:icon="SearchIcon"
diff --git a/packages/ui/src/components/external_files/AddToGlobalPermissionsDatabaseModal.vue b/packages/ui/src/components/external_files/AddToGlobalPermissionsDatabaseModal.vue
index ab28b571a..ac54759b8 100644
--- a/packages/ui/src/components/external_files/AddToGlobalPermissionsDatabaseModal.vue
+++ b/packages/ui/src/components/external_files/AddToGlobalPermissionsDatabaseModal.vue
@@ -10,8 +10,8 @@ import {
 	Combobox,
 	type ComboboxOption,
 	NewModal,
-	StyledInput,
-	StyledTextarea,
+	Input,
+	Textarea,
 } from '#ui/components'
 
 import { injectModrinthClient, injectNotificationManager } from '../../providers'
@@ -150,7 +150,7 @@ defineExpose({ show, hide })
 		<div class="flex flex-col gap-4">
 			<div class="flex flex-col gap-2">
 				<label class="font-semibold text-contrast" for="add-global-title">Title</label>
-				<StyledInput
+				<Input
 					id="add-global-title"
 					v-model="title"
 					type="text"
@@ -159,7 +159,7 @@ defineExpose({ show, hide })
 			</div>
 			<div class="flex flex-col gap-2">
 				<label class="font-semibold text-contrast" for="add-global-link">Link</label>
-				<StyledInput
+				<Input
 					id="add-global-link"
 					v-model="link"
 					type="text"
@@ -171,7 +171,7 @@ defineExpose({ show, hide })
 					<label class="font-semibold text-contrast" for="add-global-flame-id">
 						CurseForge project ID
 					</label>
-					<StyledInput
+					<Input
 						id="add-global-flame-id"
 						v-model="flameProjectId"
 						type="text"
@@ -194,7 +194,7 @@ defineExpose({ show, hide })
 			</div>
 			<div class="flex flex-col gap-2">
 				<label class="font-semibold text-contrast" for="add-global-proof">Proof or notes</label>
-				<StyledTextarea
+				<Textarea
 					id="add-global-proof"
 					v-model="proof"
 					input-class="min-h-[6rem]"
diff --git a/packages/ui/src/components/external_files/AttributionEditor.vue b/packages/ui/src/components/external_files/AttributionEditor.vue
index 47b401f89..906621f00 100644
--- a/packages/ui/src/components/external_files/AttributionEditor.vue
+++ b/packages/ui/src/components/external_files/AttributionEditor.vue
@@ -19,8 +19,8 @@ import {
 	Chips,
 	Combobox,
 	type ComboboxOption,
-	StyledInput,
-	StyledTextarea,
+	Input,
+	Textarea,
 } from '#ui/components'
 import { FileInput } from '#ui/components/base'
 import { commonMessages } from '#ui/utils'
@@ -481,7 +481,7 @@ function cancelEditing() {
 			<span class="text-contrast font-semibold mt-1">
 				{{ formatMessage(messages.linkLabel) }}
 			</span>
-			<StyledInput
+			<Input
 				v-model="linkInput"
 				type="text"
 				class="max-w-[40rem]"
@@ -522,7 +522,7 @@ function cancelEditing() {
 					)
 				}}
 			</span>
-			<StyledInput
+			<Input
 				v-model="customLicenseInput"
 				type="text"
 				class="max-w-[40rem]"
@@ -549,7 +549,7 @@ function cancelEditing() {
 							formatMessage(selectedPermissionReason.notesDescription)
 						}}</span>
 					</div>
-					<StyledTextarea
+					<Textarea
 						v-model="notesInput"
 						resize="both"
 						:rows="notesInputRows"
diff --git a/packages/ui/src/components/external_files/ExternalProjectPermissionsCard.vue b/packages/ui/src/components/external_files/ExternalProjectPermissionsCard.vue
index 8cee07a22..72a789d4f 100644
--- a/packages/ui/src/components/external_files/ExternalProjectPermissionsCard.vue
+++ b/packages/ui/src/components/external_files/ExternalProjectPermissionsCard.vue
@@ -30,8 +30,8 @@ import {
 	injectProjectPageContext,
 } from '../../providers'
 import type { QuickReply } from '../../providers/attribution-moderation'
-import StyledInput from '../base/inputs/StyledInput.vue'
-import StyledTextarea from '../base/inputs/StyledTextarea.vue'
+import Input from '../base/inputs/Input.vue'
+import Textarea from '../base/inputs/Textarea.vue'
 import AddFilesToAttributionGroupModal from './AddFilesToAttributionGroupModal.vue'
 import AddToExistingExternalProjectModal from './AddToExistingExternalProjectModal.vue'
 import AddToGlobalPermissionsDatabaseModal from './AddToGlobalPermissionsDatabaseModal.vue'
@@ -708,7 +708,7 @@ const visibleQuickReplies = computed<OverflowMenuOption[]>(() => {
 										</div>
 									</template>
 									<template v-else>
-										<StyledTextarea
+										<Textarea
 											v-model="reviewReasonInput"
 											placeholder="Explanation of review (optional)"
 											class="mt-3"
diff --git a/packages/ui/src/components/flows/creation-flow-modal/components/CustomSetupStage.vue b/packages/ui/src/components/flows/creation-flow-modal/components/CustomSetupStage.vue
index 0f307d1eb..83e449115 100644
--- a/packages/ui/src/components/flows/creation-flow-modal/components/CustomSetupStage.vue
+++ b/packages/ui/src/components/flows/creation-flow-modal/components/CustomSetupStage.vue
@@ -22,7 +22,7 @@
 		<!-- Instance-specific: Name field -->
 		<div v-if="ctx.flowType === 'instance'" class="flex flex-col gap-2">
 			<span class="font-semibold text-contrast">{{ formatMessage(messages.nameLabel) }}</span>
-			<StyledInput
+			<Input
 				v-model="ctx.instanceName.value"
 				:placeholder="ctx.autoInstanceName.value || formatMessage(messages.instanceNamePlaceholder)"
 			/>
@@ -162,7 +162,7 @@ import Chips from '../../../base/Chips.vue'
 import Collapsible from '../../../base/Collapsible.vue'
 import Combobox, { type ComboboxOption } from '../../../base/Combobox.vue'
 import PaperChannelBadge from '../../../base/PaperChannelBadge.vue'
-import StyledInput from '../../../base/inputs/StyledInput.vue'
+import Input from '../../../base/inputs/Input.vue'
 import type { LoaderVersionEntry, LoaderVersionType } from '../creation-flow-context'
 import { injectCreationFlowContext } from '../creation-flow-context'
 import { formatLoaderLabel } from '../shared'
diff --git a/packages/ui/src/components/flows/creation-flow-modal/components/FinalConfigStage.vue b/packages/ui/src/components/flows/creation-flow-modal/components/FinalConfigStage.vue
index aab521d7a..4d5af74b2 100644
--- a/packages/ui/src/components/flows/creation-flow-modal/components/FinalConfigStage.vue
+++ b/packages/ui/src/components/flows/creation-flow-modal/components/FinalConfigStage.vue
@@ -5,7 +5,7 @@
 			class="flex flex-col gap-2"
 		>
 			<span class="font-semibold text-contrast">{{ formatMessage(messages.worldNameLabel) }}</span>
-			<StyledInput
+			<Input
 				v-model="worldName"
 				:placeholder="formatMessage(messages.worldNamePlaceholder)"
 			/>
@@ -69,7 +69,7 @@
 					</template>
 				</IntlFormatted>
 			</span>
-			<StyledInput
+			<Input
 				v-model="worldSeed"
 				:placeholder="formatMessage(messages.worldSeedPlaceholder)"
 			/>
@@ -107,7 +107,7 @@
 						:options="generatorSettingsOptions"
 						:placeholder="formatMessage(messages.generatorSettingsPlaceholder)"
 					/>
-					<StyledTextarea
+					<Textarea
 						v-if="generatorSettingsMode === 'custom'"
 						v-model="generatorSettingsCustom"
 						:rows="4"
@@ -143,8 +143,8 @@ import { injectTags } from '../../../../providers'
 import Accordion from '../../../base/Accordion.vue'
 import Chips from '../../../base/Chips.vue'
 import Combobox, { type ComboboxOption } from '../../../base/Combobox.vue'
-import StyledInput from '../../../base/inputs/StyledInput.vue'
-import StyledTextarea from '../../../base/inputs/StyledTextarea.vue'
+import Input from '../../../base/inputs/Input.vue'
+import Textarea from '../../../base/inputs/Textarea.vue'
 import Toggle from '../../../base/Toggle.vue'
 import type { Difficulty, Gamemode, GeneratorSettingsMode } from '../creation-flow-context'
 import { injectCreationFlowContext } from '../creation-flow-context'
diff --git a/packages/ui/src/components/flows/creation-flow-modal/components/ImportInstanceStage.vue b/packages/ui/src/components/flows/creation-flow-modal/components/ImportInstanceStage.vue
index 1247477e5..8ef79ff58 100644
--- a/packages/ui/src/components/flows/creation-flow-modal/components/ImportInstanceStage.vue
+++ b/packages/ui/src/components/flows/creation-flow-modal/components/ImportInstanceStage.vue
@@ -21,7 +21,7 @@
 		</template>
 		<template v-else>
 			<!-- Search -->
-			<StyledInput
+			<Input
 				v-if="ctx.importLaunchers.value.length > 0"
 				v-model="ctx.importSearchQuery.value"
 				:icon="SearchIcon"
@@ -88,7 +88,7 @@
 						<FolderSearchIcon />
 					</button>
 				</ButtonStyled>
-				<StyledInput
+				<Input
 					v-model="newLauncherPath"
 					:placeholder="formatMessage(messages.launcherPathPlaceholder)"
 					class="flex-1"
@@ -113,7 +113,7 @@ import type { ImportableLauncher } from '../../../../providers/instance-import'
 import ButtonStyled from '../../../base/ButtonStyled.vue'
 import Checkbox from '../../../base/Checkbox.vue'
 import Collapsible from '../../../base/Collapsible.vue'
-import StyledInput from '../../../base/inputs/StyledInput.vue'
+import Input from '../../../base/inputs/Input.vue'
 import { injectCreationFlowContext } from '../creation-flow-context'
 
 const ctx = injectCreationFlowContext()
diff --git a/packages/ui/src/components/modal/ConfirmModal.vue b/packages/ui/src/components/modal/ConfirmModal.vue
index 7835a28f6..6110bf908 100644
--- a/packages/ui/src/components/modal/ConfirmModal.vue
+++ b/packages/ui/src/components/modal/ConfirmModal.vue
@@ -23,7 +23,7 @@
 					<span class="italic font-bold">{{ confirmationText }}</span> below:
 				</span>
 			</label>
-			<StyledInput
+			<Input
 				v-if="hasToType"
 				id="confirmation"
 				v-model="confirmation_typed"
@@ -54,7 +54,7 @@ import { renderString } from '@modrinth/utils'
 import { computed, ref } from 'vue'
 
 import ButtonStyled from '../base/ButtonStyled.vue'
-import StyledInput from '../base/inputs/StyledInput.vue'
+import Input from '../base/inputs/Input.vue'
 import NewModal from './NewModal.vue'
 
 const props = defineProps({
diff --git a/packages/ui/src/components/modal/ShareModal.vue b/packages/ui/src/components/modal/ShareModal.vue
index 5b65b0df1..53df3c43e 100644
--- a/packages/ui/src/components/modal/ShareModal.vue
+++ b/packages/ui/src/components/modal/ShareModal.vue
@@ -14,7 +14,7 @@ import { computed, nextTick, ref } from 'vue'
 
 import { injectNotificationManager } from '#ui/providers'
 
-import { ButtonStyled, NewModal, StyledTextarea } from '../index'
+import { ButtonStyled, NewModal, Textarea } from '../index'
 
 const props = defineProps({
 	header: {
@@ -167,7 +167,7 @@ defineExpose({
 						</button>
 					</ButtonStyled>
 				</div>
-				<StyledTextarea
+				<Textarea
 					v-else
 					v-model="content"
 					resize="vertical"
@@ -185,7 +185,7 @@ defineExpose({
 							</button>
 						</ButtonStyled>
 					</template>
-				</StyledTextarea>
+				</Textarea>
 				<div
 					v-if="link || socialButtons"
 					:class="['flex flex-col justify-center gap-2', link ? 'w-64 max-w-full' : 'flex-grow']"
diff --git a/packages/ui/src/components/search/SearchSidebarFilter.vue b/packages/ui/src/components/search/SearchSidebarFilter.vue
index a1d720c36..5f7cd9f74 100644
--- a/packages/ui/src/components/search/SearchSidebarFilter.vue
+++ b/packages/ui/src/components/search/SearchSidebarFilter.vue
@@ -91,7 +91,7 @@
 				</label>
 			</div>
 			<template v-if="filterType.display !== 'toggle'">
-				<StyledInput
+				<Input
 					v-if="filterType.searchable"
 					:id="`search-${filterType.id}`"
 					v-model="query"
@@ -211,7 +211,7 @@ import { defineMessages, useVIntl } from '../../composables/i18n'
 import type { FilterOption, FilterType, FilterValue } from '../../utils/search'
 import Accordion from '../base/Accordion.vue'
 import ButtonStyled from '../base/ButtonStyled.vue'
-import { Checkbox, ScrollablePanel, StyledInput } from '../index'
+import { Checkbox, ScrollablePanel, Input } from '../index'
 import SearchFilterGroup from './SearchFilterGroup.vue'
 import SearchFilterOption from './SearchFilterOption.vue'
 
diff --git a/packages/ui/src/components/servers/backups/BackupCreateModal.vue b/packages/ui/src/components/servers/backups/BackupCreateModal.vue
index f8b410252..e95161246 100644
--- a/packages/ui/src/components/servers/backups/BackupCreateModal.vue
+++ b/packages/ui/src/components/servers/backups/BackupCreateModal.vue
@@ -4,7 +4,7 @@
 			<label for="backup-name-input">
 				<span class="text-lg font-semibold text-contrast">Name</span>
 			</label>
-			<StyledInput
+			<Input
 				id="backup-name-input"
 				ref="input"
 				v-model="backupName"
@@ -81,7 +81,7 @@ import {
 } from '../../../providers'
 import { commonMessages } from '../../../utils'
 import ButtonStyled from '../../base/ButtonStyled.vue'
-import StyledInput from '../../base/inputs/StyledInput.vue'
+import Input from '../../base/inputs/Input.vue'
 import NewModal from '../../modal/NewModal.vue'
 
 const { addNotification } = injectNotificationManager()
diff --git a/packages/ui/src/components/servers/backups/BackupRenameModal.vue b/packages/ui/src/components/servers/backups/BackupRenameModal.vue
index 0c79250fd..f730d5870 100644
--- a/packages/ui/src/components/servers/backups/BackupRenameModal.vue
+++ b/packages/ui/src/components/servers/backups/BackupRenameModal.vue
@@ -4,7 +4,7 @@
 			<label for="backup-name-input">
 				<span class="text-lg font-semibold text-contrast"> Name </span>
 			</label>
-			<StyledInput
+			<Input
 				id="backup-name-input"
 				ref="input"
 				v-model="backupName"
@@ -63,7 +63,7 @@ import {
 } from '../../../providers'
 import { commonMessages } from '../../../utils'
 import ButtonStyled from '../../base/ButtonStyled.vue'
-import StyledInput from '../../base/inputs/StyledInput.vue'
+import Input from '../../base/inputs/Input.vue'
 import NewModal from '../../modal/NewModal.vue'
 
 const { addNotification } = injectNotificationManager()
diff --git a/packages/ui/src/components/settings/LanguageSelector.vue b/packages/ui/src/components/settings/LanguageSelector.vue
index 2677d64c1..c01b6f11e 100644
--- a/packages/ui/src/components/settings/LanguageSelector.vue
+++ b/packages/ui/src/components/settings/LanguageSelector.vue
@@ -11,7 +11,7 @@ import {
 } from '../../composables/i18n'
 import { metaLocaleModules } from '../../locales.ts'
 import { isModifierKeyDown } from '../../utils/events'
-import StyledInput from '../base/inputs/StyledInput.vue'
+import Input from '../base/inputs/Input.vue'
 
 const { formatMessage } = useVIntl()
 
@@ -176,7 +176,7 @@ function getCategoryName(category: Category): string {
 <template>
 	<div class="flex flex-col gap-4">
 		<div v-if="$locales.length > 1" class="-mb-4">
-			<StyledInput
+			<Input
 				id="language-search"
 				v-model="$query"
 				:icon="SearchIcon"
diff --git a/packages/ui/src/components/sharing/invite-players-modal/invite-players-modal-invite-link-editor.vue b/packages/ui/src/components/sharing/invite-players-modal/invite-players-modal-invite-link-editor.vue
index 63cdb45c0..512bea6eb 100644
--- a/packages/ui/src/components/sharing/invite-players-modal/invite-players-modal-invite-link-editor.vue
+++ b/packages/ui/src/components/sharing/invite-players-modal/invite-players-modal-invite-link-editor.vue
@@ -60,7 +60,7 @@
 			</div>
 			<div class="flex flex-col gap-2">
 				<span class="font-semibold text-contrast">{{ formatMessage(messages.maxUsesLabel) }}</span>
-				<StyledInput
+				<Input
 					v-model="maxUses"
 					type="number"
 					:min="1"
@@ -101,7 +101,7 @@ import { injectNotificationManager } from '../../../providers'
 import ButtonStyled from '../../base/ButtonStyled.vue'
 import Combobox, { type ComboboxOption } from '../../base/Combobox.vue'
 import DatePicker from '../../base/inputs/DatePicker.vue'
-import StyledInput from '../../base/inputs/StyledInput.vue'
+import Input from '../../base/inputs/Input.vue'
 import NewModal from '../../modal/NewModal.vue'
 import type { InviteLinkSettings } from './types'
 
diff --git a/packages/ui/src/components/version/VersionPage.vue b/packages/ui/src/components/version/VersionPage.vue
index 82816573a..e20328772 100644
--- a/packages/ui/src/components/version/VersionPage.vue
+++ b/packages/ui/src/components/version/VersionPage.vue
@@ -25,7 +25,7 @@ import {
 
 import AutoLink from '../base/AutoLink.vue'
 import Avatar from '../base/Avatar.vue'
-import StyledInput from '../base/inputs/StyledInput.vue'
+import Input from '../base/inputs/Input.vue'
 import Table from '../base/Table.vue'
 import TagItem from '../base/TagItem.vue'
 import TagTagItem from '../base/TagTagItem.vue'
@@ -505,7 +505,7 @@ const authorLink = computed(() =>
 			</h3>
 			<Table :columns="contentTableColumns" :data="includedContent" row-key="id">
 				<template #header-actions>
-					<StyledInput
+					<Input
 						v-model="contentSearchQuery"
 						:icon="SearchIcon"
 						:placeholder="formatMessage(messages.searchContent)"
diff --git a/packages/ui/src/layouts/shared/browse-tab/layout.vue b/packages/ui/src/layouts/shared/browse-tab/layout.vue
index 8490e9875..fa09527f8 100644
--- a/packages/ui/src/layouts/shared/browse-tab/layout.vue
+++ b/packages/ui/src/layouts/shared/browse-tab/layout.vue
@@ -8,7 +8,7 @@ import Combobox, { type ComboboxOption } from '#ui/components/base/Combobox.vue'
 import LoadingIndicator from '#ui/components/base/LoadingIndicator.vue'
 import NavTabs from '#ui/components/base/NavTabs.vue'
 import Pagination from '#ui/components/base/Pagination.vue'
-import StyledInput from '#ui/components/base/inputs/StyledInput.vue'
+import Input from '#ui/components/base/inputs/Input.vue'
 import ProjectCard from '#ui/components/project/card/ProjectCard.vue'
 import ProjectCardList from '#ui/components/project/ProjectCardList.vue'
 import SearchFilterControl from '#ui/components/search/SearchFilterControl.vue'
@@ -113,7 +113,7 @@ function getProjectCardTags(result: Labrinth.Search.v3.ResultSearchProject, disp
 		:replace="ctx.variant === 'app'"
 	/>
 
-	<StyledInput
+	<Input
 		v-model="ctx.query.value"
 		:icon="SearchIcon"
 		type="text"
diff --git a/packages/ui/src/layouts/shared/console/layout.vue b/packages/ui/src/layouts/shared/console/layout.vue
index 0cec38339..a2988286c 100644
--- a/packages/ui/src/layouts/shared/console/layout.vue
+++ b/packages/ui/src/layouts/shared/console/layout.vue
@@ -15,7 +15,7 @@
 		/>
 
 		<div class="flex items-center gap-2">
-			<StyledInput
+			<Input
 				v-model="searchQuery"
 				:icon="SearchIcon"
 				placeholder="Search logs"
@@ -107,7 +107,7 @@ import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
 import type { CollapsibleAdmonitionItem } from '#ui/components/base/CollapsibleAdmonition.vue'
 import CollapsibleAdmonition from '#ui/components/base/CollapsibleAdmonition.vue'
 import Combobox from '#ui/components/base/Combobox.vue'
-import StyledInput from '#ui/components/base/inputs/StyledInput.vue'
+import Input from '#ui/components/base/inputs/Input.vue'
 import NewModal from '#ui/components/modal/NewModal.vue'
 import ShareModal from '#ui/components/modal/ShareModal.vue'
 import { injectModrinthClient } from '#ui/providers'
diff --git a/packages/ui/src/layouts/shared/content-tab/components/modals/ContentInstallModal.vue b/packages/ui/src/layouts/shared/content-tab/components/modals/ContentInstallModal.vue
index 453bea767..7de81f305 100644
--- a/packages/ui/src/layouts/shared/content-tab/components/modals/ContentInstallModal.vue
+++ b/packages/ui/src/layouts/shared/content-tab/components/modals/ContentInstallModal.vue
@@ -67,7 +67,7 @@
 			style="height: 400px; overflow-y: auto"
 		>
 			<div class="flex items-start gap-3 px-6">
-				<StyledInput
+				<Input
 					v-model="searchFilter"
 					:icon="SearchIcon"
 					:placeholder="formatMessage(messages.searchPlaceholder)"
@@ -162,7 +162,7 @@
 				<span class="font-semibold text-contrast">
 					{{ formatMessage(messages.nameLabel) }}
 				</span>
-				<StyledInput
+				<Input
 					v-model="instanceName"
 					:placeholder="formatMessage(messages.namePlaceholder)"
 				/>
@@ -264,7 +264,7 @@ import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
 import Chips from '#ui/components/base/Chips.vue'
 import Combobox, { type ComboboxOption } from '#ui/components/base/Combobox.vue'
 import LoadingIndicator from '#ui/components/base/LoadingIndicator.vue'
-import StyledInput from '#ui/components/base/inputs/StyledInput.vue'
+import Input from '#ui/components/base/inputs/Input.vue'
 import NewModal from '#ui/components/modal/NewModal.vue'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
 import { injectFilePicker } from '#ui/providers'
diff --git a/packages/ui/src/layouts/shared/content-tab/components/modals/ModpackContentModal.vue b/packages/ui/src/layouts/shared/content-tab/components/modals/ModpackContentModal.vue
index a4e1f34dd..16f9ba0c5 100644
--- a/packages/ui/src/layouts/shared/content-tab/components/modals/ModpackContentModal.vue
+++ b/packages/ui/src/layouts/shared/content-tab/components/modals/ModpackContentModal.vue
@@ -17,7 +17,7 @@ import BulletDivider from '#ui/components/base/BulletDivider.vue'
 import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
 import Checkbox from '#ui/components/base/Checkbox.vue'
 import type { Option as OverflowMenuOption } from '#ui/components/base/OverflowMenu.vue'
-import StyledInput from '#ui/components/base/inputs/StyledInput.vue'
+import Input from '#ui/components/base/inputs/Input.vue'
 import NewModal from '#ui/components/modal/NewModal.vue'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
 import { injectPageContext } from '#ui/providers/page-context'
@@ -476,7 +476,7 @@ defineExpose({ show, showLoading, hide, getState, restore, updateItem, setItems
 		</template>
 		<div class="flex flex-col h-[min(600px,calc(95vh-10rem))]">
 			<div class="flex flex-col gap-4 px-6 py-4 border-b border-solid border-0 border-surface-4">
-				<StyledInput
+				<Input
 					v-model="searchQuery"
 					:icon="SearchIcon"
 					:placeholder="formatMessage(messages.searchPlaceholder, { count: typeFilteredCount })"
diff --git a/packages/ui/src/layouts/shared/content-tab/components/modals/content-updater-modal/index.vue b/packages/ui/src/layouts/shared/content-tab/components/modals/content-updater-modal/index.vue
index 7f4b47007..3def745d7 100644
--- a/packages/ui/src/layouts/shared/content-tab/components/modals/content-updater-modal/index.vue
+++ b/packages/ui/src/layouts/shared/content-tab/components/modals/content-updater-modal/index.vue
@@ -15,7 +15,7 @@
 		>
 			<div class="w-[300px] flex flex-col relative bg-surface-3">
 				<div class="p-4 pb-2">
-					<StyledInput
+					<Input
 						v-model="searchQuery"
 						:icon="SearchIcon"
 						type="text"
@@ -295,7 +295,7 @@ import { computed, ref, toRef } from 'vue'
 
 import Avatar from '#ui/components/base/Avatar.vue'
 import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
-import StyledInput from '#ui/components/base/inputs/StyledInput.vue'
+import Input from '#ui/components/base/inputs/Input.vue'
 import ConfirmModal from '#ui/components/modal/ConfirmModal.vue'
 import NewModal from '#ui/components/modal/NewModal.vue'
 import VersionChannelIndicator from '#ui/components/version/VersionChannelIndicator.vue'
diff --git a/packages/ui/src/layouts/shared/content-tab/layout.vue b/packages/ui/src/layouts/shared/content-tab/layout.vue
index af2d46881..f71182399 100644
--- a/packages/ui/src/layouts/shared/content-tab/layout.vue
+++ b/packages/ui/src/layouts/shared/content-tab/layout.vue
@@ -23,7 +23,7 @@ import { computed, nextTick, ref, watch } from 'vue'
 import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
 import EmptyState from '#ui/components/base/EmptyState.vue'
 import OverflowMenu from '#ui/components/base/OverflowMenu.vue'
-import StyledInput from '#ui/components/base/inputs/StyledInput.vue'
+import Input from '#ui/components/base/inputs/Input.vue'
 import { useDebugLogger } from '#ui/composables/debug-logger'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
 import { commonMessages, formatContentTypeSentence } from '#ui/utils/common-messages'
@@ -796,7 +796,7 @@ const confirmUnlinkModal = ref<InstanceType<typeof ConfirmUnlinkModal>>()
 						</span>
 
 						<div class="flex flex-wrap items-center gap-2">
-							<StyledInput
+							<Input
 								v-model="searchQuery"
 								:icon="SearchIcon"
 								type="text"
diff --git a/packages/ui/src/layouts/shared/files-tab/components/FileNavbar.vue b/packages/ui/src/layouts/shared/files-tab/components/FileNavbar.vue
index c8d1f731e..4e47d2499 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/FileNavbar.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/FileNavbar.vue
@@ -4,7 +4,7 @@
 		:aria-label="formatMessage(messages.fileNavigation)"
 	>
 		<div v-if="!isEditing" class="flex items-center gap-2 @[800px]:hidden">
-			<StyledInput
+			<Input
 				:model-value="searchQuery"
 				:icon="SearchIcon"
 				type="search"
@@ -96,7 +96,7 @@
 			</nav>
 
 			<div v-if="!isEditing" class="flex flex-shrink-0 items-center gap-2">
-				<StyledInput
+				<Input
 					id="search-folder"
 					:model-value="searchQuery"
 					:icon="SearchIcon"
@@ -227,7 +227,7 @@ import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 
 import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
 import OverflowMenu from '#ui/components/base/OverflowMenu.vue'
-import StyledInput from '#ui/components/base/inputs/StyledInput.vue'
+import Input from '#ui/components/base/inputs/Input.vue'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
 import { commonMessages } from '#ui/utils/common-messages'
 
diff --git a/packages/ui/src/layouts/shared/files-tab/components/editor/EditorFindReplace.vue b/packages/ui/src/layouts/shared/files-tab/components/editor/EditorFindReplace.vue
index 2b4ed147f..4a42a3762 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/editor/EditorFindReplace.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/editor/EditorFindReplace.vue
@@ -24,7 +24,7 @@
 					@keydown.enter.exact.prevent.stop="emit('findNext')"
 					@keydown.shift.enter.prevent.stop="emit('findPrevious')"
 				>
-					<StyledInput
+					<Input
 						ref="findInputRef"
 						:model-value="findQuery"
 						type="search"
@@ -83,7 +83,7 @@
 			<div v-if="isReplaceOpen" class="flex items-center gap-1">
 				<div class="w-9 flex-shrink-0" />
 				<div @keydown.enter.prevent.stop="emit('replace', replaceQuery)">
-					<StyledInput
+					<Input
 						ref="replaceInputRef"
 						v-model="replaceQuery"
 						type="search"
@@ -122,7 +122,7 @@ import { ChevronDownIcon, ChevronRightIcon, ChevronUpIcon, XIcon } from '@modrin
 import { nextTick, ref, watch } from 'vue'
 
 import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
-import StyledInput from '#ui/components/base/inputs/StyledInput.vue'
+import Input from '#ui/components/base/inputs/Input.vue'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
 
 const props = defineProps<{
diff --git a/packages/ui/src/layouts/shared/files-tab/components/modals/FileCreateItemModal.vue b/packages/ui/src/layouts/shared/files-tab/components/modals/FileCreateItemModal.vue
index ab4289a76..ef4aeea1f 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/modals/FileCreateItemModal.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/modals/FileCreateItemModal.vue
@@ -13,7 +13,7 @@
 				<span class="font-semibold text-contrast">{{
 					formatMessage(fileValidationMessages.nameLabel)
 				}}</span>
-				<StyledInput
+				<Input
 					ref="createInput"
 					v-model="itemName"
 					:placeholder="
@@ -54,7 +54,7 @@ import { PlusIcon, XIcon } from '@modrinth/assets'
 import { computed, nextTick, ref } from 'vue'
 
 import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
-import StyledInput from '#ui/components/base/inputs/StyledInput.vue'
+import Input from '#ui/components/base/inputs/Input.vue'
 import NewModal from '#ui/components/modal/NewModal.vue'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
 import { commonMessages, formatFileItemType } from '#ui/utils/common-messages'
diff --git a/packages/ui/src/layouts/shared/files-tab/components/modals/FileMoveItemModal.vue b/packages/ui/src/layouts/shared/files-tab/components/modals/FileMoveItemModal.vue
index 43c7a1f3f..c99988a01 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/modals/FileMoveItemModal.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/modals/FileMoveItemModal.vue
@@ -19,7 +19,7 @@
 				<span class="font-semibold text-contrast">{{
 					formatMessage(messages.destinationPath)
 				}}</span>
-				<StyledInput
+				<Input
 					ref="destinationInput"
 					v-model="destination"
 					:placeholder="formatMessage(messages.destinationPlaceholder)"
@@ -51,7 +51,7 @@ import { RightArrowIcon, XIcon } from '@modrinth/assets'
 import { nextTick, ref } from 'vue'
 
 import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
-import StyledInput from '#ui/components/base/inputs/StyledInput.vue'
+import Input from '#ui/components/base/inputs/Input.vue'
 import NewModal from '#ui/components/modal/NewModal.vue'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
 import { commonMessages, formatFileItemType } from '#ui/utils/common-messages'
diff --git a/packages/ui/src/layouts/shared/files-tab/components/modals/FileRenameItemModal.vue b/packages/ui/src/layouts/shared/files-tab/components/modals/FileRenameItemModal.vue
index 1dfffa521..9f85c816a 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/modals/FileRenameItemModal.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/modals/FileRenameItemModal.vue
@@ -7,7 +7,7 @@
 		<form class="space-y-6 md:min-w-[400px]" @submit.prevent="handleSubmit">
 			<label class="flex flex-col gap-2">
 				<span class="font-semibold text-contrast">{{ formatMessage(messages.newNameLabel) }}</span>
-				<StyledInput ref="renameInput" v-model="itemName" wrapper-class="w-full" />
+				<Input ref="renameInput" v-model="itemName" wrapper-class="w-full" />
 				<div v-if="submitted && error" class="text-sm text-red">{{ error }}</div>
 			</label>
 		</form>
@@ -35,7 +35,7 @@ import { EditIcon, XIcon } from '@modrinth/assets'
 import { computed, nextTick, ref } from 'vue'
 
 import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
-import StyledInput from '#ui/components/base/inputs/StyledInput.vue'
+import Input from '#ui/components/base/inputs/Input.vue'
 import NewModal from '#ui/components/modal/NewModal.vue'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
 import { commonMessages } from '#ui/utils/common-messages'
diff --git a/packages/ui/src/layouts/shared/files-tab/components/modals/FileUploadZipUrlModal.vue b/packages/ui/src/layouts/shared/files-tab/components/modals/FileUploadZipUrlModal.vue
index 85e6e44d9..465fd2cff 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/modals/FileUploadZipUrlModal.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/modals/FileUploadZipUrlModal.vue
@@ -35,7 +35,7 @@
 				<div v-else class="text-sm text-secondary">
 					{{ formatMessage(messages.zipDescription) }}
 				</div>
-				<StyledInput
+				<Input
 					v-model="url"
 					v-tooltip="props.disabled ? props.disabledTooltip : undefined"
 					:icon="LinkIcon"
@@ -106,7 +106,7 @@ import {
 import { computed, nextTick, ref } from 'vue'
 
 import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
-import StyledInput from '#ui/components/base/inputs/StyledInput.vue'
+import Input from '#ui/components/base/inputs/Input.vue'
 import NewModal from '#ui/components/modal/NewModal.vue'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
 import { injectModrinthClient } from '#ui/providers/api-client'
diff --git a/packages/ui/src/layouts/shared/server-settings/pages/advanced.vue b/packages/ui/src/layouts/shared/server-settings/pages/advanced.vue
index 8cb475960..5f752f2df 100644
--- a/packages/ui/src/layouts/shared/server-settings/pages/advanced.vue
+++ b/packages/ui/src/layouts/shared/server-settings/pages/advanced.vue
@@ -124,7 +124,7 @@
 						</ButtonStyled>
 					</div>
 					<div class="relative">
-						<StyledTextarea
+						<Textarea
 							id="startup-command-field"
 							v-model="startupCommand"
 							v-tooltip="advancedActionTooltip"
@@ -228,7 +228,7 @@ import {
 import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query'
 import { computed, ref, watch } from 'vue'
 
-import { ButtonStyled, Combobox, StyledTextarea } from '#ui/components'
+import { ButtonStyled, Combobox, Textarea } from '#ui/components'
 import SaveBanner from '#ui/components/servers/SaveBanner.vue'
 import { useServerPermissions } from '#ui/composables/server-permissions'
 import {
diff --git a/packages/ui/src/layouts/shared/server-settings/pages/general.vue b/packages/ui/src/layouts/shared/server-settings/pages/general.vue
index 675eb1b20..e54c06e13 100644
--- a/packages/ui/src/layouts/shared/server-settings/pages/general.vue
+++ b/packages/ui/src/layouts/shared/server-settings/pages/general.vue
@@ -10,7 +10,7 @@
 								<span class="text-lg font-semibold text-contrast">Server name</span>
 							</label>
 							<div class="flex flex-col gap-2.5">
-								<StyledInput
+								<Input
 									id="server-name-field"
 									v-model="serverName"
 									v-tooltip="advancedActionTooltip"
@@ -150,7 +150,7 @@ import { useQuery, useQueryClient } from '@tanstack/vue-query'
 import { useStorage } from '@vueuse/core'
 import { computed, ref, watch } from 'vue'
 
-import { CopyCode, StyledInput, Toggle } from '#ui/components'
+import { CopyCode, Input, Toggle } from '#ui/components'
 import EditServerIcon from '#ui/components/servers/edit-server-icon/EditServerIcon.vue'
 import SaveBanner from '#ui/components/servers/SaveBanner.vue'
 import { useServerPermissions } from '#ui/composables/server-permissions'
diff --git a/packages/ui/src/layouts/shared/server-settings/pages/network.vue b/packages/ui/src/layouts/shared/server-settings/pages/network.vue
index dd8091b28..3d684e009 100644
--- a/packages/ui/src/layouts/shared/server-settings/pages/network.vue
+++ b/packages/ui/src/layouts/shared/server-settings/pages/network.vue
@@ -5,7 +5,7 @@
 				<NewModal ref="editAllocationModal" header="Edit allocation" width="550px">
 					<form class="flex w-full flex-col gap-2" @submit.prevent="editAllocation">
 						<label for="edit-allocation-name" class="font-semibold text-contrast"> Name </label>
-						<StyledInput
+						<Input
 							id="edit-allocation-name"
 							ref="editAllocationInput"
 							v-model="editAllocationName"
@@ -74,7 +74,7 @@
 						<span class="text-lg font-semibold text-contrast">Allocations</span>
 
 						<div class="flex w-full flex-col items-center justify-start gap-2 sm:flex-row">
-							<StyledInput
+							<Input
 								v-model="createAllocationName"
 								v-tooltip="advancedActionTooltip"
 								wrapper-class="grow max-w-[400px]"
@@ -145,7 +145,7 @@
 							<span class="text-lg font-semibold text-contrast">DNS records</span>
 						</label>
 						<div class="flex w-full flex-col items-center justify-start gap-2 sm:flex-row">
-							<StyledInput
+							<Input
 								id="user-domain"
 								v-model="userDomain"
 								wrapper-class="grow max-w-[400px]"
@@ -223,7 +223,7 @@ import {
 import { useQuery, useQueryClient } from '@tanstack/vue-query'
 import { computed, nextTick, ref } from 'vue'
 
-import { ButtonStyled, ConfirmModal, NewModal, StyledInput, Table, TagItem } from '#ui/components'
+import { ButtonStyled, ConfirmModal, NewModal, Input, Table, TagItem } from '#ui/components'
 import type { TableColumn } from '#ui/components/base'
 import { useServerPermissions } from '#ui/composables/server-permissions'
 import {
diff --git a/packages/ui/src/layouts/shared/server-settings/pages/properties.vue b/packages/ui/src/layouts/shared/server-settings/pages/properties.vue
index e40efe253..ad81023d5 100644
--- a/packages/ui/src/layouts/shared/server-settings/pages/properties.vue
+++ b/packages/ui/src/layouts/shared/server-settings/pages/properties.vue
@@ -31,7 +31,7 @@
 
 				<div class="w-full text-sm">
 					<label for="search-server-properties" class="sr-only"> Search server properties </label>
-					<StyledInput
+					<Input
 						id="search-server-properties"
 						v-model="searchInput"
 						wrapper-class="w-full"
@@ -77,7 +77,7 @@
 
 								<div v-if="isPropertyVisible('max_players')" class="flex flex-col gap-2.5 my-1">
 									<span class="font-semibold text-contrast">Max players</span>
-									<StyledInput
+									<Input
 										id="server-property-max-players"
 										v-tooltip="advancedActionTooltip"
 										:model-value="liveProperties.max_players"
@@ -91,7 +91,7 @@
 
 								<div v-if="isPropertyVisible('motd')" class="flex flex-col gap-2.5 my-1">
 									<span class="font-semibold text-contrast">MOTD</span>
-									<StyledInput
+									<Input
 										id="server-property-motd"
 										v-model="liveProperties.motd"
 										v-tooltip="advancedActionTooltip"
@@ -160,7 +160,7 @@
 									class="flex items-center justify-between h-10"
 								>
 									<span class="font-semibold text-contrast">Protection radius</span>
-									<StyledInput
+									<Input
 										id="server-property-spawn-protection-radius"
 										v-tooltip="advancedActionTooltip"
 										:model-value="liveProperties.spawn_protection"
@@ -220,7 +220,7 @@
 													v-else-if="getPropertyDef(key).type === 'number'"
 													class="w-full sm:w-[320px]"
 												>
-													<StyledInput
+													<Input
 														:id="`server-property-${key}`"
 														v-tooltip="advancedActionTooltip"
 														:model-value="liveProperties[key]"
@@ -233,7 +233,7 @@
 													/>
 												</div>
 												<div v-else class="flex w-full justify-end sm:w-[320px]">
-													<StyledInput
+													<Input
 														:id="`server-property-${key}`"
 														v-model="liveProperties[key]"
 														v-tooltip="advancedActionTooltip"
@@ -298,7 +298,7 @@ import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query'
 import Fuse from 'fuse.js'
 import { computed, ref, watch } from 'vue'
 
-import { Accordion, Admonition, AutoLink, Chips, StyledInput, Toggle } from '#ui/components'
+import { Accordion, Admonition, AutoLink, Chips, Input, Toggle } from '#ui/components'
 import SaveBanner from '#ui/components/servers/SaveBanner.vue'
 import { useServerPermissions } from '#ui/composables/server-permissions'
 import { injectServerSettings } from '#ui/layouts/shared/server-settings'
diff --git a/packages/ui/src/layouts/wrapped/AccountProfileSettings.vue b/packages/ui/src/layouts/wrapped/AccountProfileSettings.vue
index 9e8afd75b..04ab776ad 100644
--- a/packages/ui/src/layouts/wrapped/AccountProfileSettings.vue
+++ b/packages/ui/src/layouts/wrapped/AccountProfileSettings.vue
@@ -89,7 +89,7 @@
 					{{ formatMessage(commonMessages.usernameLabel) }}
 				</h2>
 				<div class="flex items-center gap-2">
-					<StyledInput
+					<Input
 						id="username-field"
 						v-model="current.username"
 						class="w-full max-w-md"
@@ -112,7 +112,7 @@
 				<h2 class="m-0 text-lg font-semibold text-contrast">
 					{{ formatMessage(messages.bioTitle) }}
 				</h2>
-				<StyledTextarea
+				<Textarea
 					id="bio-field"
 					v-model="current.bio"
 					:error="current.bio.length > 160"
@@ -138,8 +138,8 @@ import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
 import EmptyState from '#ui/components/base/EmptyState.vue'
 import FileInput from '#ui/components/base/FileInput.vue'
 import IntlFormatted from '#ui/components/base/IntlFormatted.vue'
-import StyledInput from '#ui/components/base/inputs/StyledInput.vue'
-import StyledTextarea from '#ui/components/base/inputs/StyledTextarea.vue'
+import Input from '#ui/components/base/inputs/Input.vue'
+import Textarea from '#ui/components/base/inputs/Textarea.vue'
 import { defineMessages, useVIntl } from '#ui/composables'
 import { type AuthUser, injectAuth, injectNotificationManager } from '#ui/providers'
 import { commonMessages } from '#ui/utils'
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/[id]/access/access.vue b/packages/ui/src/layouts/wrapped/hosting/manage/[id]/access/access.vue
index 3e30bfac8..94bd10a2c 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/[id]/access/access.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/[id]/access/access.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="flex flex-col gap-4">
 		<div class="flex flex-col gap-2 md:flex-row">
-			<StyledInput
+			<Input
 				v-model="memberSearch"
 				:icon="SearchIcon"
 				:placeholder="formatMessage(messages.searchUsersPlaceholder, { count: members.length })"
@@ -116,7 +116,7 @@ import { computed, ref, watch } from 'vue'
 import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
 import Combobox, { type ComboboxOption } from '#ui/components/base/Combobox.vue'
 import DropdownFilterBar from '#ui/components/base/DropdownFilterBar.vue'
-import StyledInput from '#ui/components/base/inputs/StyledInput.vue'
+import Input from '#ui/components/base/inputs/Input.vue'
 import {
 	AccessTable,
 	apiPermissionsToAccessRole,
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/index.vue b/packages/ui/src/layouts/wrapped/hosting/manage/index.vue
index d22ac2dac..0b05111b1 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/index.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/index.vue
@@ -95,7 +95,7 @@
 					{{ formatMessage(messages.serversTitle) }}
 				</h1>
 				<div class="flex w-full flex-row items-center justify-end gap-2 md:mb-0">
-					<StyledInput
+					<Input
 						id="search"
 						v-model="searchInput"
 						:icon="SearchIcon"
@@ -243,7 +243,7 @@ import {
 	ResubscribeModal,
 	ServerListEmpty,
 	ServersGuestPlanModal,
-	StyledInput,
+	Input,
 	useServerBackupDownload,
 	useVIntl,
 } from '@modrinth/ui'
diff --git a/packages/ui/src/stories/base/NativeDateInput.stories.ts b/packages/ui/src/stories/base/DateInput.stories.ts
similarity index 63%
rename from packages/ui/src/stories/base/NativeDateInput.stories.ts
rename to packages/ui/src/stories/base/DateInput.stories.ts
index f5e6b78b1..9eff6242d 100644
--- a/packages/ui/src/stories/base/NativeDateInput.stories.ts
+++ b/packages/ui/src/stories/base/DateInput.stories.ts
@@ -1,12 +1,12 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
 import { ref } from 'vue'
 
-import NativeDateInput from '../../components/base/inputs/NativeDateInput.vue'
+import DateInput from '../../components/base/inputs/DateInput.vue'
 
 const meta = {
-	title: 'Base/NativeDateInput',
-	component: NativeDateInput,
-} satisfies Meta<typeof NativeDateInput>
+	title: 'Base/DateInput',
+	component: DateInput,
+} satisfies Meta<typeof DateInput>
 
 export default meta
 type Story = StoryObj<typeof meta>
@@ -25,12 +25,12 @@ export const DatetimeLocal: Story = {
 
 export const Clearable: Story = {
 	render: () => ({
-		components: { NativeDateInput },
+		components: { DateInput },
 		setup() {
 			const value = ref('2026-07-15')
 			return { value }
 		},
-		template: '<NativeDateInput v-model="value" clearable />',
+		template: '<DateInput v-model="value" clearable />',
 	}),
 }
 
diff --git a/packages/ui/src/stories/base/StyledInput.stories.ts b/packages/ui/src/stories/base/Input.stories.ts
similarity index 89%
rename from packages/ui/src/stories/base/StyledInput.stories.ts
rename to packages/ui/src/stories/base/Input.stories.ts
index 901814236..a624803ea 100644
--- a/packages/ui/src/stories/base/StyledInput.stories.ts
+++ b/packages/ui/src/stories/base/Input.stories.ts
@@ -2,11 +2,11 @@ import { KeyIcon, LinkIcon, MailIcon, SearchIcon, UserIcon } from '@modrinth/ass
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
 import { ref } from 'vue'
 
-import StyledInput from '../../components/base/inputs/StyledInput.vue'
+import Input from '../../components/base/inputs/Input.vue'
 
 const meta = {
-	title: 'Base/StyledInput',
-	component: StyledInput,
+	title: 'Base/Input',
+	component: Input,
 	argTypes: {
 		size: {
 			control: 'select',
@@ -17,7 +17,7 @@ const meta = {
 			options: ['text', 'email', 'password', 'number', 'url', 'search'],
 		},
 	},
-} satisfies Meta<typeof StyledInput>
+} satisfies Meta<typeof Input>
 
 export default meta
 type Story = StoryObj<typeof meta>
@@ -37,13 +37,13 @@ export const WithIcon: Story = {
 
 export const Clearable: Story = {
 	render: () => ({
-		components: { StyledInput },
+		components: { Input },
 		setup() {
 			const value = ref('Some text to clear')
 			return { value, SearchIcon }
 		},
 		template: `
-			<StyledInput
+			<Input
 				v-model="value"
 				:icon="SearchIcon"
 				placeholder="Search..."
@@ -55,13 +55,13 @@ export const Clearable: Story = {
 
 export const WithIconAndClearable: Story = {
 	render: () => ({
-		components: { StyledInput },
+		components: { Input },
 		setup() {
 			const value = ref('Search query')
 			return { value, SearchIcon }
 		},
 		template: `
-			<StyledInput
+			<Input
 				v-model="value"
 				:icon="SearchIcon"
 				placeholder="Search..."
@@ -116,13 +116,13 @@ export const Disabled: Story = {
 
 export const Readonly: Story = {
 	render: () => ({
-		components: { StyledInput },
+		components: { Input },
 		setup() {
 			const value = ref('This is readonly')
 			return { value, UserIcon }
 		},
 		template: `
-			<StyledInput
+			<Input
 				v-model="value"
 				:icon="UserIcon"
 				placeholder="Readonly input"
@@ -134,13 +134,13 @@ export const Readonly: Story = {
 
 export const Error: Story = {
 	render: () => ({
-		components: { StyledInput },
+		components: { Input },
 		setup() {
 			const value = ref('invalid-url')
 			return { value, LinkIcon }
 		},
 		template: `
-			<StyledInput
+			<Input
 				v-model="value"
 				:icon="LinkIcon"
 				type="url"
@@ -153,7 +153,7 @@ export const Error: Story = {
 
 export const AllSizes: StoryObj = {
 	render: () => ({
-		components: { StyledInput },
+		components: { Input },
 		setup() {
 			return { SearchIcon }
 		},
@@ -161,7 +161,7 @@ export const AllSizes: StoryObj = {
 			<div style="display: flex; flex-direction: column; gap: 1rem;">
 				<div>
 					<p style="margin-bottom: 0.5rem; font-weight: 600;">Standard (36px)</p>
-					<StyledInput
+					<Input
 						:icon="SearchIcon"
 						placeholder="Standard size..."
 						size="standard"
@@ -169,7 +169,7 @@ export const AllSizes: StoryObj = {
 				</div>
 				<div>
 					<p style="margin-bottom: 0.5rem; font-weight: 600;">Small (32px)</p>
-					<StyledInput
+					<Input
 						:icon="SearchIcon"
 						placeholder="Small size..."
 						size="small"
@@ -177,7 +177,7 @@ export const AllSizes: StoryObj = {
 				</div>
 				<div>
 					<p style="margin-bottom: 0.5rem; font-weight: 600;">Medium (40px)</p>
-					<StyledInput
+					<Input
 						:icon="SearchIcon"
 						placeholder="Medium size..."
 						size="medium"
@@ -185,7 +185,7 @@ export const AllSizes: StoryObj = {
 				</div>
 				<div>
 					<p style="margin-bottom: 0.5rem; font-weight: 600;">Large (48px)</p>
-					<StyledInput
+					<Input
 						:icon="SearchIcon"
 						placeholder="Large size..."
 						size="large"
@@ -198,7 +198,7 @@ export const AllSizes: StoryObj = {
 
 export const AllStates: StoryObj = {
 	render: () => ({
-		components: { StyledInput },
+		components: { Input },
 		setup() {
 			const normalValue = ref('')
 			const filledValue = ref('With content')
@@ -210,7 +210,7 @@ export const AllStates: StoryObj = {
 			<div style="display: flex; flex-direction: column; gap: 1rem; max-width: 300px;">
 				<div>
 					<p style="margin-bottom: 0.5rem; font-weight: 600;">Default</p>
-					<StyledInput
+					<Input
 						v-model="normalValue"
 						:icon="SearchIcon"
 						placeholder="Enter text..."
@@ -218,7 +218,7 @@ export const AllStates: StoryObj = {
 				</div>
 				<div>
 					<p style="margin-bottom: 0.5rem; font-weight: 600;">With Value + Clearable</p>
-					<StyledInput
+					<Input
 						v-model="filledValue"
 						:icon="SearchIcon"
 						placeholder="Enter text..."
@@ -227,7 +227,7 @@ export const AllStates: StoryObj = {
 				</div>
 				<div>
 					<p style="margin-bottom: 0.5rem; font-weight: 600;">Error State</p>
-					<StyledInput
+					<Input
 						v-model="errorValue"
 						:icon="LinkIcon"
 						placeholder="Enter URL..."
@@ -236,7 +236,7 @@ export const AllStates: StoryObj = {
 				</div>
 				<div>
 					<p style="margin-bottom: 0.5rem; font-weight: 600;">Disabled</p>
-					<StyledInput
+					<Input
 						:icon="SearchIcon"
 						placeholder="Disabled..."
 						disabled
@@ -244,7 +244,7 @@ export const AllStates: StoryObj = {
 				</div>
 				<div>
 					<p style="margin-bottom: 0.5rem; font-weight: 600;">Readonly</p>
-					<StyledInput
+					<Input
 						v-model="readonlyValue"
 						:icon="SearchIcon"
 						placeholder="Readonly..."
diff --git a/packages/ui/src/stories/base/StyledTextarea.stories.ts b/packages/ui/src/stories/base/Textarea.stories.ts
similarity index 65%
rename from packages/ui/src/stories/base/StyledTextarea.stories.ts
rename to packages/ui/src/stories/base/Textarea.stories.ts
index e7d5c3074..9102322d0 100644
--- a/packages/ui/src/stories/base/StyledTextarea.stories.ts
+++ b/packages/ui/src/stories/base/Textarea.stories.ts
@@ -1,18 +1,18 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
 import { ref } from 'vue'
 
-import StyledTextarea from '../../components/base/inputs/StyledTextarea.vue'
+import Textarea from '../../components/base/inputs/Textarea.vue'
 
 const meta = {
-	title: 'Base/StyledTextarea',
-	component: StyledTextarea,
+	title: 'Base/Textarea',
+	component: Textarea,
 	argTypes: {
 		resize: {
 			control: 'select',
 			options: ['none', 'vertical', 'both'],
 		},
 	},
-} satisfies Meta<typeof StyledTextarea>
+} satisfies Meta<typeof Textarea>
 
 export default meta
 type Story = StoryObj<typeof meta>
@@ -39,7 +39,7 @@ export const Resizable: Story = {
 
 export const AllStates: StoryObj = {
 	render: () => ({
-		components: { StyledTextarea },
+		components: { Textarea },
 		setup() {
 			const normalValue = ref('')
 			const filledValue = ref('Some content that has been entered into the textarea.')
@@ -49,12 +49,12 @@ export const AllStates: StoryObj = {
 		},
 		template: /*html*/ `
 			<div style="display: flex; flex-direction: column; gap: 1rem; max-width: 400px;">
-				<StyledTextarea v-model="normalValue" placeholder="Enter text..." />
-				<StyledTextarea v-model="filledValue" />
-				<StyledTextarea v-model="errorValue" error />
-				<StyledTextarea placeholder="Disabled..." disabled />
-				<StyledTextarea v-model="readonlyValue" readonly />
-				<StyledTextarea resize="vertical" placeholder="Drag to resize..." />
+				<Textarea v-model="normalValue" placeholder="Enter text..." />
+				<Textarea v-model="filledValue" />
+				<Textarea v-model="errorValue" error />
+				<Textarea placeholder="Disabled..." disabled />
+				<Textarea v-model="readonlyValue" readonly />
+				<Textarea resize="vertical" placeholder="Drag to resize..." />
 			</div>
 		`,
 	}),
diff --git a/standards/frontend/MODALS.md b/standards/frontend/MODALS.md
index bfedfc014..74bb31fd8 100644
--- a/standards/frontend/MODALS.md
+++ b/standards/frontend/MODALS.md
@@ -292,8 +292,8 @@ const { formData } = injectMyModalContext()
 
 <template>
 	<div class="flex flex-col gap-4">
-		<StyledInput v-model="formData.name" label="Name" />
-		<StyledInput v-model="formData.description" label="Description" />
+		<Input v-model="formData.name" label="Name" />
+		<Input v-model="formData.description" label="Description" />
 	</div>
 </template>
 ```