diff --git a/.changeset/curvy-mirrors-play.md b/.changeset/curvy-mirrors-play.md
new file mode 100644
index 000000000..988a91c58
--- /dev/null
+++ b/.changeset/curvy-mirrors-play.md
@@ -0,0 +1,10 @@
+---
+"@studiocms/ui": patch
+---
+
+Applied various changes and fixes to different parts of the UI libary.
+
+- Fixed a CSS leak caused by importing css files instead of having scoped styles
+- Adjusted dropdown helper API for better DX
+- Adjusted modal helper API for better DX
+- Various CSS fixes for different components
diff --git a/.changeset/thin-hounds-happen.md b/.changeset/thin-hounds-happen.md
new file mode 100644
index 000000000..2a495c9fb
--- /dev/null
+++ b/.changeset/thin-hounds-happen.md
@@ -0,0 +1,7 @@
+---
+"@studiocms/dashboard": patch
+"@studiocms/core": patch
+"studiocms": patch
+---
+
+Adjusted strings to account for Astro Studio sunsetting
diff --git a/.vscode/settings.json b/.vscode/settings.json
index cd7fb6d02..450627957 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -4,5 +4,8 @@
     "quickfix.biome": "explicit",
     "source.organizeImports.biome": "explicit"
   },
-  "editor.defaultFormatter": "biomejs.biome"
+  "editor.defaultFormatter": "biomejs.biome",
+  "[mdx]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  }
 }
diff --git a/README.md b/README.md
index d014d794e..53469d191 100644
--- a/README.md
+++ b/README.md
@@ -80,7 +80,6 @@ Steps to get a running playground should be the following:
   Commands to run:
 
   - `pnpm playground:login` - Login your CLI to Astro Studio
-  - `pnpm playground:link` - Link to Astro Studio and Create a new DB for your CMS Installation
   - `pnpm playground:push` - Creates the base tables on the remote database.
   - `pnpm playground:dev` - Starts the Dev server connected to the linked database
 
diff --git a/biome.json b/biome.json
index d5e8a371e..192101cf9 100644
--- a/biome.json
+++ b/biome.json
@@ -31,7 +31,10 @@
   "linter": {
     "enabled": true,
     "rules": {
-      "recommended": true
+      "recommended": true,
+      "suspicious": {
+        "noExplicitAny": "warn"
+      }
     }
   },
   "overrides": [
diff --git a/packages/studiocms/src/index.d.ts b/packages/studiocms/src/index.d.ts
index 3bf880cad..e0c52c8e9 100644
--- a/packages/studiocms/src/index.d.ts
+++ b/packages/studiocms/src/index.d.ts
@@ -3,7 +3,7 @@ import type { StudioCMSPluginOptions } from '@studiocms/core/types';
 import type { AstroIntegration } from 'astro';
 
 /**
- * # Astro Studio CMS Integration
+ * **Astro Studio CMS Integration**
  *
  * A CMS built for Astro by the Astro Community for the Astro Community.
  *
diff --git a/packages/studiocms/src/index.ts b/packages/studiocms/src/index.ts
index 7595d7774..eb180d377 100644
--- a/packages/studiocms/src/index.ts
+++ b/packages/studiocms/src/index.ts
@@ -2,18 +2,6 @@ import { defineStudioCMSConfig, defineStudioCMSPlugin } from '@studiocms/core/li
 import type { StudioCMSPluginOptions } from '@studiocms/core/types';
 import integration from './integration';
 
-/**
- * # Astro Studio CMS Integration
- *
- * A CMS built for Astro by the Astro Community for the Astro Community.
- *
- * Checkout our [GitHub Repo `@astrolicious/studiocms`](https://github.com/astrolicious/studiocms)
- *
- * Check out [Astro-StudioCMS.xyz](https://astro-studiocms.xyz) or the Built-in JSDocs *(Hover Docs like this)* for more information.
- *
- * > **Note: Astro SSR adapters that are configured for Image Optimization will automatically take full control of the Image Optimization Service. Making the `imageService` option in this integration not have any effect.**
- *
- */
 export const studioCMS = integration;
 
 export default studioCMS;
diff --git a/packages/studiocms_core/src/components/Avatar.astro b/packages/studiocms_core/src/components/Avatar.astro
index 59713202b..4114e5b87 100644
--- a/packages/studiocms_core/src/components/Avatar.astro
+++ b/packages/studiocms_core/src/components/Avatar.astro
@@ -33,7 +33,7 @@ const { isLoggedIn, dbUser: userProfile } = Astro.locals;
     ))
 }
 { enabled === false && (
-    <a href="#" aria-disabled="true" title="Please Edit your Database through your Studio Dashboard">
+    <a href="#" aria-disabled="true" title="Please Edit your database through your provider's dashboard">
         <img 
             src={profileImg.src} 
             alt="Authentication Disabled" 
diff --git a/packages/studiocms_core/src/schemas/config/dashboard.ts b/packages/studiocms_core/src/schemas/config/dashboard.ts
index 3295c06a1..910be79c1 100644
--- a/packages/studiocms_core/src/schemas/config/dashboard.ts
+++ b/packages/studiocms_core/src/schemas/config/dashboard.ts
@@ -6,7 +6,7 @@ import { unocssConfigSchema } from './unocss';
 export const dashboardConfigSchema = z
 	.object({
 		/**
-		 * OPTIONAL - This allows the user to enable or disable the Astro Studio CMS Dashboard but still provide all the helper's and utilities to those who are customizing their setup, doing so will disable the dashboard and you will need to manage your content via the Astro Studio Dashboard at http://studio.astro.build
+		 * OPTIONAL - This allows the user to enable or disable the Astro StudioCMS dashboard but still provide all the helper's and utilities to those who are customizing their setup, doing so will disable the dashboard and you will need to manage your content via your database
 		 *
 		 * @default true
 		 */
diff --git a/packages/studiocms_core/src/schemas/config/developer.ts b/packages/studiocms_core/src/schemas/config/developer.ts
index a18bfba17..8e6740812 100644
--- a/packages/studiocms_core/src/schemas/config/developer.ts
+++ b/packages/studiocms_core/src/schemas/config/developer.ts
@@ -13,7 +13,7 @@ export const developerConfigSchema = z
 		/**
 		 * Enable Testing and Demo Mode
 		 *
-		 * This will enable the testing and demo mode for the Astro Studio CMS Dashboard, this will allow you to test the dashboard without having to authenticate. This is useful for testing and demo purposes as it will allow you to see how the dashboard works and looks but disable any changes to the database.
+		 * This will enable the testing and demo mode for the Astro StudioCMS dashboard, this will allow you to test the dashboard without having to authenticate. This is useful for testing and demo purposes as it will allow you to see how the dashboard works and looks but disable any changes to the database.
 		 *
 		 * @default false
 		 */
diff --git a/packages/studiocms_core/src/strings.ts b/packages/studiocms_core/src/strings.ts
index 4fd20121e..35eb823ff 100644
--- a/packages/studiocms_core/src/strings.ts
+++ b/packages/studiocms_core/src/strings.ts
@@ -9,9 +9,9 @@ export const CoreStrings = {
 };
 
 export const DbErrors = {
-	AstroConfigOutput: "Astro Studio CMS is only supported in 'Output: server' SSR mode.",
+	AstroConfigOutput: "Astro StudioCMS is only supported in 'Output: server' SSR mode.",
 	AstroConfigSiteURL:
-		"Astro Studio CMS requires a 'site' configuration in your Astro Config. This can be your domain ( 'https://example.com' ) or localhost ( 'http://localhost:4321' - localhost should only be used during development and should not be used in production).",
+		"Astro StudioCMS requires a 'site' configuration in your Astro Config. This can be your domain ( 'https://example.com' ) or localhost ( 'http://localhost:4321' - localhost should only be used during development and should not be used in production).",
 	DbStartPage:
 		'Start Page is Enabled.  This will be the only page available until you initialize your database and disable the config option forcing this page to be displayed. To get started, visit http://localhost:4321/start/ in your browser to initialize your database. And Setup your installation.',
 	astroDbMissingMessage: 'Astro DB Integration not found in Astro Config',
@@ -39,10 +39,10 @@ export const DashboardStrings = {
 	Setup: 'Setting up StudioCMS Dashboard...',
 	AddIntegrations: 'Adding Dashboard Integrations...',
 	TestAndDemo:
-		'Testing and Demo Mode is Enabled, Authentication will not be required to access dashboard pages.  But you will only be able to edit the database from the Astro Studio Dashboard, https://studio.astro.build/',
+		'Testing and Demo Mode is Enabled, Authentication will not be required to access dashboard pages.  But you will only be able to edit the database directly',
 	AuthEnabled: 'Auth is Enabled, Setting Up...',
 	AuthDisabled:
-		'Auth is Disabled by the User Configuration.  You will only be able to edit the database from the Astro Studio Dashboard, https://studio.astro.build/',
+		'Auth is Disabled by the User Configuration.  You will only be able to edit the database directly',
 	AuthRoutes: 'Setting up Auth Routes...',
 	DashboardEnabled: 'Dashboard is Enabled.',
 	DashboardDisabled:
diff --git a/packages/studiocms_dashboard/src/routes/configuration/admins.astro b/packages/studiocms_dashboard/src/routes/configuration/admins.astro
index 4916c126b..7058a5f8d 100644
--- a/packages/studiocms_dashboard/src/routes/configuration/admins.astro
+++ b/packages/studiocms_dashboard/src/routes/configuration/admins.astro
@@ -87,7 +87,7 @@ if (permissionLevel !== 'admin') {
 
         <div class="py-2">
             <span>
-                Note: To delete admins you can do this from your Astro Studio Dashboard.
+                Note: To delete admins you can do this from your database.
             </span>
         </div>
 
diff --git a/packages/studiocms_robotstxt/src/index.ts b/packages/studiocms_robotstxt/src/index.ts
index 80b32826a..6d0b99d7c 100644
--- a/packages/studiocms_robotstxt/src/index.ts
+++ b/packages/studiocms_robotstxt/src/index.ts
@@ -123,7 +123,7 @@ export interface PolicyOptions {
 	 * [ Optional ] Indicates to the robot that the page URL contains parameters (like UTM tags) that should be ignored when indexing it.
 	 *
 	 * @example
-	 * ```hash
+	 * ```bash
 	 * # for URLs like:
 	 * www.example2.com/index.php?page=1&sid=2564126ebdec301c607e5df
 	 * www.example2.com/index.php?page=1&sid=974017dcd170d6c4a5d76ae
diff --git a/packages/studiocms_ui/src/components/Button.astro b/packages/studiocms_ui/src/components/Button.astro
new file mode 100644
index 000000000..da41519dd
--- /dev/null
+++ b/packages/studiocms_ui/src/components/Button.astro
@@ -0,0 +1,337 @@
+---
+import type { HTMLTag, Polymorphic } from 'astro/types';
+import type { StudioCMSColorway } from '../utils/colors';
+
+type Props<As extends HTMLTag = 'button'> = Omit<Polymorphic<{ as: As }>, 'as'> & {
+	as?: As;
+	size?: 'sm' | 'md' | 'lg';
+	fullWidth?: boolean;
+	color?: StudioCMSColorway;
+	variant?: 'solid' | 'outlined' | 'flat';
+	class?: string;
+	disabled?: boolean;
+};
+
+const {
+	size = 'md',
+	fullWidth = false,
+	color = 'default',
+	variant = 'default',
+	as: As = 'button',
+	class: className,
+	disabled = false,
+	...props
+} = Astro.props;
+---
+
+<As
+  class="button"
+  class:list={[
+    fullWidth && "full",
+    disabled && "disabled",
+    className,
+    size,
+    color,
+    variant,
+  ]}
+  disabled={disabled}
+  {...props}
+>
+  <slot name="start-content" />
+  <slot />
+  <slot name="end-content" />
+</As>
+<style>
+	/* Default Styles */
+	.button {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		text-align: center;
+
+		position: relative;
+
+		/* Move gaps & radii to spacings.css later on */
+		gap: 0.5rem;
+
+		outline: none;
+		border: none;
+
+		font-weight: 400;
+
+		border-radius: 0.5rem;
+
+		transition: all 0.15s ease;
+
+		cursor: pointer;
+
+		/* Default colorway */
+
+		background-color: hsl(var(--default-base));
+		border-color: hsl(var(--border));
+		color: hsl(var(--text-muted));
+
+		min-width: fit-content;
+
+		will-change: transform;
+
+		text-decoration: none;
+	}
+
+	.button.disabled {
+		pointer-events: none;
+		opacity: 0.5;
+	}
+
+	.button.outlined {
+		border-width: 1px;
+		border-style: solid;
+	}
+
+	.button:hover {
+		background-color: hsl(var(--default-hover));
+	}
+
+	.button:active {
+		background-color: hsl(var(--default-active));
+		transform: scale(0.95);
+	}
+
+	.button.flat {
+		background: hsla(var(--default-flat));
+	}
+
+	.button.flat:hover {
+		background: hsla(var(--default-flat-hover));
+	}
+
+	.button.flat:active {
+		background: hsla(var(--default-flat-active));
+	}
+
+	/* Sizes */
+	.button.sm {
+		height: 32px;
+		padding: 0.5rem 0.75rem;
+
+		font-size: 0.825em;
+	}
+
+	.button.md {
+		height: 40px;
+		padding: 0.5rem 0.75rem;
+
+		font-size: 0.875em;
+	}
+
+	.button.lg {
+		height: 48px;
+		padding: 0.75rem 1rem;
+
+		font-size: 1em;
+	}
+
+	/* Primary Colorway */
+	.button.primary {
+		background-color: hsl(var(--primary-base));
+		border-color: hsl(var(--primary-base));
+		color: hsl(var(--text-inverted));
+	}
+
+	.button.primary:hover {
+		background-color: hsl(var(--primary-hover));
+	}
+
+	.button.primary:active {
+		background-color: hsl(var(--primary-active));
+	}
+
+	.button.primary.outlined {
+		background-color: hsl(var(--default-base));
+		color: hsl(var(--text-normal));
+	}
+
+	.button.primary.outlined:hover {
+		background-color: hsl(var(--default-hover));
+	}
+
+	.button.primary.outlined:active {
+		background-color: hsl(var(--default-active));
+	}
+
+	.button.primary.flat {
+		background-color: hsla(var(--primary-flat));
+		color: hsl(259, 96%, 79%);
+	}
+
+	.button.primary.flat:hover {
+		background-color: hsla(var(--primary-flat-hover));
+	}
+
+	.button.primary.flat:active {
+		background-color: hsla(var(--primary-flat-active));
+	}
+
+	/* Success Colorway */
+	.button.success {
+		background-color: hsl(var(--success-base));
+		border-color: hsl(var(--success-base));
+		color: hsl(var(--text-dark));
+	}
+
+	.button.success:hover {
+		background-color: hsl(var(--success-hover));
+	}
+
+	.button.success:active {
+		background-color: hsl(var(--success-active));
+	}
+
+	.button.success.outlined {
+		background-color: hsl(var(--default-base));
+		color: hsl(var(--text-normal));
+	}
+
+	.button.success.outlined:hover {
+		background-color: hsl(var(--default-hover));
+	}
+
+	.button.success.outlined:active {
+		background-color: hsl(var(--default-active));
+	}
+
+	.button.success.flat {
+		background-color: hsla(var(--success-flat));
+		color: hsl(var(--success-base));
+	}
+
+	.button.success.flat:hover {
+		background-color: hsla(var(--success-flat-hover));
+	}
+
+	.button.success.flat:active {
+		background-color: hsla(var(--success-flat-active));
+	}
+
+	/* Warning Colorway */
+	.button.warning {
+		background-color: hsl(var(--warning-base));
+		border-color: hsl(var(--warning-base));
+		color: hsl(var(--text-dark));
+	}
+
+	.button.warning:hover {
+		background-color: hsl(var(--warning-hover));
+	}
+
+	.button.warning:active {
+		background-color: hsl(var(--warning-active));
+	}
+
+	.button.warning.outlined {
+		background-color: hsl(var(--default-base));
+		color: hsl(var(--text-normal));
+	}
+
+	.button.warning.outlined:hover {
+		background-color: hsl(var(--default-hover));
+	}
+
+	.button.warning.outlined:active {
+		background-color: hsl(var(--default-active));
+	}
+
+	.button.warning.flat {
+		background-color: hsla(var(--warning-flat));
+		color: hsl(var(--warning-base));
+	}
+
+	.button.warning.flat:hover {
+		background-color: hsla(var(--warning-flat-hover));
+	}
+
+	.button.warning.flat:active {
+		background-color: hsla(var(--warning-flat-active));
+	}
+
+	/* Danger Colorway */
+	.button.danger {
+		background-color: hsl(var(--danger-base));
+		border-color: hsl(var(--danger-base));
+		color: hsl(var(--text-light));
+	}
+
+	.button.danger:hover {
+		background-color: hsl(var(--danger-hover));
+	}
+
+	.button.danger:active {
+		background-color: hsl(var(--danger-active));
+	}
+
+	.button.danger.outlined {
+		background-color: hsl(var(--default-base));
+		color: hsl(var(--text-normal));
+	}
+
+	.button.danger.outlined:hover {
+		background-color: hsl(var(--default-hover));
+	}
+
+	.button.danger.outlined:active {
+		background-color: hsl(var(--default-active));
+	}
+
+	.button.danger.flat {
+		background-color: hsla(var(--danger-flat));
+		color: hsl(337, 92%, 71%);
+	}
+
+	.button.danger.flat:hover {
+		background-color: hsla(var(--danger-flat-hover));
+	}
+
+	.button.danger.flat:active {
+		background-color: hsla(var(--danger-flat-active));
+	}
+
+	.button.full {
+		width: 100%;
+	}
+
+	[data-theme="light"] {
+		.button.primary.flat {
+			color: hsl(259, 84%, 45%);
+		}
+
+		.button.success.flat {
+			background-color: hsl(var(--success-base), 0.2);
+			color: hsl(143, 59%, 20%);
+		}
+
+		.button.success.flat:hover {
+			background-color: hsla(var(--success-flat-hover));
+		}
+
+		.button.success.flat:active {
+			background-color: hsla(var(--success-flat-active));
+		}
+
+		.button.warning.flat {
+			background-color: hsla(var(--warning-base), 0.2);
+			color: hsl(48, 78%, 20%);
+		}
+
+		.button.warning.flat:hover {
+			background-color: hsla(var(--warning-base), 0.25);
+		}
+
+		.button.warning.flat:active {
+			background-color: hsla(var(--warning-base), 0.4);
+		}
+
+		.button.danger.flat {
+			color: hsl(339, 97%, 29%);
+		}
+	}
+</style>
diff --git a/packages/studiocms_ui/src/components/Button/Button.astro b/packages/studiocms_ui/src/components/Button/Button.astro
deleted file mode 100644
index b69107409..000000000
--- a/packages/studiocms_ui/src/components/Button/Button.astro
+++ /dev/null
@@ -1,45 +0,0 @@
----
-import './Button.css';
-
-import type { HTMLTag, Polymorphic } from 'astro/types';
-import type { StudioCMSColorway } from '../../utils/colors';
-
-type Props<As extends HTMLTag = 'button'> = Omit<Polymorphic<{ as: As }>, 'as'> & {
-	as?: As;
-	size?: 'sm' | 'md' | 'lg';
-	fullWidth?: boolean;
-	color?: StudioCMSColorway;
-	variant?: 'solid' | 'outlined' | 'flat';
-	class?: string;
-	disabled?: boolean;
-};
-
-const {
-	size = 'md',
-	fullWidth = false,
-	color = 'default',
-	variant = 'default',
-	as: As = 'button',
-	class: className,
-	disabled = false,
-	...props
-} = Astro.props;
----
-
-<As
-  class="button"
-  class:list={[
-    fullWidth && "full",
-    disabled && "disabled",
-    className,
-    size,
-    color,
-    variant,
-  ]}
-  disabled={disabled}
-  {...props}
->
-  <slot name="start-content" />
-  <slot />
-  <slot name="end-content" />
-</As>
\ No newline at end of file
diff --git a/packages/studiocms_ui/src/components/Button/Button.css b/packages/studiocms_ui/src/components/Button/Button.css
deleted file mode 100644
index 8484a52b4..000000000
--- a/packages/studiocms_ui/src/components/Button/Button.css
+++ /dev/null
@@ -1,292 +0,0 @@
-/* Default Styles */
-.button {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	text-align: center;
-
-	position: relative;
-
-	/* Move gaps & radii to spacings.css later on */
-	gap: 0.5rem;
-
-	outline: none;
-	border: none;
-
-	font-weight: 400;
-
-	border-radius: 0.5rem;
-
-	transition: all 0.15s ease;
-
-	cursor: pointer;
-
-	/* Default colorway */
-
-	background-color: hsl(var(--default-base));
-	border-color: hsl(var(--border));
-	color: hsl(var(--text-muted));
-
-	min-width: fit-content;
-
-	will-change: transform;
-
-	text-decoration: none;
-}
-
-.button.disabled {
-	pointer-events: none;
-	opacity: 0.5;
-}
-
-.button.outlined {
-	border-width: 1px;
-	border-style: solid;
-}
-
-.button:hover {
-	background-color: hsl(var(--default-hover));
-}
-
-.button:active {
-	background-color: hsl(var(--default-active));
-	transform: scale(0.95);
-}
-
-.button.flat {
-	background: hsla(var(--default-flat));
-}
-
-.button.flat:hover {
-	background: hsla(var(--default-flat-hover));
-}
-
-.button.flat:active {
-	background: hsla(var(--default-flat-active));
-}
-
-/* Sizes */
-.button.sm {
-	height: 32px;
-	padding: 0.5rem 0.75rem;
-
-	font-size: 0.825em;
-}
-
-.button.md {
-	height: 40px;
-	padding: 0.5rem 0.75rem;
-
-	font-size: 0.875em;
-}
-
-.button.lg {
-	height: 48px;
-	padding: 0.75rem 1rem;
-
-	font-size: 1em;
-}
-
-/* Primary Colorway */
-.button.primary {
-	background-color: hsl(var(--primary-base));
-	border-color: hsl(var(--primary-base));
-	color: hsl(var(--text-inverted));
-}
-
-.button.primary:hover {
-	background-color: hsl(var(--primary-hover));
-}
-
-.button.primary:active {
-	background-color: hsl(var(--primary-active));
-}
-
-.button.primary.outlined {
-	background-color: hsl(var(--default-base));
-	color: hsl(var(--text-normal));
-}
-
-.button.primary.outlined:hover {
-	background-color: hsl(var(--default-hover));
-}
-
-.button.primary.outlined:active {
-	background-color: hsl(var(--default-active));
-}
-
-.button.primary.flat {
-	background-color: hsla(var(--primary-flat));
-	color: hsl(259, 96%, 79%);
-}
-
-.button.primary.flat:hover {
-	background-color: hsla(var(--primary-flat-hover));
-}
-
-.button.primary.flat:active {
-	background-color: hsla(var(--primary-flat-active));
-}
-
-/* Success Colorway */
-.button.success {
-	background-color: hsl(var(--success-base));
-	border-color: hsl(var(--success-base));
-	color: hsl(var(--text-dark));
-}
-
-.button.success:hover {
-	background-color: hsl(var(--success-hover));
-}
-
-.button.success:active {
-	background-color: hsl(var(--success-active));
-}
-
-.button.success.outlined {
-	background-color: hsl(var(--default-base));
-	color: hsl(var(--text-normal));
-}
-
-.button.success.outlined:hover {
-	background-color: hsl(var(--default-hover));
-}
-
-.button.success.outlined:active {
-	background-color: hsl(var(--default-active));
-}
-
-.button.success.flat {
-	background-color: hsla(var(--success-flat));
-	color: hsl(var(--success-base));
-}
-
-.button.success.flat:hover {
-	background-color: hsla(var(--success-flat-hover));
-}
-
-.button.success.flat:active {
-	background-color: hsla(var(--success-flat-active));
-}
-
-/* Warning Colorway */
-.button.warning {
-	background-color: hsl(var(--warning-base));
-	border-color: hsl(var(--warning-base));
-	color: hsl(var(--text-dark));
-}
-
-.button.warning:hover {
-	background-color: hsl(var(--warning-hover));
-}
-
-.button.warning:active {
-	background-color: hsl(var(--warning-active));
-}
-
-.button.warning.outlined {
-	background-color: hsl(var(--default-base));
-	color: hsl(var(--text-normal));
-}
-
-.button.warning.outlined:hover {
-	background-color: hsl(var(--default-hover));
-}
-
-.button.warning.outlined:active {
-	background-color: hsl(var(--default-active));
-}
-
-.button.warning.flat {
-	background-color: hsla(var(--warning-flat));
-	color: hsl(var(--warning-base));
-}
-
-.button.warning.flat:hover {
-	background-color: hsla(var(--warning-flat-hover));
-}
-
-.button.warning.flat:active {
-	background-color: hsla(var(--warning-flat-active));
-}
-
-/* Danger Colorway */
-.button.danger {
-	background-color: hsl(var(--danger-base));
-	border-color: hsl(var(--danger-base));
-	color: hsl(var(--text-light));
-}
-
-.button.danger:hover {
-	background-color: hsl(var(--danger-hover));
-}
-
-.button.danger:active {
-	background-color: hsl(var(--danger-active));
-}
-
-.button.danger.outlined {
-	background-color: hsl(var(--default-base));
-	color: hsl(var(--text-normal));
-}
-
-.button.danger.outlined:hover {
-	background-color: hsl(var(--default-hover));
-}
-
-.button.danger.outlined:active {
-	background-color: hsl(var(--default-active));
-}
-
-.button.danger.flat {
-	background-color: hsla(var(--danger-flat));
-	color: hsl(337, 92%, 71%);
-}
-
-.button.danger.flat:hover {
-	background-color: hsla(var(--danger-flat-hover));
-}
-
-.button.danger.flat:active {
-	background-color: hsla(var(--danger-flat-active));
-}
-
-.button.full {
-	width: 100%;
-}
-
-[data-theme="light"] {
-	.button.primary.flat {
-		color: hsl(259, 84%, 45%);
-	}
-
-	.button.success.flat {
-		background-color: hsl(var(--success-base), 0.2);
-		color: hsl(143, 59%, 20%);
-	}
-
-	.button.success.flat:hover {
-		background-color: hsla(var(--success-flat-hover));
-	}
-
-	.button.success.flat:active {
-		background-color: hsla(var(--success-flat-active));
-	}
-
-	.button.warning.flat {
-		background-color: hsla(var(--warning-base), 0.2);
-		color: hsl(48, 78%, 20%);
-	}
-
-	.button.warning.flat:hover {
-		background-color: hsla(var(--warning-base), 0.25);
-	}
-
-	.button.warning.flat:active {
-		background-color: hsla(var(--warning-base), 0.4);
-	}
-
-	.button.danger.flat {
-		color: hsl(339, 97%, 29%);
-	}
-}
diff --git a/packages/studiocms_ui/src/components/Card.astro b/packages/studiocms_ui/src/components/Card.astro
new file mode 100644
index 000000000..140b9d6be
--- /dev/null
+++ b/packages/studiocms_ui/src/components/Card.astro
@@ -0,0 +1,62 @@
+---
+import type { HTMLTag, Polymorphic } from 'astro/types';
+
+type Props<As extends HTMLTag = 'div'> = Omit<Polymorphic<{ as: As }>, 'as'> & {
+	as?: As;
+	class?: string;
+	fullWidth?: boolean;
+	fullHeight?: boolean;
+};
+
+const { as: As = 'div', class: className, fullWidth, fullHeight, ...props } = Astro.props;
+---
+<As class="card" {...props} class:list={[fullWidth && "full-w", fullHeight && "full-h", className]}>
+  <div class="card-header">
+    <slot name="header" />
+  </div>
+  <div class="card-body">
+    <slot />
+  </div>
+  <div class="card-footer">
+    <slot name="footer" />
+  </div>
+</As>
+<style>
+  .card {
+    border: 1px solid hsl(var(--border));
+    background-color: hsl(var(--background-base));
+    border-radius: .5rem;
+    width: fit-content;
+    height: fit-content;
+  }
+
+  .card.full-w {
+    width: 100%;
+  }
+
+  .card.full-h {
+    height: 100%;
+  }
+
+  .card-header:has(*) {
+    padding: 1rem 1rem 0rem 1rem;
+    * {
+      margin: 0;
+    }
+  }
+
+  .card-body {
+    padding: 1rem;
+  }
+
+  .card-footer:has(*) {
+    border-top: 1px solid hsl(var(--border));
+    padding: 1rem;
+  }
+
+  @media screen and (max-width: 840px) {
+    .card {
+      width: 100%;
+    }
+  }
+</style>
diff --git a/packages/studiocms_ui/src/components/Card/Card.astro b/packages/studiocms_ui/src/components/Card/Card.astro
deleted file mode 100644
index 83fb87b4a..000000000
--- a/packages/studiocms_ui/src/components/Card/Card.astro
+++ /dev/null
@@ -1,25 +0,0 @@
----
-import './Card.css';
-
-import type { HTMLTag, Polymorphic } from 'astro/types';
-
-type Props<As extends HTMLTag = 'div'> = Omit<Polymorphic<{ as: As }>, 'as'> & {
-	as?: As;
-	class?: string;
-	fullWidth?: boolean;
-	fullHeight?: boolean;
-};
-
-const { as: As = 'div', class: className, fullWidth, fullHeight, ...props } = Astro.props;
----
-<As class="card" {...props} class:list={[fullWidth && "full-w", fullHeight && "full-h", className]}>
-  <div class="card-header">
-    <slot name="header" />
-  </div>
-  <div class="card-body">
-    <slot />
-  </div>
-  <div class="card-footer">
-    <slot name="footer" />
-  </div>
-</As>
\ No newline at end of file
diff --git a/packages/studiocms_ui/src/components/Card/Card.css b/packages/studiocms_ui/src/components/Card/Card.css
deleted file mode 100644
index 110bbe87c..000000000
--- a/packages/studiocms_ui/src/components/Card/Card.css
+++ /dev/null
@@ -1,37 +0,0 @@
-.card {
-	border: 1px solid hsl(var(--border));
-	background-color: hsl(var(--background-base));
-	border-radius: .5rem;
-	width: fit-content;
-	height: fit-content;
-}
-
-.card.full-w {
-	width: 100%;
-}
-
-.card.full-h {
-	height: 100%;
-}
-
-.card-header:has(*) {
-	padding: 1rem 1rem 0rem 1rem;
-	* {
-		margin: 0;
-	}
-}
-
-.card-body {
-	padding: 1rem;
-}
-
-.card-footer:has(*) {
-	border-top: 1px solid hsl(var(--border));
-	padding: 1rem;
-}
-
-@media screen and (max-width: 840px) {
-	.card {
-		width: 100%;
-	}
-}
diff --git a/packages/studiocms_ui/src/components/Center.astro b/packages/studiocms_ui/src/components/Center.astro
new file mode 100644
index 000000000..12ccf9d71
--- /dev/null
+++ b/packages/studiocms_ui/src/components/Center.astro
@@ -0,0 +1,16 @@
+<!-- This was made for Jumper, to keep him happy <3 -->
+<div class="center">
+  <slot />
+</div>
+<style>
+  .center {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    width: 100%;
+    height: 100%;
+
+    text-align: center;
+  }
+</style>
diff --git a/packages/studiocms_ui/src/components/Center/Center.astro b/packages/studiocms_ui/src/components/Center/Center.astro
deleted file mode 100644
index 8f4564cd7..000000000
--- a/packages/studiocms_ui/src/components/Center/Center.astro
+++ /dev/null
@@ -1,7 +0,0 @@
----
-import './Center.css';
----
-<!-- This was made for Jumper, to keep him happy <3 -->
-<div class="center">
-  <slot />
-</div>
\ No newline at end of file
diff --git a/packages/studiocms_ui/src/components/Center/Center.css b/packages/studiocms_ui/src/components/Center/Center.css
deleted file mode 100644
index df55d5ec0..000000000
--- a/packages/studiocms_ui/src/components/Center/Center.css
+++ /dev/null
@@ -1,10 +0,0 @@
-.center {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-
-	width: 100%;
-	height: 100%;
-
-	text-align: center;
-}
diff --git a/packages/studiocms_ui/src/components/Checkbox.astro b/packages/studiocms_ui/src/components/Checkbox.astro
new file mode 100644
index 000000000..d0048dd9c
--- /dev/null
+++ b/packages/studiocms_ui/src/components/Checkbox.astro
@@ -0,0 +1,181 @@
+---
+import Icon from '../utils/Icon.astro';
+import type { StudioCMSColorway } from '../utils/colors';
+import { generateID } from '../utils/generateID';
+
+type Props = {
+	label: string;
+	size?: 'sm' | 'md' | 'lg';
+	color?: StudioCMSColorway;
+	defaultChecked?: boolean;
+	disabled?: boolean;
+	name?: string;
+	isRequired?: boolean;
+};
+
+const {
+	size = 'md',
+	color = 'default',
+	defaultChecked,
+	disabled,
+	name = generateID('checkbox'),
+	label,
+	isRequired,
+} = Astro.props;
+
+const iconSizes = {
+	sm: 14,
+	md: 16,
+	lg: 24,
+};
+---
+<label 
+  class="checkmark-label"
+  for={name}
+  class:list={[
+    disabled && "disabled",
+    color,
+    size,
+  ]}
+>
+  <div class="checkmark-container">
+    <Icon
+      name='checkmark'
+      class={'checkmark'}
+      width={iconSizes[size]}
+      height={iconSizes[size]}
+    />
+    <input
+      type="checkbox"
+      name={name}
+      id={name}
+      checked={defaultChecked}
+      disabled={disabled}
+      required={isRequired}
+      class="checkbox"
+    />
+  </div>
+  <span>
+    {label} <span class="req-star">{isRequired && "*"}</span>
+  </span>
+</label>
+<style>
+  .checkmark-label {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: .5rem;
+    position: relative;
+    margin: .25rem 0;
+  }
+
+  .checkmark-label.disabled {
+    opacity: 0.5;
+    pointer-events: none;
+    color: hsl(var(--text-muted));
+  }
+
+  .checkmark-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: hsl(var(--default-base));
+    border: 2px solid hsl(var(--default-base));
+    border-radius: .5rem;
+    cursor: pointer;
+    transition: all .15s ease;
+  }
+
+  .checkmark-label:hover .checkmark-container {
+    background-color: hsl(var(--default-hover));
+  }
+
+  .checkmark-label:active .checkmark-container {
+    background-color: hsl(var(--default-active));
+    scale: 0.9;
+  }
+
+  .checkmark-label.sm {
+    font-size: .875em;
+  }
+
+  .checkmark-label.sm .checkmark-container {
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+
+  .checkmark-label.md .checkmark-container {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+
+  .checkmark-label.lg {
+    font-size: 1.125em;
+  }
+
+  .checkmark-label.lg .checkmark-container {
+    width: 1.75rem;
+    height: 1.75rem;
+  }
+
+  .primary .checkmark-container:has(.checkbox:checked) {
+    border-color: hsl(var(--primary-base));
+    background-color: hsl(var(--primary-base));
+  }
+
+  .success .checkmark-container:has(.checkbox:checked) {
+    border-color: hsl(var(--success-base));
+    background-color: hsl(var(--success-base));
+  }
+
+  .warning .checkmark-container:has(.checkbox:checked) {
+    border-color: hsl(var(--warning-base));
+    background-color: hsl(var(--warning-base));
+  }
+
+  .danger .checkmark-container:has(.checkbox:checked) {
+    border-color: hsl(var(--danger-base));
+    background-color: hsl(var(--danger-base));
+  }
+
+  .req-star {
+    color: hsl(var(--danger-base));
+    font-weight: 700;
+  }
+
+  .checkbox {
+    width: 0;
+    height: 0;
+    visibility: hidden;
+    opacity: 0;
+    margin: 0;
+  }
+</style>
+<style is:global>
+  .checkmark polyline {
+    transition: all .15s ease;
+    color: hsl(var(--text-normal));
+  }
+
+  .primary .checkmark polyline {
+    color: hsl(var(--text-inverted));
+  }
+
+  .success .checkmark polyline {
+    color: hsl(var(--text-dark));
+  }
+
+  .warning .checkmark polyline {
+    color: hsl(var(--text-dark));
+  }
+
+  .danger .checkmark polyline {
+    color: hsl(var(--text-light));
+  }
+
+  .checkmark-container:has(.checkbox:checked) {
+    .checkmark polyline {
+      stroke-dashoffset: 44;
+    }
+  }
+</style>
diff --git a/packages/studiocms_ui/src/components/Checkbox/Checkbox.astro b/packages/studiocms_ui/src/components/Checkbox/Checkbox.astro
deleted file mode 100644
index 5c28ae08e..000000000
--- a/packages/studiocms_ui/src/components/Checkbox/Checkbox.astro
+++ /dev/null
@@ -1,63 +0,0 @@
----
-import './Checkbox.css';
-
-import Icon from '../../utils/Icon.astro';
-import type { StudioCMSColorway } from '../../utils/colors';
-import { generateID } from '../../utils/generateID';
-
-type Props = {
-	label: string;
-	size?: 'sm' | 'md' | 'lg';
-	color?: StudioCMSColorway;
-	defaultChecked?: boolean;
-	disabled?: boolean;
-	name?: string;
-	isRequired?: boolean;
-};
-
-const {
-	size = 'md',
-	color = 'default',
-	defaultChecked,
-	disabled,
-	name = generateID('checkbox'),
-	label,
-	isRequired,
-} = Astro.props;
-
-const iconSizes = {
-	sm: 14,
-	md: 16,
-	lg: 24,
-};
----
-<label 
-  class="checkmark-label"
-  for={name}
-  class:list={[
-    disabled && "disabled",
-    color,
-    size,
-  ]}
->
-  <div class="checkmark-container">
-    <Icon
-      name='checkmark'
-      class={'checkmark'}
-      width={iconSizes[size]}
-      height={iconSizes[size]}
-    />
-    <input
-      type="checkbox"
-      name={name}
-      id={name}
-      checked={defaultChecked}
-      disabled={disabled}
-      required={isRequired}
-      class="checkbox"
-    />
-  </div>
-  <span>
-    {label} <span class="req-star">{isRequired && "*"}</span>
-  </span>
-</label>
\ No newline at end of file
diff --git a/packages/studiocms_ui/src/components/Checkbox/Checkbox.css b/packages/studiocms_ui/src/components/Checkbox/Checkbox.css
deleted file mode 100644
index 64e3dbe42..000000000
--- a/packages/studiocms_ui/src/components/Checkbox/Checkbox.css
+++ /dev/null
@@ -1,117 +0,0 @@
-.checkmark-label {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	gap: .5rem;
-	position: relative;
-	margin: .25rem 0;
-}
-
-.checkmark-label.disabled {
-	opacity: 0.5;
-	pointer-events: none;
-	color: hsl(var(--text-muted));
-}
-
-.checkmark-container {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	background-color: hsl(var(--default-base));
-	border: 2px solid hsl(var(--default-base));
-	border-radius: .5rem;
-	cursor: pointer;
-	transition: all .15s ease;
-}
-
-.checkmark-label:hover .checkmark-container {
-	background-color: hsl(var(--default-hover));
-}
-
-.checkmark-label:active .checkmark-container {
-	background-color: hsl(var(--default-active));
-	scale: 0.9;
-}
-
-.checkmark-label.sm {
-	font-size: .875em;
-}
-
-.checkmark-label.sm .checkmark-container {
-	width: 1.25rem;
-	height: 1.25rem;
-}
-
-.checkmark-label.md .checkmark-container {
-	width: 1.5rem;
-	height: 1.5rem;
-}
-
-.checkmark-label.lg {
-	font-size: 1.125em;
-}
-
-.checkmark-label.lg .checkmark-container {
-	width: 1.75rem;
-	height: 1.75rem;
-}
-
-.primary .checkmark-container:has(.checkbox:checked) {
-	border-color: hsl(var(--primary-base));
-	background-color: hsl(var(--primary-base));
-}
-
-.success .checkmark-container:has(.checkbox:checked) {
-	border-color: hsl(var(--success-base));
-	background-color: hsl(var(--success-base));
-}
-
-.warning .checkmark-container:has(.checkbox:checked) {
-	border-color: hsl(var(--warning-base));
-	background-color: hsl(var(--warning-base));
-}
-
-.danger .checkmark-container:has(.checkbox:checked) {
-	border-color: hsl(var(--danger-base));
-	background-color: hsl(var(--danger-base));
-}
-
-.req-star {
-	color: hsl(var(--danger-base));
-	font-weight: 700;
-}
-
-.checkbox {
-	width: 0;
-	height: 0;
-	visibility: hidden;
-	opacity: 0;
-	margin: 0;
-}
-
-.checkmark polyline {
-	transition: all .15s ease;
-	color: hsl(var(--text-normal));
-}
-
-.primary .checkmark polyline {
-	color: hsl(var(--text-inverted));
-}
-
-.success .checkmark polyline {
-	color: hsl(var(--text-dark));
-}
-
-.warning .checkmark polyline {
-	color: hsl(var(--text-dark));
-}
-
-.danger .checkmark polyline {
-	color: hsl(var(--text-light));
-}
-
-.checkmark-container:has(.checkbox:checked) {
-	.checkmark polyline {
-		stroke-dashoffset: 44;
-	}
-}
diff --git a/packages/studiocms_ui/src/components/Divider.astro b/packages/studiocms_ui/src/components/Divider.astro
new file mode 100644
index 000000000..3b7e179d3
--- /dev/null
+++ b/packages/studiocms_ui/src/components/Divider.astro
@@ -0,0 +1,33 @@
+<div class="divide-container">
+  <div class="line" />
+  <div class="content">
+    <slot />
+  </div>
+</div>
+<style>
+  .divide-container {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+  }
+
+  .line {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 100%;
+    height: 1px;
+    background-color: hsl(var(--border));
+    z-index: 1;
+  }
+
+  .content {
+    background-color: hsl(var(--background-base));
+    padding: .25rem .5rem;
+    z-index: 2;
+    color: hsl(var(--text-muted));
+  }
+</style>
diff --git a/packages/studiocms_ui/src/components/Divider/Divider.astro b/packages/studiocms_ui/src/components/Divider/Divider.astro
deleted file mode 100644
index 215f711ab..000000000
--- a/packages/studiocms_ui/src/components/Divider/Divider.astro
+++ /dev/null
@@ -1,9 +0,0 @@
----
-import './Divider.css';
----
-<div class="divide-container">
-  <div class="line" />
-  <div class="content">
-    <slot />
-  </div>
-</div>
\ No newline at end of file
diff --git a/packages/studiocms_ui/src/components/Divider/Divider.css b/packages/studiocms_ui/src/components/Divider/Divider.css
deleted file mode 100644
index 921a114b7..000000000
--- a/packages/studiocms_ui/src/components/Divider/Divider.css
+++ /dev/null
@@ -1,25 +0,0 @@
-.divide-container {
-	display: flex;
-	width: 100%;
-	align-items: center;
-	justify-content: center;
-	position: relative;
-}
-
-.line {
-	position: absolute;
-	top: 50%;
-	left: 50%;
-	transform: translate(-50%, -50%);
-	width: 100%;
-	height: 1px;
-	background-color: hsl(var(--border));
-	z-index: 1;
-}
-
-.content {
-	background-color: hsl(var(--background-base));
-	padding: .25rem .5rem;
-	z-index: 2;
-	color: hsl(var(--text-muted));
-}
diff --git a/packages/studiocms_ui/src/components/Dropdown/Dropdown.astro b/packages/studiocms_ui/src/components/Dropdown/Dropdown.astro
index 96e6525a9..565a1eea7 100644
--- a/packages/studiocms_ui/src/components/Dropdown/Dropdown.astro
+++ b/packages/studiocms_ui/src/components/Dropdown/Dropdown.astro
@@ -1,6 +1,4 @@
 ---
-import './Dropdown.css';
-
 import type { StudioCMSColorway } from '../../utils/colors';
 
 type Option = {
@@ -44,4 +42,183 @@ const { options, disabled = false, align = 'center', id, triggerOn = 'left' } =
       </li>
     ))}
   </ul>
-</div>
\ No newline at end of file
+</div>
+<style>
+  .dropdown-toggle {
+    width: fit-content;
+  }
+
+  .dropdown-container {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: .25rem;
+  }
+
+  .dropdown {
+    position: absolute;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    flex-direction: column;
+    border-radius: .5rem;
+    background-color: hsl(var(--background-step-2));
+    overflow: hidden;
+    top: calc(100% + .25rem);
+    left: 0;
+    z-index: 90;
+    min-width: 200px;
+    max-width: min-content;
+
+    height: 0;
+    border: none;
+    pointer-events: none;
+
+    animation: pop-down .15s ease forwards;
+
+    box-shadow: 0px 4px 8px hsl(var(--shadow), 0.5);
+  }
+
+  @keyframes pop-up {
+    0% {
+      scale: 0.9;
+      opacity: 0;
+    }
+
+    100% {
+      scale: 1;
+      opacity: 1;
+    }
+  }
+
+  @keyframes pop-down {
+    0% {
+      scale: 1;
+      height: auto;
+      border: initial;
+      pointer-events: all;
+      top: auto;
+      bottom: auto;
+      border: 1px solid hsl(var(--border));
+      opacity: 1;
+    }
+
+    99.9999% {
+      scale: 0.9;
+      height: auto;
+      border: initial;
+      pointer-events: all;
+      bottom: initial;
+      top: auto;
+      bottom: auto;
+      border: 1px solid hsl(var(--border));
+      opacity: 0;
+    }
+
+    100% {
+      height: 0;
+      border: none;
+      pointer-events: none;
+    }
+  }
+
+  .dropdown.active {
+    display: flex;
+    border: 1px solid hsl(var(--border));
+    height: auto;
+    pointer-events: all;
+
+    animation: pop-up .15s ease forwards;
+  }
+
+  .dropdown.below {
+    top: calc(100% + .25rem) !important;
+    bottom: auto;
+
+    transform-origin: top center;
+  }
+
+  .dropdown.below.start {
+    transform-origin: top left;
+  }
+
+  .dropdown.below.end {
+    transform-origin: top right;
+  }
+
+  .dropdown.above {
+    top: auto;
+    bottom: calc(100% + .25rem) !important;
+    transform-origin: bottom center;
+  }
+
+  .dropdown.above.start {
+    transform-origin: bottom left;
+  }
+
+  .dropdown.above.end {
+    transform-origin: bottom right;
+  }
+
+  .dropdown-option {
+    padding: .5rem .75rem;
+    cursor: pointer;
+    font-size: .975em;
+    transition: all .15s ease;
+    display: flex;
+    flex-direction: row;
+    gap: .5rem;
+    align-items: center;
+    width: 100%;
+    white-space: normal;
+  }
+
+  .dropdown-option:hover {
+    background-color: hsl(var(--background-step-3));
+  }
+
+  .dropdown-option.primary {
+    color: hsl(var(--primary-base));
+  }
+
+  .dropdown-option.primary:hover {
+    background-color: hsl(var(--primary-base));
+    color: hsl(var(--text-inverted));
+  }
+
+  .dropdown-option.success {
+    color: hsl(var(--success-base));
+  }
+
+  .dropdown-option.success:hover {
+    background-color: hsl(var(--success-base));
+    color: hsl(var(--text-dark));
+  }
+
+  .dropdown-option.warning {
+    color: hsl(var(--warning-base));
+  }
+
+  .dropdown-option.warning:hover {
+    background-color: hsl(var(--warning-base));
+    color: hsl(var(--text-dark));
+  }
+
+  .dropdown-option.danger {
+    color: hsl(var(--danger-base));
+  }
+
+  .dropdown-option.danger:hover {
+    background-color: hsl(var(--danger-base));
+    color: hsl(var(--text-light));
+  }
+
+  .dropdown-option.disabled {
+    pointer-events: none;
+    color: hsl(var(--text-muted));
+  }
+
+  .dropdown-option.end {
+    justify-content: space-between;
+  }
+</style>
diff --git a/packages/studiocms_ui/src/components/Dropdown/Dropdown.css b/packages/studiocms_ui/src/components/Dropdown/Dropdown.css
deleted file mode 100644
index 8266b15c0..000000000
--- a/packages/studiocms_ui/src/components/Dropdown/Dropdown.css
+++ /dev/null
@@ -1,183 +0,0 @@
-.dropdown-toggle {
-	width: fit-content;
-}
-
-.dropdown-container {
-	position: relative;
-	display: flex;
-	flex-direction: column;
-	gap: .25rem;
-}
-
-.dropdown {
-	position: absolute;
-	list-style: none;
-	margin: 0;
-	padding: 0;
-	flex-direction: column;
-	border-radius: .5rem;
-	background-color: hsl(var(--background-step-2));
-	overflow: hidden;
-	top: calc(100% + .25rem);
-	left: 0;
-	z-index: 90;
-	min-width: 200px;
-	max-width: min-content;
-
-	height: 0;
-	border: none;
-	pointer-events: none;
-
-	animation: pop-down .15s ease forwards;
-
-	box-shadow: 0px 4px 8px hsl(var(--shadow), 0.5);
-}
-
-.icon {
-	width: 20px;
-	height: 20px;
-	min-width: 20px;
-}
-
-@keyframes pop-up {
-	0% {
-		scale: 0.9;
-		opacity: 0;
-	}
-
-	100% {
-		scale: 1;
-		opacity: 1;
-	}
-}
-
-@keyframes pop-down {
-	0% {
-		scale: 1;
-		height: auto;
-		border: initial;
-		pointer-events: all;
-		top: auto;
-		bottom: auto;
-		border: 1px solid hsl(var(--border));
-		opacity: 1;
-	}
-
-	99.9999% {
-		scale: 0.9;
-		height: auto;
-		border: initial;
-		pointer-events: all;
-		bottom: initial;
-		top: auto;
-		bottom: auto;
-		border: 1px solid hsl(var(--border));
-		opacity: 0;
-	}
-
-	100% {
-		height: 0;
-		border: none;
-		pointer-events: none;
-	}
-}
-
-.dropdown.active {
-	display: flex;
-	border: 1px solid hsl(var(--border));
-	height: auto;
-	pointer-events: all;
-
-	animation: pop-up .15s ease forwards;
-}
-
-.dropdown.below {
-	top: calc(100% + .25rem) !important;
-	bottom: auto;
-
-	transform-origin: top center;
-}
-
-.dropdown.below.start {
-	transform-origin: top left;
-}
-
-.dropdown.below.end {
-	transform-origin: top right;
-}
-
-.dropdown.above {
-	top: auto;
-	bottom: calc(100% + .25rem) !important;
-	transform-origin: bottom center;
-}
-
-.dropdown.above.start {
-	transform-origin: bottom left;
-}
-
-.dropdown.above.end {
-	transform-origin: bottom right;
-}
-
-.dropdown-option {
-	padding: .75rem;
-	cursor: pointer;
-	font-size: .975em;
-	transition: all .15s ease;
-	display: flex;
-	flex-direction: row;
-	gap: .5rem;
-	align-items: center;
-	width: 100%;
-	white-space: normal;
-}
-
-.dropdown-option:hover {
-	background-color: hsl(var(--background-step-3));
-}
-
-.dropdown-option.primary {
-	color: hsl(var(--primary-base));
-}
-
-.dropdown-option.primary:hover {
-	background-color: hsl(var(--primary-base));
-	color: hsl(var(--text-inverted));
-}
-
-.dropdown-option.success {
-	color: hsl(var(--success-base));
-}
-
-.dropdown-option.success:hover {
-	background-color: hsl(var(--success-base));
-	color: hsl(var(--text-dark));
-}
-
-.dropdown-option.warning {
-	color: hsl(var(--warning-base));
-}
-
-.dropdown-option.warning:hover {
-	background-color: hsl(var(--warning-base));
-	color: hsl(var(--text-dark));
-}
-
-.dropdown-option.danger {
-	color: hsl(var(--danger-base));
-}
-
-.dropdown-option.danger:hover {
-	background-color: hsl(var(--danger-base));
-	color: hsl(var(--text-light));
-}
-
-.dropdown-option.disabled {
-	pointer-events: none;
-	color: hsl(var(--text-muted));
-}
-
-.dropdown-option.end {
-	justify-content: space-between;
-}
diff --git a/packages/studiocms_ui/src/components/Dropdown/dropdown.ts b/packages/studiocms_ui/src/components/Dropdown/dropdown.ts
index d792cc695..7fe9efc14 100644
--- a/packages/studiocms_ui/src/components/Dropdown/dropdown.ts
+++ b/packages/studiocms_ui/src/components/Dropdown/dropdown.ts
@@ -1,6 +1,6 @@
 class DropdownHelper {
 	container: HTMLDivElement;
-	toggle: HTMLDivElement;
+	toggleEl: HTMLDivElement;
 	dropdown: HTMLUListElement;
 
 	alignment: 'start' | 'center' | 'end';
@@ -17,25 +17,25 @@ class DropdownHelper {
 		this.alignment = this.container.dataset.align as 'start' | 'center' | 'end';
 		this.triggerOn = this.container.dataset.trigger as 'left' | 'right' | 'both';
 
-		this.toggle = document.getElementById(`${id}-toggle-btn`) as HTMLDivElement;
+		this.toggleEl = document.getElementById(`${id}-toggle-btn`) as HTMLDivElement;
 		this.dropdown = document.getElementById(`${id}-dropdown`) as HTMLUListElement;
 
 		if (this.triggerOn === 'left') {
-			this.toggle.addEventListener('click', this.toggleDropdown);
+			this.toggleEl.addEventListener('click', this.toggle);
 		} else if (this.triggerOn === 'both') {
-			this.toggle.addEventListener('click', this.toggleDropdown);
-			this.toggle.addEventListener('contextmenu', (e) => {
+			this.toggleEl.addEventListener('click', this.toggle);
+			this.toggleEl.addEventListener('contextmenu', (e) => {
 				e.preventDefault();
-				this.toggleDropdown();
+				this.toggle();
 			});
 		} else {
-			this.toggle.addEventListener('contextmenu', (e) => {
+			this.toggleEl.addEventListener('contextmenu', (e) => {
 				e.preventDefault();
-				this.toggleDropdown();
+				this.toggle();
 			});
 		}
 
-		window.addEventListener('scroll', this.hideDropdown);
+		window.addEventListener('scroll', this.hide);
 
 		this.hideOnClickOutside(this.container);
 
@@ -46,11 +46,11 @@ class DropdownHelper {
 		const dropdownOpts = this.dropdown.querySelectorAll('li');
 
 		for (const opt of dropdownOpts) {
-			opt.removeEventListener('click', this.hideDropdown);
+			opt.removeEventListener('click', this.hide);
 
 			opt.addEventListener('click', () => {
 				func(opt.dataset.value || '');
-				this.hideDropdown();
+				this.hide();
 			});
 		}
 	};
@@ -59,16 +59,27 @@ class DropdownHelper {
 		const dropdownOpts = this.dropdown.querySelectorAll('li');
 
 		for (const opt of dropdownOpts) {
-			opt.addEventListener('click', this.hideDropdown);
+			opt.addEventListener('click', this.hide);
 		}
 	};
 
-	public toggleDropdown = () => {
+	public toggle = () => {
 		if (this.active) {
-			this.hideDropdown();
+			this.hide();
 			return;
 		}
 
+		this.show();
+	};
+
+	public hide = () => {
+		this.dropdown.classList.remove('active');
+		this.active = false;
+
+		setTimeout(() => this.dropdown.classList.remove('above', 'below'), 200);
+	};
+
+	public show = () => {
 		const isMobile = window.matchMedia('screen and (max-width: 840px)').matches;
 
 		const {
@@ -79,7 +90,7 @@ class DropdownHelper {
 			x,
 			y,
 			height,
-		} = this.toggle.getBoundingClientRect();
+		} = this.toggleEl.getBoundingClientRect();
 		const { width: dropdownWidth } = this.dropdown.getBoundingClientRect();
 
 		const optionHeight = 44;
@@ -102,7 +113,6 @@ class DropdownHelper {
 		this.active = true;
 
 		if (isMobile) {
-			console.log('match');
 			this.dropdown.style.maxWidth = `${parentWidth}px`;
 			this.dropdown.style.minWidth = 'unset';
 			this.dropdown.style.width = `${parentWidth}px`;
@@ -129,20 +139,13 @@ class DropdownHelper {
 		}
 	};
 
-	public hideDropdown = () => {
-		this.dropdown.classList.remove('active');
-		this.active = false;
-
-		setTimeout(() => this.dropdown.classList.remove('above', 'below'), 200);
-	};
-
 	private hideOnClickOutside = (element: HTMLElement) => {
 		const outsideClickListener = (event: MouseEvent) => {
 			if (!event.target) return;
 
 			if (!element.contains(event.target as Node) && isVisible(element) && this.active === true) {
 				// or use: event.target.closest(selector) === null
-				this.hideDropdown();
+				this.hide();
 			}
 		};
 
diff --git a/packages/studiocms_ui/src/components/Dropdown/index.ts b/packages/studiocms_ui/src/components/Dropdown/index.ts
new file mode 100644
index 000000000..3ca32e860
--- /dev/null
+++ b/packages/studiocms_ui/src/components/Dropdown/index.ts
@@ -0,0 +1,2 @@
+export { default as Dropdown } from './Dropdown.astro';
+export { DropdownHelper } from './dropdown';
diff --git a/packages/studiocms_ui/src/components/Input.astro b/packages/studiocms_ui/src/components/Input.astro
new file mode 100644
index 000000000..e9623b025
--- /dev/null
+++ b/packages/studiocms_ui/src/components/Input.astro
@@ -0,0 +1,89 @@
+---
+import { generateID } from '../utils/generateID';
+
+type Props = {
+	label?: string;
+	type?: 'text' | 'password';
+	placeholder?: string;
+	isRequired?: boolean;
+	name?: string;
+	disabled?: boolean;
+	defaultValue?: string;
+	class?: string;
+};
+
+const {
+	label,
+	placeholder,
+	name = generateID('input'),
+	type = 'text',
+	defaultValue,
+	isRequired = false,
+	disabled = false,
+	class: className,
+} = Astro.props;
+---
+
+<label for={name} class="input-label" class:list={[disabled && "disabled", className]}>
+  <span class="label">
+    {label} <span class="req-star">{isRequired && "*"}</span>
+  </span>
+  <input
+    placeholder={placeholder}
+    name={name}
+    id={name}
+    type={type}
+    class="input"
+    required={isRequired}
+    disabled={disabled}
+    value={defaultValue}
+  />
+</label>
+<style>
+	.input-label {
+		width: 100%;
+		display: flex;
+		flex-direction: column;
+		gap: .25rem;
+		margin-top: .5rem;
+	}
+
+	.input-label.disabled {
+		opacity: 0.5;
+		pointer-events: none;
+		color: hsl(var(--text-muted));
+	}
+
+	.label {
+		font-size: 14px;
+	}
+
+	.input {
+		padding: .5rem 1rem;
+		border-radius: 8px;
+		border: 1px solid hsl(var(--border));
+		background: hsl(var(--background-step-2));
+		color: hsl(var(--text-normal));
+		transition: all .15s ease;
+	}
+
+	.input:hover {
+		background: hsl(var(--background-step-3));
+	}
+
+	.input:active,
+	.input:focus {
+		border: 1px solid hsl(var(--primary-base));
+		outline: none;
+		background: hsl(var(--background-step-2));
+	}
+
+	.disabled .input:active {
+		border: 1px solid hsl(var(--border));
+	}
+
+	.req-star {
+		color: hsl(var(--danger-base));
+		font-weight: 700;
+	}
+</style>
diff --git a/packages/studiocms_ui/src/components/Input/Input.astro b/packages/studiocms_ui/src/components/Input/Input.astro
deleted file mode 100644
index 77cde2284..000000000
--- a/packages/studiocms_ui/src/components/Input/Input.astro
+++ /dev/null
@@ -1,43 +0,0 @@
----
-import './Input.css';
-
-import { generateID } from '../../utils/generateID';
-
-type Props = {
-	label?: string;
-	type?: 'text' | 'password';
-	placeholder?: string;
-	isRequired?: boolean;
-	name?: string;
-	disabled?: boolean;
-	defaultValue?: string;
-	class?: string;
-};
-
-const {
-	label,
-	placeholder,
-	name = generateID('input'),
-	type = 'text',
-	defaultValue,
-	isRequired = false,
-	disabled = false,
-	class: className,
-} = Astro.props;
----
-
-<label for={name} class="input-label" class:list={[disabled && "disabled", className]}>
-  <span class="label">
-    {label} <span class="req-star">{isRequired && "*"}</span>
-  </span>
-  <input
-    placeholder={placeholder}
-    name={name}
-    id={name}
-    type={type}
-    class="input"
-    required={isRequired}
-    disabled={disabled}
-    value={defaultValue}
-  />
-</label>
\ No newline at end of file
diff --git a/packages/studiocms_ui/src/components/Input/Input.css b/packages/studiocms_ui/src/components/Input/Input.css
deleted file mode 100644
index 7549c986c..000000000
--- a/packages/studiocms_ui/src/components/Input/Input.css
+++ /dev/null
@@ -1,46 +0,0 @@
-.input-label {
-	width: 100%;
-	display: flex;
-	flex-direction: column;
-	gap: .25rem;
-	margin-top: .5rem;
-}
-
-.input-label.disabled {
-	opacity: 0.5;
-	pointer-events: none;
-	color: hsl(var(--text-muted));
-}
-
-.label {
-	font-size: 14px;
-}
-
-.input {
-	padding: .65rem 1rem;
-	border-radius: 8px;
-	border: 1px solid hsl(var(--border));
-	background: hsl(var(--background-step-2));
-	color: hsl(var(--text-normal));
-	transition: all .15s ease;
-}
-
-.input:hover {
-	background: hsl(var(--background-step-3));
-}
-
-.input:active,
-.input:focus {
-	border: 1px solid hsl(var(--primary-base));
-	outline: none;
-	background: hsl(var(--background-step-2));
-}
-
-.disabled .input:active {
-	border: 1px solid hsl(var(--border));
-}
-
-.req-star {
-	color: hsl(var(--danger-base));
-	font-weight: 700;
-}
diff --git a/packages/studiocms_ui/src/components/Modal/Modal.astro b/packages/studiocms_ui/src/components/Modal/Modal.astro
index 256fdb61a..14ef2c4b5 100644
--- a/packages/studiocms_ui/src/components/Modal/Modal.astro
+++ b/packages/studiocms_ui/src/components/Modal/Modal.astro
@@ -1,8 +1,6 @@
 ---
-import './Modal.css';
-
 import Icon from '../../utils/Icon.astro';
-import Button from '../Button/Button.astro';
+import Button from '../Button.astro';
 
 type ModalButton = 'cancel' | 'confirm';
 
@@ -28,7 +26,7 @@ const { id, size = 'md', dismissable = true, isForm = false, buttons = [] } = As
 >
   <div class="modal-header">
     <slot name="header" />
-    {dismissable && (
+    {(dismissable || buttons.length === 0) && (
       <button class="x-mark-container" id={`${id}-btn-x`}>
         <Icon name="x-mark" width={24} height={24} class={'dismiss-icon'} />
       </button>
@@ -51,4 +49,116 @@ const { id, size = 'md', dismissable = true, isForm = false, buttons = [] } = As
       )}
     </div>
   </form>
-</dialog>
\ No newline at end of file
+</dialog>
+<style>
+  .modal {
+    border: 1px solid hsl(var(--border));
+    border-radius: .5rem;
+    padding: 1.5rem;
+    box-shadow: 0px 6px 8px hsl(var(--shadow));
+    animation: hide .25s ease;
+    overflow: visible;
+    margin: auto;
+  }
+
+  .modal.sm {
+    width: 384px;
+  }
+
+  .modal.md {
+    width: 448px;
+  }
+
+  .modal.lg {
+    width: 608px;
+  }
+
+  .modal[open] {
+    animation: show .25s ease-in-out;
+  }
+
+  html:has(.modal[open]),
+  body:has(.modal[open]) {
+    overflow: hidden;
+  }
+
+  .modal[open]::backdrop {
+    background-color: rgba(0, 0, 0, 0.75);
+    animation: backdrop .3s ease-in-out forwards;
+  }
+
+  .modal-header:has(*) {
+    margin-bottom: 1rem;
+
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    gap: 1rem;
+
+    * {
+      margin: 0;
+    }
+  }
+
+  .x-mark-container {
+    cursor: pointer;
+    height: 1.5rem;
+    width: 1.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background-color .15s ease;
+    border-radius: .25rem;
+  }
+
+  .x-mark-container:hover {
+    background-color: hsl(var(--default-base));
+  }
+
+  .modal-footer {
+    display: none;
+  }
+
+  .modal-footer:has(*) {
+    display: flex;
+    flex-direction: row;
+    gap: 1rem;
+    margin-top: 1rem;
+    justify-content: end;
+  }
+
+  @keyframes hide {
+    0% {
+      scale: 1;
+      opacity: 1;
+      display: block;
+    }
+    100% {
+      scale: 0.85;
+      opacity: 0;
+      display: none;
+    }
+  }
+
+  @keyframes show {
+    0% {
+      scale: 0.85;
+      opacity: 0;
+      display: none;
+    }
+    100% {
+      scale: 1;
+      opacity: 1;
+      display: block;
+    }
+  }
+
+  @keyframes backdrop {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+</style>
diff --git a/packages/studiocms_ui/src/components/Modal/Modal.css b/packages/studiocms_ui/src/components/Modal/Modal.css
deleted file mode 100644
index 2e616a3c8..000000000
--- a/packages/studiocms_ui/src/components/Modal/Modal.css
+++ /dev/null
@@ -1,109 +0,0 @@
-.modal {
-	border: 1px solid hsl(var(--border));
-	border-radius: .5rem;
-	padding: 1.5rem;
-	box-shadow: 0px 6px 8px hsl(var(--shadow));
-	animation: hide .25s ease;
-	overflow: visible;
-}
-
-.modal.sm {
-	width: 384px;
-}
-
-.modal.md {
-	width: 448px;
-}
-
-.modal.lg {
-	width: 512px;
-}
-
-.modal[open] {
-	animation: show .25s ease-in-out;
-}
-
-html:has(.modal[open]),
-body:has(.modal[open]) {
-	overflow: hidden;
-}
-
-.modal[open]::backdrop {
-	background-color: rgba(0, 0, 0, 0.75);
-	animation: backdrop .3s ease-in-out forwards;
-}
-
-.modal-header:has(*) {
-	margin-bottom: 1rem;
-
-	display: flex;
-	flex-direction: row;
-	justify-content: space-between;
-	gap: 1rem;
-
-	* {
-		margin: 0;
-	}
-}
-
-.x-mark-container {
-	cursor: pointer;
-	height: 1.5rem;
-	width: 1.5rem;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	transition: background-color .15s ease;
-	border-radius: .25rem;
-}
-
-.x-mark-container:hover {
-	background-color: hsl(var(--default-base));
-}
-
-.modal-footer {
-	display: none;
-}
-
-.modal-footer:has(*) {
-	display: flex;
-	flex-direction: row;
-	gap: 1rem;
-	margin-top: 1rem;
-	justify-content: end;
-}
-
-@keyframes hide {
-	0% {
-		scale: 1;
-		opacity: 1;
-		display: block;
-	}
-	100% {
-		scale: 0.85;
-		opacity: 0;
-		display: none;
-	}
-}
-
-@keyframes show {
-	0% {
-		scale: 0.85;
-		opacity: 0;
-		display: none;
-	}
-	100% {
-		scale: 1;
-		opacity: 1;
-		display: block;
-	}
-}
-
-@keyframes backdrop {
-	0% {
-		opacity: 0;
-	}
-	100% {
-		opacity: 1;
-	}
-}
diff --git a/packages/studiocms_ui/src/components/Modal/index.ts b/packages/studiocms_ui/src/components/Modal/index.ts
new file mode 100644
index 000000000..ab8b3299c
--- /dev/null
+++ b/packages/studiocms_ui/src/components/Modal/index.ts
@@ -0,0 +1,2 @@
+export { default as Modal } from './Modal.astro';
+export { ModalHelper } from './modal';
diff --git a/packages/studiocms_ui/src/components/Modal/modal.ts b/packages/studiocms_ui/src/components/Modal/modal.ts
index 5c575bc25..fb866a71e 100644
--- a/packages/studiocms_ui/src/components/Modal/modal.ts
+++ b/packages/studiocms_ui/src/components/Modal/modal.ts
@@ -6,7 +6,7 @@ class ModalHelper {
 	private isForm = false;
 	private modalForm: HTMLFormElement;
 
-	constructor(id: string) {
+	constructor(id: string, triggerID?: string) {
 		const element = document.getElementById(id) as HTMLDialogElement;
 
 		if (!element) {
@@ -26,10 +26,14 @@ class ModalHelper {
 		if (isForm) this.isForm = true;
 
 		this.addButtonListeners(id, isDismissable);
+
+		if (triggerID) {
+			this.bindTrigger(triggerID);
+		}
 	}
 
 	private addButtonListeners = (id: string, dismissable: boolean) => {
-		if (dismissable) {
+		if (dismissable || !this.element.dataset.buttons) {
 			const xMarkButton = document.getElementById(`${id}-btn-x`) as HTMLButtonElement;
 			xMarkButton.addEventListener('click', this.hide);
 		}
diff --git a/packages/studiocms_ui/src/components/RadioGroup.astro b/packages/studiocms_ui/src/components/RadioGroup.astro
new file mode 100644
index 000000000..9da81dd67
--- /dev/null
+++ b/packages/studiocms_ui/src/components/RadioGroup.astro
@@ -0,0 +1,175 @@
+---
+import type { StudioCMSColorway } from '../utils/colors';
+import { generateID } from '../utils/generateID';
+
+type Option = {
+	label: string;
+	value: string;
+	disabled?: boolean;
+};
+
+type Props = {
+	label: string;
+	color?: StudioCMSColorway;
+	defaultValue?: string;
+	options: Option[];
+	disabled?: boolean;
+	name?: string;
+	isRequired?: boolean;
+	horizontal?: boolean;
+	class?: string;
+};
+
+const {
+	label,
+	color,
+	defaultValue,
+	options,
+	disabled,
+	name = generateID('radio'),
+	isRequired,
+	horizontal,
+	class: className,
+} = Astro.props;
+---
+
+<div 
+  class="radio-container"
+  class:list={[
+    disabled && "disabled",
+    horizontal && "horizontal",
+    color,
+    className
+  ]}
+>
+  <span>
+    {label} <span class="req-star">{isRequired && "*"}</span>
+  </span>
+  <div class="radio-inputs">
+    {options.map(({ label, value, disabled: individuallyDisabled }) => (
+      <label
+        for={value}
+        class="radio-label"
+        class:list={[ individuallyDisabled && "disabled" ]}
+      >
+        <div class="radio-box-container">
+          <div class="radio-box" />
+        </div>
+        <input 
+          class="radio-toggle" 
+          type="radio" 
+          value={value} 
+          id={value} 
+          name={name} 
+          checked={value === defaultValue} 
+          disabled={disabled || individuallyDisabled}
+          required={isRequired}
+        />
+        <span>{label}</span>
+      </label>
+    ))}
+  </div>
+</div>
+<style>
+  .radio-container {
+    display: flex;
+    flex-direction: column;
+    gap: .5rem;
+  }
+
+  .radio-container.disabled {
+    opacity: 0.5;
+    color: hsl(var(--text-muted));
+  }
+
+  .radio-label.disabled {
+    opacity: 0.5;
+    color: hsl(var(--text-muted));
+    pointer-events: none;
+  }
+
+  .req-star {
+    color: hsl(var(--danger-base));
+    font-weight: 700;
+  }
+
+  .radio-inputs {
+    display: flex;
+    flex-direction: column;
+    gap: .75rem;
+  }
+
+  .radio-container.horizontal .radio-inputs {
+    flex-direction: row;
+  }
+
+  .radio-label {
+    display: flex;
+    flex-direction: row;
+    gap: .5rem;
+    position: relative;
+    align-items: center;
+  }
+
+  .radio-label:hover .radio-box {
+    outline-color: hsl(var(--default-hover));
+  }
+
+  .radio-container:not(.disabled) .radio-label:active .radio-box {
+    outline-color: hsl(var(--default-active));
+    scale: 0.9;
+  }
+
+  .radio-label:has(.radio-toggle:checked) .radio-box {
+    background-color: hsl(var(--text-normal));
+    outline-color: hsl(var(--text-normal));
+  }
+
+  .radio-container.primary .radio-label:has(.radio-toggle:checked) .radio-box {
+    background-color: hsl(var(--primary-base));
+    outline-color: hsl(var(--primary-base));
+  }
+
+  .radio-container.success .radio-label:has(.radio-toggle:checked) .radio-box {
+    background-color: hsl(var(--success-base));
+    outline-color: hsl(var(--success-base));
+  }
+
+  .radio-container.warning .radio-label:has(.radio-toggle:checked) .radio-box {
+    background-color: hsl(var(--warning-base));
+    outline-color: hsl(var(--warning-base));
+  }
+
+  .radio-container.danger .radio-label:has(.radio-toggle:checked) .radio-box {
+    background-color: hsl(var(--danger-base));
+    outline-color: hsl(var(--danger-base));
+  }
+
+  .radio-box-container {
+    width: 20px;
+    height: 20px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+  }
+
+  .radio-box {
+    width: 12px;
+    height: 12px;
+    border-radius: 20px;
+    outline: 1px solid hsl(var(--default-base));
+    outline-offset: 4px;
+    transition: all .15s ease;
+  }
+
+  .radio-toggle {
+    width: 0;
+    height: 0;
+    visibility: hidden;
+    opacity: 0;
+    margin: 0;
+    position: absolute;
+  }
+</style>
diff --git a/packages/studiocms_ui/src/components/RadioGroup/RadioGroup.astro b/packages/studiocms_ui/src/components/RadioGroup/RadioGroup.astro
deleted file mode 100644
index 61edc444f..000000000
--- a/packages/studiocms_ui/src/components/RadioGroup/RadioGroup.astro
+++ /dev/null
@@ -1,74 +0,0 @@
----
-import './RadioGroup.css';
-
-import type { StudioCMSColorway } from '../../utils/colors';
-import { generateID } from '../../utils/generateID';
-
-type Option = {
-	label: string;
-	value: string;
-	disabled?: boolean;
-};
-
-type Props = {
-	label: string;
-	color?: StudioCMSColorway;
-	defaultValue?: string;
-	options: Option[];
-	disabled?: boolean;
-	name?: string;
-	isRequired?: boolean;
-	horizontal?: boolean;
-	class?: string;
-};
-
-const {
-	label,
-	color,
-	defaultValue,
-	options,
-	disabled,
-	name = generateID('radio'),
-	isRequired,
-	horizontal,
-	class: className,
-} = Astro.props;
----
-
-<div 
-  class="radio-container"
-  class:list={[
-    disabled && "disabled",
-    horizontal && "horizontal",
-    color,
-    className
-  ]}
->
-  <span>
-    {label} <span class="req-star">{isRequired && "*"}</span>
-  </span>
-  <div class="radio-inputs">
-    {options.map(({ label, value, disabled: individuallyDisabled }) => (
-      <label
-        for={value}
-        class="radio-label"
-        class:list={[ individuallyDisabled && "disabled" ]}
-      >
-        <div class="radio-box-container">
-          <div class="radio-box" />
-        </div>
-        <input 
-          class="radio-toggle" 
-          type="radio" 
-          value={value} 
-          id={value} 
-          name={name} 
-          checked={value === defaultValue} 
-          disabled={disabled || individuallyDisabled}
-          required={isRequired}
-        />
-        <span>{label}</span>
-      </label>
-    ))}
-  </div>
-</div>
\ No newline at end of file
diff --git a/packages/studiocms_ui/src/components/RadioGroup/RadioGroup.css b/packages/studiocms_ui/src/components/RadioGroup/RadioGroup.css
deleted file mode 100644
index 55b1ea0ce..000000000
--- a/packages/studiocms_ui/src/components/RadioGroup/RadioGroup.css
+++ /dev/null
@@ -1,100 +0,0 @@
-.radio-container {
-	display: flex;
-	flex-direction: column;
-	gap: .5rem;
-}
-
-.radio-container.disabled {
-	opacity: 0.5;
-	color: hsl(var(--text-muted));
-}
-
-.radio-label.disabled {
-	opacity: 0.5;
-	color: hsl(var(--text-muted));
-	pointer-events: none;
-}
-
-.req-star {
-	color: hsl(var(--danger-base));
-	font-weight: 700;
-}
-
-.radio-inputs {
-	display: flex;
-	flex-direction: column;
-	gap: .75rem;
-}
-
-.radio-container.horizontal .radio-inputs {
-	flex-direction: row;
-}
-
-.radio-label {
-	display: flex;
-	flex-direction: row;
-	gap: .5rem;
-	position: relative;
-}
-
-.radio-label:hover .radio-box {
-	outline-color: hsl(var(--default-hover));
-}
-
-.radio-container:not(.disabled) .radio-label:active .radio-box {
-	outline-color: hsl(var(--default-active));
-	scale: 0.9;
-}
-
-.radio-label:has(.radio-toggle:checked) .radio-box {
-	background-color: hsl(var(--text-normal));
-	outline-color: hsl(var(--text-normal));
-}
-
-.radio-container.primary .radio-label:has(.radio-toggle:checked) .radio-box {
-	background-color: hsl(var(--primary-base));
-	outline-color: hsl(var(--primary-base));
-}
-
-.radio-container.success .radio-label:has(.radio-toggle:checked) .radio-box {
-	background-color: hsl(var(--success-base));
-	outline-color: hsl(var(--success-base));
-}
-
-.radio-container.warning .radio-label:has(.radio-toggle:checked) .radio-box {
-	background-color: hsl(var(--warning-base));
-	outline-color: hsl(var(--warning-base));
-}
-
-.radio-container.danger .radio-label:has(.radio-toggle:checked) .radio-box {
-	background-color: hsl(var(--danger-base));
-	outline-color: hsl(var(--danger-base));
-}
-
-.radio-box-container {
-	width: 20px;
-	height: 20px;
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	justify-content: center;
-	cursor: pointer;
-}
-
-.radio-box {
-	width: 12px;
-	height: 12px;
-	border-radius: 20px;
-	outline: 1px solid hsl(var(--default-base));
-	outline-offset: 4px;
-	transition: all .15s ease;
-}
-
-.radio-toggle {
-	width: 0;
-	height: 0;
-	visibility: hidden;
-	opacity: 0;
-	margin: 0;
-	position: absolute;
-}
diff --git a/packages/studiocms_ui/src/components/Row.astro b/packages/studiocms_ui/src/components/Row.astro
new file mode 100644
index 000000000..09debd3c8
--- /dev/null
+++ b/packages/studiocms_ui/src/components/Row.astro
@@ -0,0 +1,36 @@
+---
+type Props = {
+	alignCenter?: boolean;
+	gapSize?: 'sm' | 'md' | 'lg';
+};
+
+const { alignCenter, gapSize = 'md' } = Astro.props;
+---
+
+<div class="row" class:list={[alignCenter && "align", gapSize]}>
+  <slot />
+</div>
+<style>
+	.row {
+		display: flex;
+		flex-direction: row;
+		position: relative;
+		flex-wrap: wrap;
+	}
+
+	.row.align {
+		align-items: center;
+	}
+
+	.row.sm {
+		gap: .5rem;
+	}
+
+	.row.md {
+		gap: 1rem;
+	}
+
+	.row.lg {
+		gap: 2rem;
+	}
+</style>
diff --git a/packages/studiocms_ui/src/components/Row/Row.astro b/packages/studiocms_ui/src/components/Row/Row.astro
deleted file mode 100644
index 8520ca904..000000000
--- a/packages/studiocms_ui/src/components/Row/Row.astro
+++ /dev/null
@@ -1,14 +0,0 @@
----
-import './Row.css';
-
-type Props = {
-	alignCenter?: boolean;
-	gapSize?: 'sm' | 'md' | 'lg';
-};
-
-const { alignCenter, gapSize = 'md' } = Astro.props;
----
-
-<div class="row" class:list={[alignCenter && "align", gapSize]}>
-  <slot />
-</div>
\ No newline at end of file
diff --git a/packages/studiocms_ui/src/components/Row/Row.css b/packages/studiocms_ui/src/components/Row/Row.css
deleted file mode 100644
index 151c9c2ec..000000000
--- a/packages/studiocms_ui/src/components/Row/Row.css
+++ /dev/null
@@ -1,22 +0,0 @@
-.row {
-	display: flex;
-	flex-direction: row;
-	position: relative;
-	flex-wrap: wrap;
-}
-
-.row.align {
-	align-items: center;
-}
-
-.row.sm {
-	gap: .5rem;
-}
-
-.row.md {
-	gap: 1rem;
-}
-
-.row.lg {
-	gap: 2rem;
-}
diff --git a/packages/studiocms_ui/src/components/Select/Select.astro b/packages/studiocms_ui/src/components/Select.astro
similarity index 66%
rename from packages/studiocms_ui/src/components/Select/Select.astro
rename to packages/studiocms_ui/src/components/Select.astro
index 1de1c82a7..62e9b5d75 100644
--- a/packages/studiocms_ui/src/components/Select/Select.astro
+++ b/packages/studiocms_ui/src/components/Select.astro
@@ -1,8 +1,6 @@
 ---
-import './Select.css';
-
-import Icon from '../../utils/Icon.astro';
-import { generateID } from '../../utils/generateID';
+import Icon from '../utils/Icon.astro';
+import { generateID } from '../utils/generateID';
 
 type Option = {
 	label: string;
@@ -176,4 +174,119 @@ const {
 
   // source (2018-03-11): https://github.com/jquery/jquery/blob/master/src/css/hiddenVisibleSelectors.js 
   const isVisible = elem => !!elem && !!(elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length);
-</script>
\ No newline at end of file
+</script>
+<style>
+  .select-label {
+    width: fit-content;
+    display: flex;
+    flex-direction: column;
+    gap: .25rem;
+    min-width: 200px;
+    position: relative;
+  }
+
+  .select-label.full {
+    width: 100%;
+  }
+
+  .select-label.disabled {
+    opacity: 0.5;
+    pointer-events: none;
+    color: hsl(var(--text-muted));
+  }
+
+  .label {
+    font-size: 14px;
+  }
+
+  .req-star {
+    color: hsl(var(--danger-base));
+    font-weight: 700;
+  }
+
+  .select-button {
+    padding: .5rem .75rem .5rem 1rem;
+    border-radius: 8px;
+    border: 1px solid hsl(var(--border));
+    background: hsl(var(--background-step-2));
+    color: hsl(var(--text-normal));
+    transition: all .15s ease;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    cursor: pointer;
+    gap: 1rem;
+  }
+
+  .select-button:hover {
+    background: hsl(var(--background-step-3));
+  }
+
+  .select-button.active,
+  .select-button:active,
+  .select-button:has(+ .select-dropdown.active) {
+    border: 1px solid hsl(var(--primary-base));
+    background: hsl(var(--background-step-2));
+  }
+
+  .select-dropdown {
+    position: absolute;
+    width: 100%;
+    border: 1px solid hsl(var(--border));
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    flex-direction: column;
+    border-radius: .5rem;
+    background-color: hsl(var(--background-step-2));
+    overflow: hidden;
+    top: calc(100% + .25rem);
+    left: 0;
+    display: none;
+    z-index: 90;
+    box-shadow: 0px 4px 8px hsl(var(--shadow), 0.5);
+  }
+
+  .select-dropdown.active {
+    display: flex;
+  }
+
+  .select-dropdown.above {
+    top: auto;
+    bottom: calc(100% - 18px + .25rem);
+  }
+
+  .select-option {
+    padding: .5rem;
+    cursor: pointer;
+    font-size: .975em;
+    transition: all .15s ease;
+  }
+
+  .select-option.disabled {
+    pointer-events: none;
+    color: hsl(var(--text-muted));
+  }
+
+  .select-option:hover {
+    background-color: hsl(var(--background-step-3));
+  }
+
+  .select-option.selected {
+    background-color: hsl(var(--primary-base));
+    color: hsl(var(--text-inverted));
+    cursor: default;
+  }
+
+  .hidden-select {
+    height: 0;
+    width: 0;
+    border: none;
+    outline: none;
+    position: absolute;
+    background-color: transparent;
+    pointer-events: none;
+    opacity: 0;
+  }
+</style>
diff --git a/packages/studiocms_ui/src/components/Select/Select.css b/packages/studiocms_ui/src/components/Select/Select.css
deleted file mode 100644
index 29177b51a..000000000
--- a/packages/studiocms_ui/src/components/Select/Select.css
+++ /dev/null
@@ -1,113 +0,0 @@
-.select-label {
-	width: fit-content;
-	display: flex;
-	flex-direction: column;
-	gap: .25rem;
-	min-width: 200px;
-	position: relative;
-}
-
-.select-label.full {
-	width: 100%;
-}
-
-.select-label.disabled {
-	opacity: 0.5;
-	pointer-events: none;
-	color: hsl(var(--text-muted));
-}
-
-.label {
-	font-size: 14px;
-}
-
-.req-star {
-	color: hsl(var(--danger-base));
-	font-weight: 700;
-}
-
-.select-button {
-	padding: .65rem .75rem .65rem 1rem;
-	border-radius: 8px;
-	border: 1px solid hsl(var(--border));
-	background: hsl(var(--background-step-2));
-	color: hsl(var(--text-normal));
-	transition: all .15s ease;
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	justify-content: space-between;
-	cursor: pointer;
-	gap: 1rem;
-}
-
-.select-button:hover {
-	background: hsl(var(--background-step-3));
-}
-
-.select-button.active,
-.select-button:active,
-.select-button:has(+ .select-dropdown.active) {
-	border: 1px solid hsl(var(--primary-base));
-	background: hsl(var(--background-step-2));
-}
-
-.select-dropdown {
-	position: absolute;
-	width: 100%;
-	border: 1px solid hsl(var(--border));
-	list-style: none;
-	margin: 0;
-	padding: 0;
-	flex-direction: column;
-	border-radius: .5rem;
-	background-color: hsl(var(--background-step-2));
-	overflow: hidden;
-	top: calc(100% + .25rem);
-	left: 0;
-	display: none;
-	z-index: 90;
-	box-shadow: 0px 4px 8px hsl(var(--shadow), 0.5);
-}
-
-.select-dropdown.active {
-	display: flex;
-}
-
-.select-dropdown.above {
-	top: auto;
-	bottom: calc(100% - 18px + .25rem);
-}
-
-.select-option {
-	padding: .5rem;
-	cursor: pointer;
-	font-size: .975em;
-	transition: all .15s ease;
-}
-
-.select-option.disabled {
-	pointer-events: none;
-	color: hsl(var(--text-muted));
-}
-
-.select-option:hover {
-	background-color: hsl(var(--background-step-3));
-}
-
-.select-option.selected {
-	background-color: hsl(var(--primary-base));
-	color: hsl(var(--text-inverted));
-	cursor: default;
-}
-
-.hidden-select {
-	height: 0;
-	width: 0;
-	border: none;
-	outline: none;
-	position: absolute;
-	background-color: transparent;
-	pointer-events: none;
-	opacity: 0;
-}
diff --git a/packages/studiocms_ui/src/components/Sidebar/Double.astro b/packages/studiocms_ui/src/components/Sidebar/Double.astro
index 09a0c7fb1..4b749663c 100644
--- a/packages/studiocms_ui/src/components/Sidebar/Double.astro
+++ b/packages/studiocms_ui/src/components/Sidebar/Double.astro
@@ -1,6 +1,3 @@
----
-import './Double.css';
----
 <div id="sidebars" class="active inner">
   <div id="sidebar-outer">
     <slot name="outer" />
@@ -8,4 +5,87 @@ import './Double.css';
   <div id="sidebar-inner">
     <slot name="inner" />
   </div>
-</div>
\ No newline at end of file
+</div>
+<style>
+  #sidebars {
+    --sidebars-container-width: calc((280px + 1px) * 2);
+    display: flex;
+    align-items: center;
+    width: var(--sidebars-container-width);
+    min-width: var(--sidebars-container-width);
+    overflow: hidden;
+    transition: all .3s ease;
+    z-index: 10;
+    height: 100%;
+  }
+
+  #sidebars.active {
+    transform: translateX(0%);
+  }
+
+  #sidebar-outer {
+    height: 100%;
+    min-width: 280px;
+    width: 280px;
+    background-color: hsl(var(--background-step-1));
+    border-right: 1px solid hsl(var(--border));
+    gap: 1rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    z-index: 10;
+    transition: all .3s ease;
+    padding: 1.5rem;
+  }
+
+  #sidebar-inner {
+    min-width: 280px;
+    width: 280px;
+    height: 100%;
+    background-color: hsl(var(--background-step-2));
+    border-right: 1px solid hsl(var(--border));
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    align-items: center;
+    justify-content: center;
+    z-index: 5;
+    position: relative;
+    transition: all .3s ease;
+  }
+
+  @media screen and (max-width: 1200px) {
+    #sidebars {
+      --sidebars-container-width: calc(280px + 1px);
+    }
+
+    #swap-to-inner {
+      display: block;
+    }
+
+    #sidebars.inner {
+      #sidebar-outer,
+      #sidebar-inner {
+        transform: translateX(-100%);
+      }
+    }
+  }
+
+  @media screen and (max-width: 840px) {
+    #sidebars {
+      transform: translateX(-100%);
+      position: absolute;
+      top: 0;
+      left: 0;
+      height: 100%;
+      width: 100%;
+    }
+
+    #sidebar-outer,
+    #sidebar-inner {
+      width: 100%;
+      flex: 0 0 100%;
+    }
+  }
+</style>
diff --git a/packages/studiocms_ui/src/components/Sidebar/Double.css b/packages/studiocms_ui/src/components/Sidebar/Double.css
deleted file mode 100644
index 4cf769ab9..000000000
--- a/packages/studiocms_ui/src/components/Sidebar/Double.css
+++ /dev/null
@@ -1,142 +0,0 @@
-#sidebars {
-	--sidebars-container-width: calc((280px + 1px) * 2);
-	display: flex;
-	align-items: center;
-	width: var(--sidebars-container-width);
-	min-width: var(--sidebars-container-width);
-	overflow: hidden;
-	transition: all .3s ease;
-	z-index: 10;
-	height: 100%;
-}
-
-#sidebars.active {
-	transform: translateX(0%);
-}
-
-#sidebar-outer {
-	height: 100%;
-	min-width: 280px;
-	width: 280px;
-	background-color: hsl(var(--background-step-1));
-	border-right: 1px solid hsl(var(--border));
-	gap: 1rem;
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	z-index: 10;
-	transition: all .3s ease;
-	padding: 1.5rem;
-}
-
-#sidebar-inner {
-	min-width: 280px;
-	width: 280px;
-	height: 100%;
-	background-color: hsl(var(--background-step-2));
-	border-right: 1px solid hsl(var(--border));
-	display: flex;
-	flex-direction: column;
-	gap: 1rem;
-	align-items: center;
-	justify-content: center;
-	z-index: 5;
-	position: relative;
-	transition: all .3s ease;
-}
-
-#navigate-to-outer-button {
-	display: none;
-	position: absolute;
-	top: 1rem;
-	left: 1rem;
-	padding: .25rem;
-	background-color: hsl(var(--background-step-3));
-	cursor: pointer;
-	border-radius: 8px;
-	align-items: center;
-	color: hsl(var(--text-normal));
-	outline: none;
-	border: none;
-	height: 32px;
-	width: 32px;
-}
-
-#show-navbar-button {
-	z-index: 2;
-}
-
-#swap-to-inner,
-#swap-to-content {
-	display: none;
-}
-
-@media screen and (max-width: 1200px) {
-	#sidebars {
-		--sidebars-container-width: calc(280px + 1px);
-	}
-
-	#swap-to-inner {
-		display: block;
-	}
-
-	#sidebars.inner {
-		#sidebar-outer,
-		#sidebar-inner {
-			transform: translateX(-100%);
-		}
-	}
-
-	#navigate-to-outer-button {
-		display: flex;
-	}
-}
-
-@media screen and (max-width: 840px) {
-	#sidebars {
-		transform: translateX(-100%);
-		position: absolute;
-		top: 0;
-		left: 0;
-		height: 100%;
-		width: 100%;
-	}
-
-	#sidebar-outer,
-	#sidebar-inner {
-		width: 100%;
-		flex: 0 0 100%;
-	}
-
-	#show-navbar-button {
-		display: flex;
-	}
-
-	#swap-to-content {
-		display: block;
-	}
-}
-
-#show-navbar-button {
-	display: none;
-	position: absolute;
-	top: 1rem;
-	left: 1rem;
-	padding: .25rem;
-	background-color: var(--background-step-3);
-	cursor: pointer;
-	border-radius: 8px;
-	align-items: center;
-	color: white;
-	outline: none;
-	border: none;
-	height: 32px;
-	width: 32px;
-}
-
-@media screen and (max-width: 840px) {
-	#show-navbar-button {
-		display: flex;
-	}
-}
diff --git a/packages/studiocms_ui/src/components/Sidebar/Single.astro b/packages/studiocms_ui/src/components/Sidebar/Single.astro
index 2883f679f..2ede271c6 100644
--- a/packages/studiocms_ui/src/components/Sidebar/Single.astro
+++ b/packages/studiocms_ui/src/components/Sidebar/Single.astro
@@ -1,6 +1,35 @@
----
-import './Single.css';
----
 <aside id="sidebar">
   <slot />
-</aside>
\ No newline at end of file
+</aside>
+<style>
+  #sidebar {
+    height: 100%;
+    min-width: 280px;
+    width: 280px;
+    background-color: hsl(var(--background-step-1));
+    border-right: 1px solid hsl(var(--border));
+    gap: 1rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 1.5rem;
+    z-index: 10;
+    transition: all .3s ease;
+  }
+
+  #sidebar.active {
+    transform: translateX(0%);
+  }
+
+  @media screen and (max-width: 840px) {
+    #sidebar {
+      transform: translateX(-100%);
+      position: absolute;
+      top: 0;
+      left: 0;
+      height: 100%;
+      width: 100%;
+      border-right: none;
+    }
+  }
+</style>
diff --git a/packages/studiocms_ui/src/components/Sidebar/Single.css b/packages/studiocms_ui/src/components/Sidebar/Single.css
deleted file mode 100644
index 8a8f49562..000000000
--- a/packages/studiocms_ui/src/components/Sidebar/Single.css
+++ /dev/null
@@ -1,38 +0,0 @@
-#sidebar {
-	height: 100%;
-	min-width: 280px;
-	width: 280px;
-	background-color: hsl(var(--background-step-1));
-	border-right: 1px solid hsl(var(--border));
-	gap: 1rem;
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	padding: 1.5rem;
-	z-index: 10;
-	transition: all .3s ease;
-}
-
-#sidebar.active {
-	transform: translateX(0%);
-}
-
-@media screen and (max-width: 840px) {
-	#sidebar {
-		transform: translateX(-100%);
-		position: absolute;
-		top: 0;
-		left: 0;
-		height: 100%;
-		width: 100%;
-		border-right: none;
-	}
-
-	#show-navbar-button {
-		display: flex;
-	}
-
-	#swap-to-content {
-		display: block;
-	}
-}
diff --git a/packages/studiocms_ui/src/components/Sidebar/index.ts b/packages/studiocms_ui/src/components/Sidebar/index.ts
new file mode 100644
index 000000000..0f0d38fac
--- /dev/null
+++ b/packages/studiocms_ui/src/components/Sidebar/index.ts
@@ -0,0 +1,3 @@
+export { default as SingleSidebar } from './Single.astro';
+export { default as DoubleSidebar } from './Double.astro';
+export { SingleSidebarHelper, DoubleSidebarHelper } from './helpers';
diff --git a/packages/studiocms_ui/src/components/Textarea.astro b/packages/studiocms_ui/src/components/Textarea.astro
new file mode 100644
index 000000000..7d7edc4b9
--- /dev/null
+++ b/packages/studiocms_ui/src/components/Textarea.astro
@@ -0,0 +1,102 @@
+---
+import { generateID } from '../utils/generateID';
+
+type Props = {
+	label?: string;
+	placeholder?: string;
+	isRequired?: boolean;
+	fullWidth?: boolean;
+	resize?: boolean;
+	name?: string;
+	disabled?: boolean;
+	defaultValue?: string;
+};
+
+const {
+	label,
+	placeholder,
+	isRequired,
+	fullWidth,
+	resize,
+	name = generateID('textarea'),
+	disabled,
+	defaultValue,
+} = Astro.props;
+---
+<label 
+  for={name} 
+  class="textarea-label"
+  class:list={[
+    fullWidth && "full",
+    resize && "resize",
+    disabled && "disabled",
+  ]}
+>
+  <span class="label">
+    {label} <span class="req-star">{isRequired && "*"}</span>
+  </span>
+  <textarea
+    placeholder={placeholder}
+    name={name}
+    id={name}
+    class="textarea"
+    required={isRequired}
+    disabled={disabled}
+    
+  >{defaultValue}</textarea>
+</label>
+<style>
+  .textarea-label {
+    display: flex;
+    flex-direction: column;
+    gap: .25rem;
+    margin-top: .5rem;
+    max-width: 80ch;
+  }
+
+  .textarea-label.disabled {
+    opacity: 0.5;
+    pointer-events: none;
+    color: hsl(var(--text-muted));
+  }
+
+  .textarea-label.full {
+    width: 100%;
+    max-width: none;
+  }
+
+  .label {
+    font-size: 14px;
+  }
+
+  .textarea {
+    padding: .65rem 1rem;
+    border-radius: 8px;
+    border: 1px solid hsl(var(--border));
+    background: hsl(var(--background-step-2));
+    color: hsl(var(--text-normal));
+    transition: all .15s ease;
+    resize: none;
+    min-height: 12ch;
+  }
+
+  .textarea:hover {
+    background: hsl(var(--background-step-3));
+  }
+
+  .resize .textarea {
+    resize: both;
+  }
+
+  .textarea:active,
+  .textarea:focus {
+    border: 1px solid hsl(var(--primary-base));
+    outline: none;
+    background: hsl(var(--background-step-2));
+  }
+
+  .req-star {
+    color: hsl(var(--danger-base));
+    font-weight: 700;
+  }
+</style>
diff --git a/packages/studiocms_ui/src/components/Textarea/Textarea.astro b/packages/studiocms_ui/src/components/Textarea/Textarea.astro
deleted file mode 100644
index 3acc73200..000000000
--- a/packages/studiocms_ui/src/components/Textarea/Textarea.astro
+++ /dev/null
@@ -1,49 +0,0 @@
----
-import './Textarea.css';
-
-import { generateID } from '../../utils/generateID';
-
-type Props = {
-	label?: string;
-	placeholder?: string;
-	isRequired?: boolean;
-	fullWidth?: boolean;
-	resize?: boolean;
-	name?: string;
-	disabled?: boolean;
-	defaultValue?: string;
-};
-
-const {
-	label,
-	placeholder,
-	isRequired,
-	fullWidth,
-	resize,
-	name = generateID('textarea'),
-	disabled,
-	defaultValue,
-} = Astro.props;
----
-<label 
-  for={name} 
-  class="textarea-label"
-  class:list={[
-    fullWidth && "full",
-    resize && "resize",
-    disabled && "disabled",
-  ]}
->
-  <span class="label">
-    {label} <span class="req-star">{isRequired && "*"}</span>
-  </span>
-  <textarea
-    placeholder={placeholder}
-    name={name}
-    id={name}
-    class="textarea"
-    required={isRequired}
-    disabled={disabled}
-    
-  >{defaultValue}</textarea>
-</label>
\ No newline at end of file
diff --git a/packages/studiocms_ui/src/components/Textarea/Textarea.css b/packages/studiocms_ui/src/components/Textarea/Textarea.css
deleted file mode 100644
index 52ebf39b8..000000000
--- a/packages/studiocms_ui/src/components/Textarea/Textarea.css
+++ /dev/null
@@ -1,53 +0,0 @@
-.textarea-label {
-	display: flex;
-	flex-direction: column;
-	gap: .25rem;
-	margin-top: .5rem;
-	max-width: 80ch;
-}
-
-.textarea-label.disabled {
-	opacity: 0.5;
-	pointer-events: none;
-	color: hsl(var(--text-muted));
-}
-
-.textarea-label.full {
-	width: 100%;
-	max-width: none;
-}
-
-.label {
-	font-size: 14px;
-}
-
-.textarea {
-	padding: .65rem 1rem;
-	border-radius: 8px;
-	border: 1px solid hsl(var(--border));
-	background: hsl(var(--background-step-2));
-	color: hsl(var(--text-normal));
-	transition: all .15s ease;
-	resize: none;
-	min-height: 12ch;
-}
-
-.textarea:hover {
-	background: hsl(var(--background-step-3));
-}
-
-.resize .textarea {
-	resize: both;
-}
-
-.textarea:active,
-.textarea:focus {
-	border: 1px solid hsl(var(--primary-base));
-	outline: none;
-	background: hsl(var(--background-step-2));
-}
-
-.req-star {
-	color: hsl(var(--danger-base));
-	font-weight: 700;
-}
diff --git a/packages/studiocms_ui/src/components/Toast/Toaster.astro b/packages/studiocms_ui/src/components/Toast/Toaster.astro
index acddd29f7..04db7f8b7 100644
--- a/packages/studiocms_ui/src/components/Toast/Toaster.astro
+++ b/packages/studiocms_ui/src/components/Toast/Toaster.astro
@@ -1,6 +1,4 @@
 ---
-import './Toaster.css';
-
 type Props = {
 	position?:
 		| 'top-left'
@@ -9,9 +7,7 @@ type Props = {
 		| 'bottom-left'
 		| 'bottom-right'
 		| 'bottom-center';
-	class?: string;
 	duration?: number;
-	expand?: boolean;
 	closeButton?: boolean;
 	offset?: number;
 	gap?: number;
@@ -19,9 +15,7 @@ type Props = {
 
 const {
 	position = 'top-center',
-	class: className,
 	duration = 4000,
-	expand = false,
 	closeButton = false,
 	offset = 32,
 	gap = 8,
@@ -30,13 +24,9 @@ const {
 <div 
   id="toaster" 
   class:list={[
-    expand && "expand",
     closeButton && "closeable",
     position,
-    className,
   ]},
-  style={[
-  ].filter(Boolean).join("")}
 >
   <div 
     id="toast-drawer"
@@ -56,8 +46,10 @@ const {
 </div>
 <script>
   import type { ToastProps } from '../../types';
+  import type { ValidIconString } from '../../utils/iconStrings';
+
   import { generateID } from '../../utils/generateID';
-  import { getIconString, type ValidIconString } from '../../utils/iconStrings';
+  import { getIconString } from '../../utils/iconStrings';
 
   let activeToasts: string[] = [];
 
@@ -79,7 +71,7 @@ const {
     const toastContainer = document.createElement('div');
     const toastID = generateID('toast');
     toastContainer.id = toastID;
-    toastContainer.classList.add('toast-container', props.type, `${props.closeButton && "closeable"}`);
+    toastContainer.classList.add('toast-container', props.type, `${props.closeButton || props.persistent && "closeable"}`);
 
     const toastHeader = document.createElement('div');
     toastHeader.classList.add('toast-header');
@@ -109,7 +101,7 @@ const {
     toastHeaderLeftSide.appendChild(toastTitle);
     toastHeader.appendChild(toastHeaderLeftSide);
     
-    if (props.closeButton) {
+    if (props.closeButton || props.persistent) {
       const closeIconContainer = document.createElement('button');
       closeIconContainer.classList.add('close-icon-container')
       closeIconContainer.addEventListener('click', () => removeToast(toastID));
@@ -152,4 +144,168 @@ const {
     e.stopImmediatePropagation();
     createToast(e.detail);
   });
-</script>
\ No newline at end of file
+</script>
+<style>
+  #toaster {
+    width: 100vw;
+    height: 100vh;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 100;
+    pointer-events: none;
+  }
+
+  #toast-drawer {
+    max-width: 420px;
+    width: 100%;
+    height: fit-content;
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+  }
+
+  #toaster.top-left #toast-drawer,
+  #toaster.bottom-left #toast-drawer {
+    left: 50%;
+    transform: translateX(-50%);
+  }
+</style>
+<style is:global>
+  .toast-container {
+    pointer-events: all;
+    padding: 1rem;
+    border-radius: .5rem;
+    border: 1px solid hsl(var(--border));
+    background-color: hsl(var(--background-base));
+    box-shadow: 0px 4px 8px hsl(var(--shadow), 0.5);
+    display: flex;
+    flex-direction: column;
+    gap: .5rem;
+    position: relative;
+    overflow: hidden;
+    margin-bottom: var(--gap);
+    animation: toast-pop-in .25s ease forwards;
+    z-index: 90;
+  }
+
+  .toast-header {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .toast-header-left-side {
+    display: flex;
+    flex-direction: row;
+    gap: .5rem;
+    align-items: center;
+    font-weight: 500;
+    font-size: 1.125em;
+  }
+
+  .toast-header-left-side svg {
+    color: hsl(var(--primary-base));
+  }
+
+  .toast-container.success .toast-header-left-side svg {
+    color: hsl(var(--success-base));
+  }
+
+  .toast-container.warning .toast-header-left-side svg {
+    color: hsl(var(--warning-base));
+  }
+
+  .toast-container.danger .toast-header-left-side svg {
+    color: hsl(var(--danger-base));
+  }
+
+  .toast-progress-bar {
+    position: absolute;
+    height: 4px;
+    width: 100%;
+    bottom: 0;
+    left: 0%;
+    background-color: hsl(var(--primary-base));
+    animation: toast-progress forwards linear;
+  }
+
+  .toast-container.success .toast-progress-bar {
+    background-color: hsl(var(--success-base));
+  }
+
+  .toast-container.warning .toast-progress-bar {
+    background-color: hsl(var(--warning-base));
+  }
+
+  .toast-container.danger .toast-progress-bar {
+    background-color: hsl(var(--danger-base));
+  }
+
+  .close-icon-container {
+    cursor: pointer;
+    height: 1.5rem;
+    width: 1.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background-color .15s ease;
+    border-radius: .25rem;
+  }
+
+  .close-icon-container:hover {
+    background-color: hsl(var(--default-base));
+  }
+
+  .toast-container.closing {
+    animation: toast-closing .25s ease forwards;
+  }
+
+  @keyframes toast-pop-in {
+    0% {
+      opacity: 0;
+      scale: 0.75;
+    }
+    100% {
+      opacity: 1;
+      scale: 1;
+    }
+  }
+
+  @keyframes toast-closing {
+    0% {
+      opacity: 1;
+      scale: 1;
+      max-height: 500px;
+      margin-bottom: var(--gap);
+      padding: 1rem;
+      border: 1px solid hsl(var(--border));
+    }
+    62.5% {
+      scale: 0.75;
+      opacity: 0;
+      max-height: 500px;
+      margin-bottom: var(--gap);
+      padding: 1rem;
+      border: 1px solid hsl(var(--border));
+    }
+    100% {
+      scale: 0.75;
+      opacity: 0;
+      max-height: 0px;
+      margin-bottom: 0;
+      padding: 0;
+      border: 0px solid hsl(var(--border));
+    }
+  }
+
+  @keyframes toast-progress {
+    0% {
+      left: 0%;
+    }
+    100% {
+      left: -100%;
+    }
+  }
+</style>
diff --git a/packages/studiocms_ui/src/components/Toast/Toaster.css b/packages/studiocms_ui/src/components/Toast/Toaster.css
deleted file mode 100644
index 1a8b72963..000000000
--- a/packages/studiocms_ui/src/components/Toast/Toaster.css
+++ /dev/null
@@ -1,160 +0,0 @@
-#toaster {
-	width: 100vw;
-	height: 100vh;
-	position: fixed;
-	top: 0;
-	left: 0;
-	z-index: 100;
-	pointer-events: none;
-}
-
-#toast-drawer {
-	max-width: 420px;
-	width: 100%;
-	height: fit-content;
-	position: absolute;
-	display: flex;
-	flex-direction: column;
-}
-
-#toaster.top-left #toast-drawer,
-#toaster.bottom-left #toast-drawer {
-	left: 50%;
-	transform: translateX(-50%);
-}
-
-.toast-container {
-	pointer-events: all;
-	padding: 1rem;
-	border-radius: .5rem;
-	border: 1px solid hsl(var(--border));
-	background-color: hsl(var(--background-base));
-	box-shadow: 0px 4px 8px hsl(var(--shadow), 0.5);
-	display: flex;
-	flex-direction: column;
-	gap: .5rem;
-	position: relative;
-	overflow: hidden;
-	margin-bottom: var(--gap);
-	animation: toast-pop-in .25s ease forwards;
-}
-
-.toast-header {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	justify-content: space-between;
-}
-
-.toast-header-left-side {
-	display: flex;
-	flex-direction: row;
-	gap: .5rem;
-	align-items: center;
-	font-weight: 500;
-	font-size: 1.125em;
-}
-
-.toast-header-left-side svg {
-	color: hsl(var(--primary-base));
-}
-
-.toast-container.success .toast-header-left-side svg {
-	color: hsl(var(--success-base));
-}
-
-.toast-container.warning .toast-header-left-side svg {
-	color: hsl(var(--warning-base));
-}
-
-.toast-container.danger .toast-header-left-side svg {
-	color: hsl(var(--danger-base));
-}
-
-.toast-progress-bar {
-	position: absolute;
-	height: 4px;
-	width: 100%;
-	bottom: 0;
-	left: 0%;
-	background-color: hsl(var(--primary-base));
-	animation: toast-progress forwards linear;
-}
-
-.toast-container.success .toast-progress-bar {
-	background-color: hsl(var(--success-base));
-}
-
-.toast-container.warning .toast-progress-bar {
-	background-color: hsl(var(--warning-base));
-}
-
-.toast-container.danger .toast-progress-bar {
-	background-color: hsl(var(--danger-base));
-}
-
-.close-icon-container {
-	cursor: pointer;
-	height: 1.5rem;
-	width: 1.5rem;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	transition: background-color .15s ease;
-	border-radius: .25rem;
-}
-
-.close-icon-container:hover {
-	background-color: hsl(var(--default-base));
-}
-
-.toast-container.closing {
-	animation: toast-closing .25s ease forwards;
-}
-
-@keyframes toast-pop-in {
-	0% {
-		opacity: 0;
-		scale: 0.75;
-	}
-	100% {
-		opacity: 1;
-		scale: 1;
-	}
-}
-
-@keyframes toast-closing {
-	0% {
-		opacity: 1;
-		scale: 1;
-		max-height: 500px;
-		margin-bottom: var(--gap);
-		padding: 1rem;
-		border: 1px solid hsl(var(--border));
-	}
-	62.5% {
-		scale: 0.75;
-		opacity: 0;
-		max-height: 500px;
-		margin-bottom: var(--gap);
-		padding: 1rem;
-		border: 1px solid hsl(var(--border));
-	}
-	100% {
-		scale: 0.75;
-		opacity: 0;
-		max-height: 0px;
-		margin-bottom: 0;
-		padding: 0;
-		border: 0px solid hsl(var(--border));
-	}
-}
-
-@keyframes toast-progress {
-	0% {
-		left: 0%;
-	}
-	100% {
-		left: -100%;
-	}
-}
diff --git a/packages/studiocms_ui/src/components/Toast/index.ts b/packages/studiocms_ui/src/components/Toast/index.ts
new file mode 100644
index 000000000..6a452210d
--- /dev/null
+++ b/packages/studiocms_ui/src/components/Toast/index.ts
@@ -0,0 +1,2 @@
+export { default as Toaster } from './Toaster.astro';
+export { toast } from './toast';
diff --git a/packages/studiocms_ui/src/components/Toast/toast.ts b/packages/studiocms_ui/src/components/Toast/toast.ts
index ca20402b3..9d9aaa0bc 100644
--- a/packages/studiocms_ui/src/components/Toast/toast.ts
+++ b/packages/studiocms_ui/src/components/Toast/toast.ts
@@ -1,5 +1,10 @@
 import type { ToastProps } from '../../types';
 
+/**
+ * A function to create toasts with.
+
+ * @param props The props to pass to the toast `test`
+ */
 function toast(props: ToastProps) {
 	const createToast = new CustomEvent('createtoast', {
 		detail: props,
diff --git a/packages/studiocms_ui/src/components/Toggle.astro b/packages/studiocms_ui/src/components/Toggle.astro
new file mode 100644
index 000000000..959fc0e97
--- /dev/null
+++ b/packages/studiocms_ui/src/components/Toggle.astro
@@ -0,0 +1,146 @@
+---
+import type { StudioCMSColorway } from '../utils/colors';
+import { generateID } from '../utils/generateID';
+
+type Props = {
+	label: string;
+	size?: 'sm' | 'md' | 'lg';
+	color?: StudioCMSColorway;
+	defaultChecked?: boolean;
+	disabled?: boolean;
+	name?: string;
+	isRequired?: boolean;
+};
+
+const {
+	size = 'md',
+	color = 'default',
+	defaultChecked,
+	disabled,
+	name = generateID('checkbox'),
+	label,
+	isRequired,
+} = Astro.props;
+---
+<label
+  class="toggle-label"
+  for={name}
+  class:list={[
+    disabled && "disabled",
+    color,
+    size,
+  ]}
+>
+  <div class="toggle-container">
+    <div class="toggle-switch" />
+    <input
+      type="checkbox"
+      name={name}
+      id={name}
+      checked={defaultChecked}
+      disabled={disabled}
+      required={isRequired}
+      class="checkbox"
+    />
+  </div>
+  <span>
+    {label} <span class="req-star">{isRequired && "*"}</span>
+  </span>
+</label>
+<style>
+  .toggle-label {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: .5rem;
+    position: relative;
+    margin: .25rem 0;
+  }
+
+  .toggle-label.disabled {
+    opacity: 0.5;
+    pointer-events: none;
+    color: hsl(var(--text-muted));
+  }
+
+  .toggle-label:active .toggle-switch {
+    transform: scale(0.85);
+  }
+
+  .toggle-container {
+    --toggle-height: 12px;
+    --toggle-width: 40px;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    transition: all .15s ease;
+    background-color: hsl(var(--default-base));
+    width: var(--toggle-width);
+    height: var(--toggle-height);
+    border-radius: var(--toggle-height);
+  }
+
+  .toggle-switch {
+    --switch: calc(var(--toggle-height) * 1.75);
+    height: var(--switch);
+    width: var(--switch);
+    background-color: hsl(var(--text-muted));
+    border-radius: var(--toggle-height);
+    position: relative;
+    left: 0;
+    transition: all .15s ease;
+    will-change: transform;
+  }
+
+  .toggle-container:has(.checkbox:checked) .toggle-switch {
+    left: calc(100% - var(--switch));
+    background-color: hsl(var(--text-normal));
+  }
+
+  .toggle-label.sm .toggle-container {
+    --toggle-height: 10px;
+    --toggle-width: 32px;
+  }
+
+  .toggle-label.sm .toggle-switch {
+    --switch: calc(var(--toggle-height) * 1.65);
+  }
+
+  .toggle-label.lg .toggle-container {
+    --toggle-height: 16px;
+    --toggle-width: 48px;
+  }
+
+  .toggle-label.lg .toggle-switch {
+    --switch: calc(var(--toggle-height) * 1.65);
+  }
+
+  .toggle-label.primary .toggle-container:has(.checkbox:checked) {
+    background-color: hsl(var(--primary-base));
+  }
+
+  .toggle-label.success .toggle-container:has(.checkbox:checked) {
+    background-color: hsl(var(--success-base));
+  }
+
+  .toggle-label.warning .toggle-container:has(.checkbox:checked) {
+    background-color: hsl(var(--warning-base));
+  }
+
+  .toggle-label.danger .toggle-container:has(.checkbox:checked) {
+    background-color: hsl(var(--danger-base));
+  }
+
+  .req-star {
+    color: hsl(var(--danger-base));
+    font-weight: 700;
+  }
+
+  .checkbox {
+    width: 0;
+    height: 0;
+    visibility: hidden;
+    opacity: 0;
+    margin: 0;
+  }
+</style>
diff --git a/packages/studiocms_ui/src/components/Toggle/Toggle.astro b/packages/studiocms_ui/src/components/Toggle/Toggle.astro
deleted file mode 100644
index 7f9928cb7..000000000
--- a/packages/studiocms_ui/src/components/Toggle/Toggle.astro
+++ /dev/null
@@ -1,51 +0,0 @@
----
-import './Toggle.css';
-
-import type { StudioCMSColorway } from '../../utils/colors';
-import { generateID } from '../../utils/generateID';
-
-type Props = {
-	label: string;
-	size?: 'sm' | 'md' | 'lg';
-	color?: StudioCMSColorway;
-	defaultChecked?: boolean;
-	disabled?: boolean;
-	name?: string;
-	isRequired?: boolean;
-};
-
-const {
-	size = 'md',
-	color = 'default',
-	defaultChecked,
-	disabled,
-	name = generateID('checkbox'),
-	label,
-	isRequired,
-} = Astro.props;
----
-<label
-  class="toggle-label"
-  for={name}
-  class:list={[
-    disabled && "disabled",
-    color,
-    size,
-  ]}
->
-  <div class="toggle-container">
-    <div class="toggle-switch" />
-    <input
-      type="checkbox"
-      name={name}
-      id={name}
-      checked={defaultChecked}
-      disabled={disabled}
-      required={isRequired}
-      class="checkbox"
-    />
-  </div>
-  <span>
-    {label} <span class="req-star">{isRequired && "*"}</span>
-  </span>
-</label>
\ No newline at end of file
diff --git a/packages/studiocms_ui/src/components/Toggle/Toggle.css b/packages/studiocms_ui/src/components/Toggle/Toggle.css
deleted file mode 100644
index 20b0c0412..000000000
--- a/packages/studiocms_ui/src/components/Toggle/Toggle.css
+++ /dev/null
@@ -1,95 +0,0 @@
-.toggle-label {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	gap: .5rem;
-	position: relative;
-	margin: .25rem 0;
-}
-
-.toggle-label.disabled {
-	opacity: 0.5;
-	pointer-events: none;
-	color: hsl(var(--text-muted));
-}
-
-.toggle-label:active .toggle-switch {
-	transform: scale(0.85);
-}
-
-.toggle-container {
-	--toggle-height: 12px;
-	--toggle-width: 40px;
-	display: flex;
-	align-items: center;
-	cursor: pointer;
-	transition: all .15s ease;
-	background-color: hsl(var(--default-base));
-	width: var(--toggle-width);
-	height: var(--toggle-height);
-	border-radius: var(--toggle-height);
-}
-
-.toggle-switch {
-	--switch: calc(var(--toggle-height) * 1.75);
-	height: var(--switch);
-	width: var(--switch);
-	background-color: hsl(var(--text-muted));
-	border-radius: var(--toggle-height);
-	position: relative;
-	left: 0;
-	transition: all .15s ease;
-	will-change: transform;
-}
-
-.toggle-container:has(.checkbox:checked) .toggle-switch {
-	left: calc(100% - var(--switch));
-	background-color: hsl(var(--text-normal));
-}
-
-.toggle-label.sm .toggle-container {
-	--toggle-height: 10px;
-	--toggle-width: 32px;
-}
-
-.toggle-label.sm .toggle-switch {
-	--switch: calc(var(--toggle-height) * 1.65);
-}
-
-.toggle-label.lg .toggle-container {
-	--toggle-height: 16px;
-	--toggle-width: 48px;
-}
-
-.toggle-label.lg .toggle-switch {
-	--switch: calc(var(--toggle-height) * 1.65);
-}
-
-.toggle-label.primary .toggle-container:has(.checkbox:checked) {
-	background-color: hsl(var(--primary-base));
-}
-
-.toggle-label.success .toggle-container:has(.checkbox:checked) {
-	background-color: hsl(var(--success-base));
-}
-
-.toggle-label.warning .toggle-container:has(.checkbox:checked) {
-	background-color: hsl(var(--warning-base));
-}
-
-.toggle-label.danger .toggle-container:has(.checkbox:checked) {
-	background-color: hsl(var(--danger-base));
-}
-
-.req-star {
-	color: hsl(var(--danger-base));
-	font-weight: 700;
-}
-
-.checkbox {
-	width: 0;
-	height: 0;
-	visibility: hidden;
-	opacity: 0;
-	margin: 0;
-}
diff --git a/packages/studiocms_ui/src/components/User.astro b/packages/studiocms_ui/src/components/User.astro
new file mode 100644
index 000000000..8e11fc98b
--- /dev/null
+++ b/packages/studiocms_ui/src/components/User.astro
@@ -0,0 +1,69 @@
+---
+import { Image } from 'astro:assets';
+import Icon from '../utils/Icon.astro';
+
+type Props = {
+	name: string;
+	description: string;
+	avatar?: string;
+	class?: string;
+};
+
+const { name, description, avatar, class: className } = Astro.props;
+---
+<div class="user-container" class:list={[ className ]}>
+  <div class="avatar-container">
+    <!-- Astro Image or Unpic -->
+    {avatar ? (
+      <Image src={avatar} inferSize alt={name} class="avatar-img" />
+    ) : (
+      <Icon name='user' width={32} height={32} />
+    )}
+  </div>
+  <div class="text-content">
+    <span class="name">{name}</span>
+    <span class="description">{description}</span>
+  </div>
+</div>
+<style>
+  .user-container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 1rem;
+  }
+
+  .avatar-container {
+    width: 3rem;
+    height: 3rem;
+    background-color: hsl(var(--default-base));
+    border-radius: 3rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    border: 1px solid hsl(var(--border));
+  }
+
+  .avatar-img {
+    width: 100%;
+    height: auto;
+  }
+
+  .text-content {
+    display: flex;
+    flex-direction: column;
+    gap: .125rem;
+  }
+
+  .name {
+    font-size: 1em;
+    font-weight: 600;
+  }
+
+  .description {
+    font-size: .875em;
+    font-weight: 400;
+    color: hsl(var(--text-muted));
+  }
+</style>
diff --git a/packages/studiocms_ui/src/components/User/User.astro b/packages/studiocms_ui/src/components/User/User.astro
deleted file mode 100644
index da25c4274..000000000
--- a/packages/studiocms_ui/src/components/User/User.astro
+++ /dev/null
@@ -1,29 +0,0 @@
----
-import './User.css';
-
-import { Image } from 'astro:assets';
-import Icon from '../../utils/Icon.astro';
-
-type Props = {
-	name: string;
-	description: string;
-	avatar?: string;
-	class?: string;
-};
-
-const { name, description, avatar, class: className } = Astro.props;
----
-<div class="user-container" class:list={[ className ]}>
-  <div class="avatar-container">
-    <!-- Astro Image or Unpic -->
-    {avatar ? (
-      <Image src={avatar} inferSize alt={name} class="avatar-img" />
-    ) : (
-      <Icon name='user' width={32} height={32} />
-    )}
-  </div>
-  <div class="text-content">
-    <span class="name">{name}</span>
-    <span class="description">{description}</span>
-  </div>
-</div>
\ No newline at end of file
diff --git a/packages/studiocms_ui/src/components/User/User.css b/packages/studiocms_ui/src/components/User/User.css
deleted file mode 100644
index ebbe4fa79..000000000
--- a/packages/studiocms_ui/src/components/User/User.css
+++ /dev/null
@@ -1,40 +0,0 @@
-.user-container {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	gap: 1rem;
-}
-
-.avatar-container {
-	width: 3rem;
-	height: 3rem;
-	background-color: hsl(var(--default-base));
-	border-radius: 3rem;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	overflow: hidden;
-	border: 1px solid hsl(var(--border));
-}
-
-.avatar-img {
-	width: 100%;
-	height: auto;
-}
-
-.text-content {
-	display: flex;
-	flex-direction: column;
-	gap: .125rem;
-}
-
-.name {
-	font-size: 1em;
-	font-weight: 600;
-}
-
-.description {
-	font-size: .875em;
-	font-weight: 400;
-	color: hsl(var(--text-muted));
-}
diff --git a/packages/studiocms_ui/src/components/index.ts b/packages/studiocms_ui/src/components/index.ts
index 30aeb3808..066d20239 100644
--- a/packages/studiocms_ui/src/components/index.ts
+++ b/packages/studiocms_ui/src/components/index.ts
@@ -1,18 +1,18 @@
-export { default as Button } from './Button/Button.astro';
-export { default as Divider } from './Divider/Divider.astro';
-export { default as Input } from './Input/Input.astro';
-export { default as Row } from './Row/Row.astro';
-export { default as Center } from './Center/Center.astro';
-export { default as Textarea } from './Textarea/Textarea.astro';
-export { default as Checkbox } from './Checkbox/Checkbox.astro';
-export { default as Toggle } from './Toggle/Toggle.astro';
-export { default as RadioGroup } from './RadioGroup/RadioGroup.astro';
+export { default as Button } from './Button.astro';
+export { default as Divider } from './Divider.astro';
+export { default as Input } from './Input.astro';
+export { default as Row } from './Row.astro';
+export { default as Center } from './Center.astro';
+export { default as Textarea } from './Textarea.astro';
+export { default as Checkbox } from './Checkbox.astro';
+export { default as Toggle } from './Toggle.astro';
+export { default as RadioGroup } from './RadioGroup.astro';
 export { default as Toaster } from './Toast/Toaster.astro';
-export { default as Card } from './Card/Card.astro';
+export { default as Card } from './Card.astro';
 export { default as Modal } from './Modal/Modal.astro';
-export { default as Select } from './Select/Select.astro';
+export { default as Select } from './Select.astro';
 export { default as Dropdown } from './Dropdown/Dropdown.astro';
-export { default as User } from './User/User.astro';
+export { default as User } from './User.astro';
 
 export { default as Sidebar } from './Sidebar/Single.astro';
 export { default as DoubleSidebar } from './Sidebar/Double.astro';
diff --git a/packages/studiocms_ui/src/types/index.ts b/packages/studiocms_ui/src/types/index.ts
index e1c3d53d0..dcfd35488 100644
--- a/packages/studiocms_ui/src/types/index.ts
+++ b/packages/studiocms_ui/src/types/index.ts
@@ -1,16 +1,8 @@
-type PersistentToastProps = {
-	persistent: true;
-	closeButton: true;
-};
-
-type NormalToastProps = {
-	persistent?: false;
-	closeButton?: boolean;
-};
-
-export type ToastProps = (PersistentToastProps | NormalToastProps) & {
+export type ToastProps = {
 	title: string;
 	description?: string;
 	type: 'success' | 'warning' | 'danger' | 'info';
 	duration?: number;
+	persistent?: boolean;
+	closeButton?: boolean;
 };
diff --git a/playgrounds/node/astro.config.mts b/playgrounds/node/astro.config.mts
index 7fcc9e5d7..db7f8ae8d 100644
--- a/playgrounds/node/astro.config.mts
+++ b/playgrounds/node/astro.config.mts
@@ -4,7 +4,7 @@ import webvitals from '@astrojs/web-vitals';
 import studioCMSBlog from '@studiocms/blog';
 import devapps from '@studiocms/devapps';
 import { defineConfig } from 'astro/config';
-import studioCMS from 'studiocms';
+import studioCMS from '../../packages/studiocms/src';
 import { getCoolifyURL } from '../../www/hostUtils';
 
 // https://astro.build/config
diff --git a/playgrounds/node/studiocms.config.mjs b/playgrounds/node/studiocms.config.mjs
index 08d7fbf88..c78f3e10f 100644
--- a/playgrounds/node/studiocms.config.mjs
+++ b/playgrounds/node/studiocms.config.mjs
@@ -1,4 +1,4 @@
-import { defineStudioCMSConfig } from 'studiocms';
+import { defineStudioCMSConfig } from '../../packages/studiocms/src';
 
 export default defineStudioCMSConfig({
 	dbStartPage: false,
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d5373295a..683b81207 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -34,8 +34,8 @@ catalogs:
       specifier: ^20.14.11
       version: 20.14.13
     astro:
-      specifier: ^4.15.12
-      version: 4.15.12
+      specifier: ^4.16
+      version: 4.16.2
     astro-integration-kit:
       specifier: ^0.16.1
       version: 0.16.1
@@ -118,8 +118,8 @@ catalogs:
       specifier: '>=0.14'
       version: 0.14.0
     astro:
-      specifier: '>=4.15'
-      version: 4.15.1
+      specifier: '>=4.16'
+      version: 4.16.2
   studiocms:
     '@types/semver':
       specifier: ^7.5.8
@@ -288,16 +288,16 @@ importers:
         version: 1.19.0
       '@inox-tools/runtime-logger':
         specifier: catalog:studiocms-shared
-        version: 0.3.1(astro@4.15.1(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))
+        version: 0.3.1(astro@4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))
       '@markdoc/markdoc':
         specifier: catalog:studiocms-shared
         version: 0.4.0(@types/react@18.3.5)(react@18.3.1)
       '@matthiesenxyz/astrolace':
         specifier: catalog:studiocms-shared
-        version: 0.3.2(@types/react@18.3.5)(astro@4.15.1(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))
+        version: 0.3.2(@types/react@18.3.5)(astro@4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))
       '@matthiesenxyz/integration-utils':
         specifier: catalog:studiocms-shared
-        version: 0.2.0(astro@4.15.1(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))
+        version: 0.2.0(astro@4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))
       '@matthiesenxyz/unocss-preset-daisyui':
         specifier: catalog:studiocms-shared
         version: 0.1.2(daisyui@4.12.10(postcss@8.4.47))(unocss@0.62.3(postcss@8.4.47)(rollup@4.21.0)(vite@5.4.8(@types/node@22.0.0)))
@@ -345,16 +345,16 @@ importers:
         version: 0.62.3
       '@unpic/astro':
         specifier: catalog:studiocms-imagehandler
-        version: 0.0.46(astro@4.15.1(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))
+        version: 0.0.46(astro@4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))
       arctic:
         specifier: catalog:studiocms-shared
         version: 1.9.2
       astro:
         specifier: catalog:min
-        version: 4.15.1(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3)
+        version: 4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3)
       astro-integration-kit:
         specifier: 'catalog:'
-        version: 0.16.1(astro@4.15.1(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))
+        version: 0.16.1(astro@4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))
       daisyui:
         specifier: catalog:studiocms-shared
         version: 4.12.10(postcss@8.4.47)
@@ -418,7 +418,7 @@ importers:
     dependencies:
       astro:
         specifier: catalog:min
-        version: 4.15.1(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3)
+        version: 4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3)
     devDependencies:
       typescript:
         specifier: 'catalog:'
@@ -434,16 +434,16 @@ importers:
         version: 0.14.0(@cloudflare/workers-types@4.20240725.0)(@types/react@18.3.5)(react@18.3.1)
       '@inox-tools/runtime-logger':
         specifier: catalog:studiocms-shared
-        version: 0.3.1(astro@4.15.1(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))
+        version: 0.3.1(astro@4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))
       '@matthiesenxyz/astrodtsbuilder':
         specifier: catalog:studiocms-shared
-        version: 0.1.2(astro@4.15.1(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))
+        version: 0.1.2(astro@4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))
       '@matthiesenxyz/astrolace':
         specifier: catalog:studiocms-shared
-        version: 0.3.2(@types/react@18.3.5)(astro@4.15.1(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))
+        version: 0.3.2(@types/react@18.3.5)(astro@4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))
       '@matthiesenxyz/integration-utils':
         specifier: catalog:studiocms-shared
-        version: 0.2.0(astro@4.15.1(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))
+        version: 0.2.0(astro@4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))
       '@noble/hashes':
         specifier: catalog:studiocms-shared
         version: 1.4.0
@@ -461,10 +461,10 @@ importers:
         version: 1.9.2
       astro:
         specifier: catalog:min
-        version: 4.15.1(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3)
+        version: 4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3)
       astro-integration-kit:
         specifier: 'catalog:'
-        version: 0.16.1(astro@4.15.1(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))
+        version: 0.16.1(astro@4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))
       lucia:
         specifier: catalog:studiocms-shared
         version: 3.2.0
@@ -492,7 +492,7 @@ importers:
         version: link:../studiocms_core
       astro:
         specifier: catalog:min
-        version: 4.15.1(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3)
+        version: 4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3)
     devDependencies:
       typescript:
         specifier: 'catalog:'
@@ -514,10 +514,10 @@ importers:
         version: link:../studiocms_frontend
       astro:
         specifier: catalog:min
-        version: 4.15.1(@types/node@20.14.13)(rollup@4.21.0)(typescript@5.6.3)
+        version: 4.16.2(@types/node@20.14.13)(rollup@4.21.0)(typescript@5.6.3)
       astro-theme-provider:
         specifier: 'catalog:'
-        version: 0.6.1(astro@4.15.1(@types/node@20.14.13)(rollup@4.21.0)(typescript@5.6.3))
+        version: 0.6.1(astro@4.16.2(@types/node@20.14.13)(rollup@4.21.0)(typescript@5.6.3))
     devDependencies:
       '@types/node':
         specifier: 'catalog:'
@@ -533,13 +533,13 @@ importers:
         version: 0.4.0(@types/react@18.3.5)(react@18.3.1)
       '@matthiesenxyz/astrodtsbuilder':
         specifier: catalog:studiocms-shared
-        version: 0.1.2(astro@4.15.1(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))
+        version: 0.1.2(astro@4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))
       '@matthiesenxyz/astrolace':
         specifier: catalog:studiocms-shared
-        version: 0.3.2(@types/react@18.3.5)(astro@4.15.1(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))
+        version: 0.3.2(@types/react@18.3.5)(astro@4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))
       '@matthiesenxyz/integration-utils':
         specifier: catalog:studiocms-shared
-        version: 0.2.0(astro@4.15.1(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))
+        version: 0.2.0(astro@4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))
       '@noble/hashes':
         specifier: catalog:studiocms-shared
         version: 1.4.0
@@ -548,10 +548,10 @@ importers:
         version: link:../studiocms_robotstxt
       astro:
         specifier: catalog:min
-        version: 4.15.1(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3)
+        version: 4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3)
       astro-integration-kit:
         specifier: 'catalog:'
-        version: 0.16.1(astro@4.15.1(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))
+        version: 0.16.1(astro@4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))
       lucia:
         specifier: catalog:studiocms-shared
         version: 3.2.0
@@ -588,16 +588,16 @@ importers:
     dependencies:
       '@inox-tools/runtime-logger':
         specifier: catalog:studiocms-shared
-        version: 0.3.1(astro@4.15.1(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))
+        version: 0.3.1(astro@4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))
       '@matthiesenxyz/astrodtsbuilder':
         specifier: catalog:studiocms-shared
-        version: 0.1.2(astro@4.15.1(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))
+        version: 0.1.2(astro@4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))
       '@matthiesenxyz/astrolace':
         specifier: catalog:studiocms-shared
-        version: 0.3.2(@types/react@18.3.5)(astro@4.15.1(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))
+        version: 0.3.2(@types/react@18.3.5)(astro@4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))
       '@matthiesenxyz/integration-utils':
         specifier: catalog:studiocms-shared
-        version: 0.2.0(astro@4.15.1(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))
+        version: 0.2.0(astro@4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))
       '@matthiesenxyz/unocss-preset-daisyui':
         specifier: catalog:studiocms-shared
         version: 0.1.2(daisyui@4.12.10(postcss@8.4.47))(unocss@0.62.3(postcss@8.4.47)(rollup@4.21.0)(vite@5.4.8(@types/node@22.0.0)))
@@ -624,10 +624,10 @@ importers:
         version: 0.62.3
       astro:
         specifier: catalog:min
-        version: 4.15.1(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3)
+        version: 4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3)
       astro-integration-kit:
         specifier: 'catalog:'
-        version: 0.16.1(astro@4.15.1(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))
+        version: 0.16.1(astro@4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))
       daisyui:
         specifier: catalog:studiocms-shared
         version: 4.12.10(postcss@8.4.47)
@@ -652,10 +652,10 @@ importers:
         version: 0.14.0
       astro:
         specifier: catalog:min
-        version: 4.15.1(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3)
+        version: 4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3)
       astro-integration-kit:
         specifier: 'catalog:'
-        version: 0.16.1(astro@4.15.1(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))
+        version: 0.16.1(astro@4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))
     devDependencies:
       typescript:
         specifier: 'catalog:'
@@ -668,7 +668,7 @@ importers:
     dependencies:
       '@matthiesenxyz/integration-utils':
         specifier: catalog:studiocms-shared
-        version: 0.2.0(astro@4.15.1(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))
+        version: 0.2.0(astro@4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))
       '@studiocms/core':
         specifier: workspace:*
         version: link:../studiocms_core
@@ -677,10 +677,10 @@ importers:
         version: link:../studiocms_renderers
       astro:
         specifier: catalog:min
-        version: 4.15.1(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3)
+        version: 4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3)
       astro-integration-kit:
         specifier: 'catalog:'
-        version: 0.16.1(astro@4.15.1(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))
+        version: 0.16.1(astro@4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))
     devDependencies:
       typescript:
         specifier: 'catalog:'
@@ -696,22 +696,22 @@ importers:
         version: 1.19.0
       '@matthiesenxyz/astrodtsbuilder':
         specifier: catalog:studiocms-shared
-        version: 0.1.2(astro@4.15.1(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))
+        version: 0.1.2(astro@4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))
       '@matthiesenxyz/integration-utils':
         specifier: catalog:studiocms-shared
-        version: 0.2.0(astro@4.15.1(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))
+        version: 0.2.0(astro@4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))
       '@studiocms/core':
         specifier: workspace:*
         version: link:../studiocms_core
       '@unpic/astro':
         specifier: catalog:studiocms-imagehandler
-        version: 0.0.46(astro@4.15.1(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))
+        version: 0.0.46(astro@4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))
       astro:
         specifier: catalog:min
-        version: 4.15.1(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3)
+        version: 4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3)
       astro-integration-kit:
         specifier: 'catalog:'
-        version: 0.16.1(astro@4.15.1(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))
+        version: 0.16.1(astro@4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))
       unpic:
         specifier: catalog:studiocms-shared
         version: 3.18.0
@@ -733,16 +733,16 @@ importers:
         version: 3.6.2(@types/react-dom@18.3.0)(@types/react@18.3.5)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(vite@5.4.8(@types/node@22.0.0))
       '@inox-tools/runtime-logger':
         specifier: catalog:studiocms-shared
-        version: 0.3.1(astro@4.15.1(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))
+        version: 0.3.1(astro@4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))
       '@markdoc/markdoc':
         specifier: catalog:studiocms-shared
         version: 0.4.0(@types/react@18.3.5)(react@18.3.1)
       '@matthiesenxyz/astrodtsbuilder':
         specifier: catalog:studiocms-shared
-        version: 0.1.2(astro@4.15.1(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))
+        version: 0.1.2(astro@4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))
       '@matthiesenxyz/integration-utils':
         specifier: catalog:studiocms-shared
-        version: 0.2.0(astro@4.15.1(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))
+        version: 0.2.0(astro@4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))
       '@mdx-js/mdx':
         specifier: catalog:studiocms-renderer
         version: 3.0.1
@@ -754,10 +754,10 @@ importers:
         version: link:../studiocms_core
       astro:
         specifier: catalog:min
-        version: 4.15.1(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3)
+        version: 4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3)
       astro-integration-kit:
         specifier: 'catalog:'
-        version: 0.16.1(astro@4.15.1(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))
+        version: 0.16.1(astro@4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))
       marked:
         specifier: catalog:studiocms-shared
         version: 13.0.3
@@ -812,7 +812,7 @@ importers:
     dependencies:
       astro:
         specifier: catalog:min
-        version: 4.15.1(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3)
+        version: 4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3)
 
   packages/studiocms_ui:
     dependencies:
@@ -821,7 +821,7 @@ importers:
         version: 5.1.0
       astro:
         specifier: catalog:min
-        version: 4.15.1(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3)
+        version: 4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3)
     devDependencies:
       typescript:
         specifier: 'catalog:'
@@ -837,7 +837,7 @@ importers:
         version: 0.14.2(@cloudflare/workers-types@4.20240725.0)(@types/react@18.3.5)(react@18.3.1)
       '@astrojs/node':
         specifier: 'catalog:'
-        version: 8.3.3(astro@4.15.12(@types/node@20.14.13)(rollup@4.21.0)(typescript@5.6.3))
+        version: 8.3.3(astro@4.16.2(@types/node@20.14.13)(rollup@4.21.0)(typescript@5.6.3))
       '@astrojs/web-vitals':
         specifier: 'catalog:'
         version: 3.0.0(@astrojs/db@0.14.2(@cloudflare/workers-types@4.20240725.0)(@types/react@18.3.5)(react@18.3.1))
@@ -849,7 +849,7 @@ importers:
         version: link:../../packages/studiocms_devapps
       astro:
         specifier: 'catalog:'
-        version: 4.15.12(@types/node@20.14.13)(rollup@4.21.0)(typescript@5.6.3)
+        version: 4.16.2(@types/node@20.14.13)(rollup@4.21.0)(typescript@5.6.3)
       studiocms:
         specifier: workspace:*
         version: link:../../packages/studiocms
@@ -865,7 +865,7 @@ importers:
     dependencies:
       '@astrojs/node':
         specifier: 'catalog:'
-        version: 8.3.3(astro@4.15.12(@types/node@20.14.13)(rollup@4.21.0)(typescript@5.6.3))
+        version: 8.3.3(astro@4.16.2(@types/node@20.14.13)(rollup@4.21.0)(typescript@5.6.3))
       '@fontsource-variable/onest':
         specifier: 5.1.0
         version: 5.1.0
@@ -874,7 +874,7 @@ importers:
         version: link:../../packages/studiocms_ui
       astro:
         specifier: 'catalog:'
-        version: 4.15.12(@types/node@20.14.13)(rollup@4.21.0)(typescript@5.6.3)
+        version: 4.16.2(@types/node@20.14.13)(rollup@4.21.0)(typescript@5.6.3)
     devDependencies:
       '@types/node':
         specifier: 'catalog:'
@@ -896,37 +896,49 @@ importers:
         version: 0.14.2(@cloudflare/workers-types@4.20240725.0)(@types/react@18.3.5)(react@18.3.1)
       '@astrojs/node':
         specifier: 'catalog:'
-        version: 8.3.3(astro@4.15.12(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))
+        version: 8.3.3(astro@4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))
       '@astrojs/starlight':
         specifier: 'catalog:'
-        version: 0.28.2(astro@4.15.12(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))
+        version: 0.28.2(astro@4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))
       '@fontsource-variable/onest':
         specifier: catalog:studiocms-shared
         version: 5.1.0
       '@lorenzo_lewis/starlight-utils':
         specifier: catalog:docs
-        version: 0.2.0(@astrojs/starlight@0.28.2(astro@4.15.12(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3)))(astro@4.15.12(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))
+        version: 0.2.0(@astrojs/starlight@0.28.2(astro@4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3)))(astro@4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))
       '@shikijs/twoslash':
-        specifier: ^1.22.0
-        version: 1.22.0(typescript@5.6.3)
+        specifier: 1.16.2
+        version: 1.16.2(typescript@5.6.3)
       '@shoelace-style/shoelace':
         specifier: catalog:docs
         version: 2.16.0(@types/react@18.3.5)
+      '@studiocms/ui':
+        specifier: workspace:*
+        version: link:../../packages/studiocms_ui
       '@types/hast':
         specifier: catalog:docs
         version: 3.0.4
       astro:
         specifier: 'catalog:'
-        version: 4.15.12(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3)
+        version: 4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3)
       astro-embed:
         specifier: catalog:docs
-        version: 0.7.2(astro@4.15.12(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))
+        version: 0.7.2(astro@4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))
       hast:
         specifier: catalog:docs
         version: 1.0.0
       hast-util-select:
         specifier: catalog:docs
         version: 6.0.2
+      mdast-util-from-markdown:
+        specifier: ^2.0.1
+        version: 2.0.1
+      mdast-util-gfm:
+        specifier: ^3.0.0
+        version: 3.0.0
+      mdast-util-to-hast:
+        specifier: ^13.2.0
+        version: 13.2.0
       p-retry:
         specifier: catalog:docs
         version: 6.2.0
@@ -936,12 +948,15 @@ importers:
       sharp:
         specifier: 'catalog:'
         version: 0.33.4
+      shiki:
+        specifier: 1.16.2
+        version: 1.16.2
       starlight-package-managers:
         specifier: catalog:docs
-        version: 0.7.0(@astrojs/starlight@0.28.2(astro@4.15.12(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3)))(astro@4.15.12(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))
+        version: 0.7.0(@astrojs/starlight@0.28.2(astro@4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3)))(astro@4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))
       starlight-typedoc:
         specifier: catalog:docs
-        version: 0.16.0(@astrojs/starlight@0.28.2(astro@4.15.12(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3)))(astro@4.15.12(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))(typedoc-plugin-markdown@4.2.9(typedoc@0.26.8(typescript@5.6.3)))(typedoc@0.26.8(typescript@5.6.3))
+        version: 0.16.0(@astrojs/starlight@0.28.2(astro@4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3)))(astro@4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))(typedoc-plugin-markdown@4.2.9(typedoc@0.26.8(typescript@5.6.3)))(typedoc@0.26.8(typescript@5.6.3))
       studiocms:
         specifier: workspace:*
         version: link:../../packages/studiocms
@@ -962,7 +977,7 @@ importers:
         version: 0.9.3(typescript@5.6.3)
       '@astrojs/tailwind':
         specifier: 'catalog:'
-        version: 5.1.0(astro@4.15.12(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))(tailwindcss@3.4.7)
+        version: 5.1.0(astro@4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))(tailwindcss@3.4.7)
       '@fontsource-variable/onest':
         specifier: catalog:studiocms-shared
         version: 5.1.0
@@ -977,7 +992,7 @@ importers:
         version: 0.5.15(tailwindcss@3.4.7)
       astro:
         specifier: 'catalog:'
-        version: 4.15.12(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3)
+        version: 4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3)
       astro-icon:
         specifier: catalog:landing
         version: 1.1.1
@@ -1091,6 +1106,9 @@ packages:
   '@astrojs/markdown-remark@5.2.0':
     resolution: {integrity: sha512-vWGM24KZXz11jR3JO+oqYU3T2qpuOi4uGivJ9SQLCAI01+vEkHC60YJMRvHPc+hwd60F7euNs1PeOEixIIiNQw==}
 
+  '@astrojs/markdown-remark@5.3.0':
+    resolution: {integrity: sha512-r0Ikqr0e6ozPb5bvhup1qdWnSPUvQu6tub4ZLYaKyG50BXZ0ej6FhGz3GpChKpH7kglRFPObJd/bDyf2VM9pkg==}
+
   '@astrojs/mdx@3.1.3':
     resolution: {integrity: sha512-hOM4dMM4RfJI254d3p/AnOZuk2VyKszRtuY5FBm+Xc4XdhIpGrR56OXMNEcWchtwz4HQyPe/eJSgvBjSROcQIQ==}
     engines: {node: ^18.17.1 || ^20.3.0 || >=21.0.0}
@@ -2557,9 +2575,6 @@ packages:
     resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
     engines: {node: '>= 8'}
 
-  '@oslojs/encoding@0.4.1':
-    resolution: {integrity: sha512-hkjo6MuIK/kQR5CrGNdAPZhS01ZCXuWDRJ187zh6qqF2+yMHZpD9fAYpX8q2bOO6Ryhl3XpCT6kUX76N8hhm4Q==}
-
   '@oslojs/encoding@1.1.0':
     resolution: {integrity: sha512-70wQhgYmndg4GCPxPPxPGevRKqTIJ2Nh4OkiMWmDAVYsTQ+Ta7Sq+rPevXyXGdzr30/qZBnyOalCszoMxlyldQ==}
 
@@ -2802,15 +2817,12 @@ packages:
   '@shikijs/transformers@1.14.1':
     resolution: {integrity: sha512-JJqL8QBVCJh3L61jqqEXgFq1cTycwjcGj7aSmqOEsbxnETM9hRlaB74QuXvY/fVJNjbNt8nvWo0VwAXKvMSLRg==}
 
-  '@shikijs/twoslash@1.22.0':
-    resolution: {integrity: sha512-r5F/x4GTh18XzhAREehgT9lCDFZlISBSIsOFZQQaqjiOLG81PIqJN1I1D6XY58UN9OJt+3mffuKq19K4FOJKJA==}
+  '@shikijs/twoslash@1.16.2':
+    resolution: {integrity: sha512-WzlCd7KnyfhBvGYb7tAbrxK1a9Rn2tQvAyv36RcggT418O3K5JRygiYAtf11qQjV1Q25TicczaosjPUVStFW0A==}
 
   '@shikijs/types@1.22.0':
     resolution: {integrity: sha512-Fw/Nr7FGFhlQqHfxzZY8Cwtwk5E9nKDUgeLjZgt3UuhcM3yJR9xj3ZGNravZZok8XmEZMiYkSMTPlPkULB8nww==}
 
-  '@shikijs/vscode-textmate@9.2.0':
-    resolution: {integrity: sha512-5FinaOp6Vdh/dl4/yaOTh0ZeKch+rYS8DUb38V3GMKYVkdqzxw53lViRKUYkVILRiVQT7dcPC7VvAKOR73zVtQ==}
-
   '@shikijs/vscode-textmate@9.3.0':
     resolution: {integrity: sha512-jn7/7ky30idSkd/O5yDBfAnVt+JJpepofP/POZ1iMOxK59cOfqIgg/Dj0eFsjOTMw+4ycJN0uhZH/Eb0bs/EUA==}
 
@@ -3219,13 +3231,8 @@ packages:
       '@astrojs/db':
         optional: true
 
-  astro@4.15.1:
-    resolution: {integrity: sha512-XvKZ2GaDbCsMfcJess4o+4D4cCKja45GJ/9o6EJ6n96xaen8HZMRoJn3YKL9TOjIrL2NuU4mBFMG2JivPJ0foA==}
-    engines: {node: ^18.17.1 || ^20.3.0 || >=21.0.0, npm: '>=9.6.5', pnpm: '>=7.1.0'}
-    hasBin: true
-
-  astro@4.15.12:
-    resolution: {integrity: sha512-PojmALAzwafLUD//hqKD4/+1Fj03Aa2VQY/rztCg6DUMgHLpo3TFV3ob1++kay91z/MdNWR+IGITcXhxAXhiTg==}
+  astro@4.16.2:
+    resolution: {integrity: sha512-Dfkpyt6sA+nv6LnOJr+7bt+gQF5Qh02yqVgyes4c4SvcPScteq1bLX22/z/XW+VU0vlciJOMiM8GWtcDiF6gUQ==}
     engines: {node: ^18.17.1 || ^20.3.0 || >=21.0.0, npm: '>=9.6.5', pnpm: '>=7.1.0'}
     hasBin: true
 
@@ -3283,10 +3290,6 @@ packages:
   boolbase@1.0.0:
     resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==}
 
-  boxen@7.1.1:
-    resolution: {integrity: sha512-2hCgjEmP8YLWQ130n2FerGv7rYpfBmnmp9Uy2Le1vge6X3gZIfSmEzP5QTDElFxcvVcXlEn8Aq6MU/PZygIOog==}
-    engines: {node: '>=14.16'}
-
   boxen@8.0.1:
     resolution: {integrity: sha512-F3PH5k5juxom4xktynS7MoFY+NUWH5LC4CnH11YB8NPew+HLpmBLCybSAEyb2F+4pRXhuhWqFesoQd6DAyc2hw==}
     engines: {node: '>=18'}
@@ -3336,10 +3339,6 @@ packages:
     resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==}
     engines: {node: '>= 6'}
 
-  camelcase@7.0.1:
-    resolution: {integrity: sha512-xlx1yCK2Oc1APsPXDL2LdlNP6+uu8OCDdhOBSVT279M/S+y75O30C2VuD8T2ogdePBBl7PfPF4504tnLgX3zfw==}
-    engines: {node: '>=14.16'}
-
   camelcase@8.0.0:
     resolution: {integrity: sha512-8WB3Jcas3swSvjIeA2yvCJ+Miyz5l1ZmB6HFb9R1317dt9LCQoswg/BGrmAmkWVEszSrrg4RwmO46qIm2OEnSA==}
     engines: {node: '>=16'}
@@ -3485,10 +3484,6 @@ packages:
   convert-source-map@2.0.0:
     resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
 
-  cookie@0.6.0:
-    resolution: {integrity: sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==}
-    engines: {node: '>= 0.6'}
-
   cookie@0.7.2:
     resolution: {integrity: sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==}
     engines: {node: '>= 0.6'}
@@ -4105,6 +4100,9 @@ packages:
   hast-util-from-html@2.0.1:
     resolution: {integrity: sha512-RXQBLMl9kjKVNkJTIO6bZyb2n+cUH8LFaSSzo82jiLT6Tfc+Pt7VQCS+/h3YwG4jaNE2TA2sdJisGWR+aJrp0g==}
 
+  hast-util-from-html@2.0.3:
+    resolution: {integrity: sha512-CUSRHXyKjzHov8yKsQjGOElXy/3EKpyX56ELnkHH34vDVw1N1XSQ1ZcAvTyAPtGqLTuKP/uxM+aLkSPqF/EtMw==}
+
   hast-util-from-parse5@8.0.1:
     resolution: {integrity: sha512-Er/Iixbc7IEa7r/XLtuG52zoqn/b3Xng/w6aZQ0xGVxzhw5xUFxcRqdPzP6yFi/4HBYRaifaI5fQ1RH8n0ZeOQ==}
 
@@ -5041,9 +5039,6 @@ packages:
     resolution: {integrity: sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==}
     engines: {node: '>=16 || 14 >=14.18'}
 
-  path-to-regexp@6.2.2:
-    resolution: {integrity: sha512-GQX3SSMokngb36+whdpRXE+3f9V8UzyAorlYvOGx87ufGHehNTn5lCxrKtLyZ4Yl/wEKnNnr98ZzOwwDZV5ogw==}
-
   path-type@4.0.0:
     resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
     engines: {node: '>=8'}
@@ -5263,6 +5258,9 @@ packages:
   rehype-stringify@10.0.0:
     resolution: {integrity: sha512-1TX1i048LooI9QoecrXy7nGFFbFSufxVRAfc6Y9YMRAi56l+oB0zP51mLSV312uRuvVLPV1opSlJmslozR1XHQ==}
 
+  rehype-stringify@10.0.1:
+    resolution: {integrity: sha512-k9ecfXHmIPuFVI61B9DeLPN0qFHfawM6RsuX48hoqlaKSF61RskNjSm1lI8PhBEM0MRdLxVVm4WmTqJQccH9mA==}
+
   rehype@13.0.1:
     resolution: {integrity: sha512-AcSLS2mItY+0fYu9xKxOu1LhUZeBZZBx8//5HKzF+0XP+eP8+6a5MXn2+DW2kfXR6Dtp1FEXMVrjyKAcvcU8vg==}
 
@@ -5284,6 +5282,9 @@ packages:
   remark-rehype@11.1.0:
     resolution: {integrity: sha512-z3tJrAs2kIs1AqIIy6pzHmAHlF1hWQ+OdY4/hv+Wxe35EhyLKcajL33iUEn3ScxtFox9nUvRufR/Zre8Q08H/g==}
 
+  remark-rehype@11.1.1:
+    resolution: {integrity: sha512-g/osARvjkBXb6Wo0XvAeXQohVta8i84ACbenPpoSsxTOQH/Ae0/RGP4WZgnMH5pMLpsj4FG7OHmcIcXxpza8eQ==}
+
   remark-smartypants@3.0.2:
     resolution: {integrity: sha512-ILTWeOriIluwEvPjv67v7Blgrcx+LZOkAUVtKI3putuhlZm84FnqDORNXPPm+HY3NdZOMhyDwZ1E+eZB/Df5dA==}
     engines: {node: '>=16.0.0'}
@@ -5675,10 +5676,6 @@ packages:
     peerDependencies:
       typescript: '*'
 
-  type-fest@2.19.0:
-    resolution: {integrity: sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==}
-    engines: {node: '>=12.20'}
-
   type-fest@4.26.1:
     resolution: {integrity: sha512-yOGpmOAL7CkKe/91I5O3gPICmJNLJ1G4zFYVAsRHg7M64biSnPtRj0WNQt++bRkjYOqjWXrhnUw1utzmVErAdg==}
     engines: {node: '>=16'}
@@ -5839,14 +5836,6 @@ packages:
       terser:
         optional: true
 
-  vitefu@0.2.5:
-    resolution: {integrity: sha512-SgHtMLoqaeeGnd2evZ849ZbACbnwQCIwRH57t18FxcXoZop0uQu0uzlIhJBlF/eWVzuce0sHeqPcDo+evVcg8Q==}
-    peerDependencies:
-      vite: ^3.0.0 || ^4.0.0 || ^5.0.0
-    peerDependenciesMeta:
-      vite:
-        optional: true
-
   vitefu@1.0.2:
     resolution: {integrity: sha512-0/iAvbXyM3RiPPJ4lyD4w6Mjgtf4ejTK6TPvTNG3H32PLwuT0N/ZjJLiXug7ETE/LWtTeHw9WRv7uX/tIKYyKg==}
     peerDependencies:
@@ -6005,10 +5994,6 @@ packages:
     engines: {node: '>= 8'}
     hasBin: true
 
-  widest-line@4.0.1:
-    resolution: {integrity: sha512-o0cyEG0e8GPzT4iGHphIOh0cJOV8fivsXxddQasHPHfoZf1ZexrfeA21w2NaEN1RHE+fXlfISmOE8R9N3u3Qig==}
-    engines: {node: '>=12'}
-
   widest-line@5.0.0:
     resolution: {integrity: sha512-c9bZp7b5YtRj2wOe6dlj32MK+Bx/M/d+9VB2SHM1OtsUHR0aV0tdP6DWh/iMt0kWi1t5g1Iudu6hQRNd1A4PVA==}
     engines: {node: '>=18'}
@@ -6135,38 +6120,38 @@ snapshots:
 
   '@antfu/utils@0.7.10': {}
 
-  '@astro-community/astro-embed-integration@0.7.1(astro@4.15.12(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))':
+  '@astro-community/astro-embed-integration@0.7.1(astro@4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))':
     dependencies:
       '@astro-community/astro-embed-link-preview': 0.2.1
-      '@astro-community/astro-embed-twitter': 0.5.4(astro@4.15.12(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))
-      '@astro-community/astro-embed-vimeo': 0.3.7(astro@4.15.12(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))
-      '@astro-community/astro-embed-youtube': 0.5.2(astro@4.15.12(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))
+      '@astro-community/astro-embed-twitter': 0.5.4(astro@4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))
+      '@astro-community/astro-embed-vimeo': 0.3.7(astro@4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))
+      '@astro-community/astro-embed-youtube': 0.5.2(astro@4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))
       '@types/unist': 2.0.10
-      astro: 4.15.12(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3)
-      astro-auto-import: 0.4.2(astro@4.15.12(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))
+      astro: 4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3)
+      astro-auto-import: 0.4.2(astro@4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))
       unist-util-select: 4.0.3
 
   '@astro-community/astro-embed-link-preview@0.2.1':
     dependencies:
       '@astro-community/astro-embed-utils': 0.1.3
 
-  '@astro-community/astro-embed-twitter@0.5.4(astro@4.15.12(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))':
+  '@astro-community/astro-embed-twitter@0.5.4(astro@4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))':
     dependencies:
       '@astro-community/astro-embed-utils': 0.1.3
-      astro: 4.15.12(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3)
+      astro: 4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3)
 
   '@astro-community/astro-embed-utils@0.1.3':
     dependencies:
       linkedom: 0.14.26
 
-  '@astro-community/astro-embed-vimeo@0.3.7(astro@4.15.12(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))':
+  '@astro-community/astro-embed-vimeo@0.3.7(astro@4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))':
     dependencies:
       '@astro-community/astro-embed-utils': 0.1.3
-      astro: 4.15.12(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3)
+      astro: 4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3)
 
-  '@astro-community/astro-embed-youtube@0.5.2(astro@4.15.12(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))':
+  '@astro-community/astro-embed-youtube@0.5.2(astro@4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))':
     dependencies:
-      astro: 4.15.12(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3)
+      astro: 4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3)
       lite-youtube-embed: 0.3.2
 
   '@astrojs/check@0.9.3(typescript@5.6.3)':
@@ -6325,12 +6310,35 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@astrojs/mdx@3.1.3(astro@4.15.12(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))':
+  '@astrojs/markdown-remark@5.3.0':
+    dependencies:
+      '@astrojs/prism': 3.1.0
+      github-slugger: 2.0.0
+      hast-util-from-html: 2.0.3
+      hast-util-to-text: 4.0.2
+      import-meta-resolve: 4.1.0
+      mdast-util-definitions: 6.0.0
+      rehype-raw: 7.0.0
+      rehype-stringify: 10.0.1
+      remark-gfm: 4.0.0
+      remark-parse: 11.0.0
+      remark-rehype: 11.1.1
+      remark-smartypants: 3.0.2
+      shiki: 1.22.0
+      unified: 11.0.5
+      unist-util-remove-position: 5.0.0
+      unist-util-visit: 5.0.0
+      unist-util-visit-parents: 6.0.1
+      vfile: 6.0.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@astrojs/mdx@3.1.3(astro@4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))':
     dependencies:
       '@astrojs/markdown-remark': 5.2.0
       '@mdx-js/mdx': 3.0.1
       acorn: 8.12.1
-      astro: 4.15.12(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3)
+      astro: 4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3)
       es-module-lexer: 1.5.4
       estree-util-visit: 2.0.0
       github-slugger: 2.0.0
@@ -6346,17 +6354,17 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@astrojs/node@8.3.3(astro@4.15.12(@types/node@20.14.13)(rollup@4.21.0)(typescript@5.6.3))':
+  '@astrojs/node@8.3.3(astro@4.16.2(@types/node@20.14.13)(rollup@4.21.0)(typescript@5.6.3))':
     dependencies:
-      astro: 4.15.12(@types/node@20.14.13)(rollup@4.21.0)(typescript@5.6.3)
+      astro: 4.16.2(@types/node@20.14.13)(rollup@4.21.0)(typescript@5.6.3)
       send: 0.18.0
       server-destroy: 1.0.1
     transitivePeerDependencies:
       - supports-color
 
-  '@astrojs/node@8.3.3(astro@4.15.12(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))':
+  '@astrojs/node@8.3.3(astro@4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))':
     dependencies:
-      astro: 4.15.12(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3)
+      astro: 4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3)
       send: 0.18.0
       server-destroy: 1.0.1
     transitivePeerDependencies:
@@ -6389,15 +6397,15 @@ snapshots:
       stream-replace-string: 2.0.0
       zod: 3.23.8
 
-  '@astrojs/starlight@0.28.2(astro@4.15.12(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))':
+  '@astrojs/starlight@0.28.2(astro@4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))':
     dependencies:
-      '@astrojs/mdx': 3.1.3(astro@4.15.12(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))
+      '@astrojs/mdx': 3.1.3(astro@4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))
       '@astrojs/sitemap': 3.1.6
       '@pagefind/default-ui': 1.1.0
       '@types/hast': 3.0.4
       '@types/mdast': 4.0.4
-      astro: 4.15.12(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3)
-      astro-expressive-code: 0.35.6(astro@4.15.12(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))
+      astro: 4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3)
+      astro-expressive-code: 0.35.6(astro@4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))
       bcp-47: 2.1.0
       hast-util-from-html: 2.0.1
       hast-util-select: 6.0.2
@@ -6423,9 +6431,9 @@ snapshots:
       kleur: 4.1.5
       ora: 8.1.0
 
-  '@astrojs/tailwind@5.1.0(astro@4.15.12(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))(tailwindcss@3.4.7)':
+  '@astrojs/tailwind@5.1.0(astro@4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))(tailwindcss@3.4.7)':
     dependencies:
-      astro: 4.15.12(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3)
+      astro: 4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3)
       autoprefixer: 10.4.19(postcss@8.4.47)
       postcss: 8.4.47
       postcss-load-config: 4.0.2(postcss@8.4.47)
@@ -7204,7 +7212,7 @@ snapshots:
   '@expressive-code/plugin-shiki@0.35.6':
     dependencies:
       '@expressive-code/core': 0.35.6
-      shiki: 1.22.0
+      shiki: 1.16.2
 
   '@expressive-code/plugin-text-markers@0.35.6':
     dependencies:
@@ -7408,18 +7416,18 @@ snapshots:
   '@img/sharp-win32-x64@0.33.5':
     optional: true
 
-  '@inox-tools/modular-station@0.3.0(astro@4.15.1(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))':
+  '@inox-tools/modular-station@0.3.0(astro@4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))':
     dependencies:
       '@inox-tools/utils': 0.1.3
-      astro: 4.15.1(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3)
-      astro-integration-kit: 0.16.1(astro@4.15.1(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))
+      astro: 4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3)
+      astro-integration-kit: 0.16.1(astro@4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))
 
-  '@inox-tools/runtime-logger@0.3.1(astro@4.15.1(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))':
+  '@inox-tools/runtime-logger@0.3.1(astro@4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))':
     dependencies:
-      '@inox-tools/modular-station': 0.3.0(astro@4.15.1(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))
+      '@inox-tools/modular-station': 0.3.0(astro@4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))
       '@inox-tools/utils': 0.1.3
-      astro: 4.15.1(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3)
-      astro-integration-kit: 0.16.1(astro@4.15.1(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))
+      astro: 4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3)
+      astro-integration-kit: 0.16.1(astro@4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))
 
   '@inox-tools/utils@0.1.3': {}
 
@@ -7584,11 +7592,11 @@ snapshots:
     dependencies:
       '@lit-labs/ssr-dom-shim': 1.2.0
 
-  '@lorenzo_lewis/starlight-utils@0.2.0(@astrojs/starlight@0.28.2(astro@4.15.12(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3)))(astro@4.15.12(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))':
+  '@lorenzo_lewis/starlight-utils@0.2.0(@astrojs/starlight@0.28.2(astro@4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3)))(astro@4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))':
     dependencies:
-      '@astrojs/starlight': 0.28.2(astro@4.15.12(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))
-      astro: 4.15.12(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3)
-      astro-integration-kit: 0.16.1(astro@4.15.12(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))
+      '@astrojs/starlight': 0.28.2(astro@4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))
+      astro: 4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3)
+      astro-integration-kit: 0.16.1(astro@4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))
 
   '@manypkg/find-root@1.1.0':
     dependencies:
@@ -7612,24 +7620,24 @@ snapshots:
       '@types/react': 18.3.5
       react: 18.3.1
 
-  '@matthiesenxyz/astrodtsbuilder@0.1.2(astro@4.15.1(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))':
+  '@matthiesenxyz/astrodtsbuilder@0.1.2(astro@4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))':
     dependencies:
-      astro: 4.15.1(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3)
+      astro: 4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3)
 
-  '@matthiesenxyz/astrolace@0.3.2(@types/react@18.3.5)(astro@4.15.1(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))':
+  '@matthiesenxyz/astrolace@0.3.2(@types/react@18.3.5)(astro@4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))':
     dependencies:
       '@shoelace-style/shoelace': 2.16.0(@types/react@18.3.5)
-      astro: 4.15.1(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3)
-      astro-integration-kit: 0.16.1(astro@4.15.1(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))
+      astro: 4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3)
+      astro-integration-kit: 0.16.1(astro@4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))
       lit: 3.1.4
       zod: 3.23.8
     transitivePeerDependencies:
       - '@types/react'
 
-  '@matthiesenxyz/integration-utils@0.2.0(astro@4.15.1(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))':
+  '@matthiesenxyz/integration-utils@0.2.0(astro@4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))':
     dependencies:
-      astro: 4.15.1(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3)
-      astro-integration-kit: 0.16.1(astro@4.15.1(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))
+      astro: 4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3)
+      astro-integration-kit: 0.16.1(astro@4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))
       package-json: 10.0.1
       semver: 7.6.3
 
@@ -7883,8 +7891,6 @@ snapshots:
       '@nodelib/fs.scandir': 2.1.5
       fastq: 1.17.1
 
-  '@oslojs/encoding@0.4.1': {}
-
   '@oslojs/encoding@1.1.0': {}
 
   '@pagefind/darwin-arm64@1.1.0':
@@ -8069,10 +8075,9 @@ snapshots:
     dependencies:
       shiki: 1.14.1
 
-  '@shikijs/twoslash@1.22.0(typescript@5.6.3)':
+  '@shikijs/twoslash@1.16.2(typescript@5.6.3)':
     dependencies:
-      '@shikijs/core': 1.22.0
-      '@shikijs/types': 1.22.0
+      '@shikijs/core': 1.16.2
       twoslash: 0.2.12(typescript@5.6.3)
     transitivePeerDependencies:
       - supports-color
@@ -8083,8 +8088,6 @@ snapshots:
       '@shikijs/vscode-textmate': 9.3.0
       '@types/hast': 3.0.4
 
-  '@shikijs/vscode-textmate@9.2.0': {}
-
   '@shikijs/vscode-textmate@9.3.0': {}
 
   '@shoelace-style/animations@1.1.0': {}
@@ -8419,12 +8422,12 @@ snapshots:
       - rollup
       - supports-color
 
-  '@unpic/astro@0.0.46(astro@4.15.1(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))':
+  '@unpic/astro@0.0.46(astro@4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))':
     dependencies:
       '@unpic/core': 0.0.49
       '@unpic/pixels': 1.2.2
       '@unpic/placeholder': 0.1.2
-      astro: 4.15.1(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3)
+      astro: 4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3)
       blurhash: 2.0.5
 
   '@unpic/core@0.0.49':
@@ -8566,24 +8569,24 @@ snapshots:
 
   astring@1.8.6: {}
 
-  astro-auto-import@0.4.2(astro@4.15.12(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3)):
+  astro-auto-import@0.4.2(astro@4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3)):
     dependencies:
       '@types/node': 18.19.42
       acorn: 8.12.1
-      astro: 4.15.12(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3)
+      astro: 4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3)
 
-  astro-embed@0.7.2(astro@4.15.12(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3)):
+  astro-embed@0.7.2(astro@4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3)):
     dependencies:
-      '@astro-community/astro-embed-integration': 0.7.1(astro@4.15.12(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))
+      '@astro-community/astro-embed-integration': 0.7.1(astro@4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))
       '@astro-community/astro-embed-link-preview': 0.2.1
-      '@astro-community/astro-embed-twitter': 0.5.4(astro@4.15.12(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))
-      '@astro-community/astro-embed-vimeo': 0.3.7(astro@4.15.12(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))
-      '@astro-community/astro-embed-youtube': 0.5.2(astro@4.15.12(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))
-      astro: 4.15.12(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3)
+      '@astro-community/astro-embed-twitter': 0.5.4(astro@4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))
+      '@astro-community/astro-embed-vimeo': 0.3.7(astro@4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))
+      '@astro-community/astro-embed-youtube': 0.5.2(astro@4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))
+      astro: 4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3)
 
-  astro-expressive-code@0.35.6(astro@4.15.12(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3)):
+  astro-expressive-code@0.35.6(astro@4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3)):
     dependencies:
-      astro: 4.15.12(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3)
+      astro: 4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3)
       rehype-expressive-code: 0.35.6
 
   astro-icon@1.1.1:
@@ -8595,213 +8598,41 @@ snapshots:
       - debug
       - supports-color
 
-  astro-integration-kit@0.14.0(astro@4.15.1(@types/node@20.14.13)(rollup@4.21.0)(typescript@5.6.3)):
-    dependencies:
-      astro: 4.15.1(@types/node@20.14.13)(rollup@4.21.0)(typescript@5.6.3)
-      pathe: 1.1.2
-      recast: 0.23.9
-
-  astro-integration-kit@0.16.1(astro@4.15.1(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3)):
+  astro-integration-kit@0.14.0(astro@4.16.2(@types/node@20.14.13)(rollup@4.21.0)(typescript@5.6.3)):
     dependencies:
-      astro: 4.15.1(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3)
+      astro: 4.16.2(@types/node@20.14.13)(rollup@4.21.0)(typescript@5.6.3)
       pathe: 1.1.2
       recast: 0.23.9
 
-  astro-integration-kit@0.16.1(astro@4.15.12(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3)):
+  astro-integration-kit@0.16.1(astro@4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3)):
     dependencies:
-      astro: 4.15.12(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3)
+      astro: 4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3)
       pathe: 1.1.2
       recast: 0.23.9
 
-  astro-pages@0.3.0(astro@4.15.1(@types/node@20.14.13)(rollup@4.21.0)(typescript@5.6.3)):
+  astro-pages@0.3.0(astro@4.16.2(@types/node@20.14.13)(rollup@4.21.0)(typescript@5.6.3)):
     dependencies:
-      astro: 4.15.1(@types/node@20.14.13)(rollup@4.21.0)(typescript@5.6.3)
+      astro: 4.16.2(@types/node@20.14.13)(rollup@4.21.0)(typescript@5.6.3)
       fast-glob: 3.3.2
 
-  astro-public@0.1.0(astro@4.15.1(@types/node@20.14.13)(rollup@4.21.0)(typescript@5.6.3)):
+  astro-public@0.1.0(astro@4.16.2(@types/node@20.14.13)(rollup@4.21.0)(typescript@5.6.3)):
     dependencies:
-      astro: 4.15.1(@types/node@20.14.13)(rollup@4.21.0)(typescript@5.6.3)
+      astro: 4.16.2(@types/node@20.14.13)(rollup@4.21.0)(typescript@5.6.3)
 
-  astro-theme-provider@0.6.1(astro@4.15.1(@types/node@20.14.13)(rollup@4.21.0)(typescript@5.6.3)):
+  astro-theme-provider@0.6.1(astro@4.16.2(@types/node@20.14.13)(rollup@4.21.0)(typescript@5.6.3)):
     dependencies:
-      astro: 4.15.1(@types/node@20.14.13)(rollup@4.21.0)(typescript@5.6.3)
-      astro-integration-kit: 0.14.0(astro@4.15.1(@types/node@20.14.13)(rollup@4.21.0)(typescript@5.6.3))
-      astro-pages: 0.3.0(astro@4.15.1(@types/node@20.14.13)(rollup@4.21.0)(typescript@5.6.3))
-      astro-public: 0.1.0(astro@4.15.1(@types/node@20.14.13)(rollup@4.21.0)(typescript@5.6.3))
+      astro: 4.16.2(@types/node@20.14.13)(rollup@4.21.0)(typescript@5.6.3)
+      astro-integration-kit: 0.14.0(astro@4.16.2(@types/node@20.14.13)(rollup@4.21.0)(typescript@5.6.3))
+      astro-pages: 0.3.0(astro@4.16.2(@types/node@20.14.13)(rollup@4.21.0)(typescript@5.6.3))
+      astro-public: 0.1.0(astro@4.16.2(@types/node@20.14.13)(rollup@4.21.0)(typescript@5.6.3))
       callsites: 4.2.0
       fast-glob: 3.3.2
 
-  astro@4.15.1(@types/node@20.14.13)(rollup@4.21.0)(typescript@5.6.3):
+  astro@4.16.2(@types/node@20.14.13)(rollup@4.21.0)(typescript@5.6.3):
     dependencies:
       '@astrojs/compiler': 2.10.3
       '@astrojs/internal-helpers': 0.4.1
-      '@astrojs/markdown-remark': 5.2.0
-      '@astrojs/telemetry': 3.1.0
-      '@babel/core': 7.25.7
-      '@babel/plugin-transform-react-jsx': 7.25.7(@babel/core@7.25.7)
-      '@babel/types': 7.25.7
-      '@oslojs/encoding': 0.4.1
-      '@rollup/pluginutils': 5.1.2(rollup@4.21.0)
-      '@types/babel__core': 7.20.5
-      '@types/cookie': 0.6.0
-      acorn: 8.12.1
-      aria-query: 5.3.2
-      axobject-query: 4.1.0
-      boxen: 7.1.1
-      ci-info: 4.0.0
-      clsx: 2.1.1
-      common-ancestor-path: 1.0.1
-      cookie: 0.6.0
-      cssesc: 3.0.0
-      debug: 4.3.7
-      deterministic-object-hash: 2.0.2
-      devalue: 5.1.1
-      diff: 5.2.0
-      dlv: 1.1.3
-      dset: 3.1.4
-      es-module-lexer: 1.5.4
-      esbuild: 0.21.5
-      estree-walker: 3.0.3
-      fast-glob: 3.3.2
-      fastq: 1.17.1
-      flattie: 1.1.1
-      github-slugger: 2.0.0
-      gray-matter: 4.0.3
-      html-escaper: 3.0.3
-      http-cache-semantics: 4.1.1
-      js-yaml: 4.1.0
-      kleur: 4.1.5
-      magic-string: 0.30.11
-      magicast: 0.3.5
-      micromatch: 4.0.8
-      mrmime: 2.0.0
-      neotraverse: 0.6.18
-      ora: 8.1.0
-      p-limit: 6.1.0
-      p-queue: 8.0.1
-      path-to-regexp: 6.2.2
-      preferred-pm: 4.0.0
-      prompts: 2.4.2
-      rehype: 13.0.2
-      semver: 7.6.3
-      shiki: 1.22.0
-      string-width: 7.2.0
-      strip-ansi: 7.1.0
-      tinyexec: 0.3.0
-      tsconfck: 3.1.3(typescript@5.6.3)
-      unist-util-visit: 5.0.0
-      vfile: 6.0.3
-      vite: 5.4.8(@types/node@20.14.13)
-      vitefu: 0.2.5(vite@5.4.8(@types/node@20.14.13))
-      which-pm: 3.0.0
-      xxhash-wasm: 1.0.2
-      yargs-parser: 21.1.1
-      zod: 3.23.8
-      zod-to-json-schema: 3.23.3(zod@3.23.8)
-      zod-to-ts: 1.2.0(typescript@5.6.3)(zod@3.23.8)
-    optionalDependencies:
-      sharp: 0.33.5
-    transitivePeerDependencies:
-      - '@types/node'
-      - less
-      - lightningcss
-      - rollup
-      - sass
-      - sass-embedded
-      - stylus
-      - sugarss
-      - supports-color
-      - terser
-      - typescript
-
-  astro@4.15.1(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3):
-    dependencies:
-      '@astrojs/compiler': 2.10.3
-      '@astrojs/internal-helpers': 0.4.1
-      '@astrojs/markdown-remark': 5.2.0
-      '@astrojs/telemetry': 3.1.0
-      '@babel/core': 7.25.7
-      '@babel/plugin-transform-react-jsx': 7.25.7(@babel/core@7.25.7)
-      '@babel/types': 7.25.7
-      '@oslojs/encoding': 0.4.1
-      '@rollup/pluginutils': 5.1.2(rollup@4.21.0)
-      '@types/babel__core': 7.20.5
-      '@types/cookie': 0.6.0
-      acorn: 8.12.1
-      aria-query: 5.3.2
-      axobject-query: 4.1.0
-      boxen: 7.1.1
-      ci-info: 4.0.0
-      clsx: 2.1.1
-      common-ancestor-path: 1.0.1
-      cookie: 0.6.0
-      cssesc: 3.0.0
-      debug: 4.3.7
-      deterministic-object-hash: 2.0.2
-      devalue: 5.1.1
-      diff: 5.2.0
-      dlv: 1.1.3
-      dset: 3.1.4
-      es-module-lexer: 1.5.4
-      esbuild: 0.21.5
-      estree-walker: 3.0.3
-      fast-glob: 3.3.2
-      fastq: 1.17.1
-      flattie: 1.1.1
-      github-slugger: 2.0.0
-      gray-matter: 4.0.3
-      html-escaper: 3.0.3
-      http-cache-semantics: 4.1.1
-      js-yaml: 4.1.0
-      kleur: 4.1.5
-      magic-string: 0.30.11
-      magicast: 0.3.5
-      micromatch: 4.0.8
-      mrmime: 2.0.0
-      neotraverse: 0.6.18
-      ora: 8.1.0
-      p-limit: 6.1.0
-      p-queue: 8.0.1
-      path-to-regexp: 6.2.2
-      preferred-pm: 4.0.0
-      prompts: 2.4.2
-      rehype: 13.0.2
-      semver: 7.6.3
-      shiki: 1.22.0
-      string-width: 7.2.0
-      strip-ansi: 7.1.0
-      tinyexec: 0.3.0
-      tsconfck: 3.1.3(typescript@5.6.3)
-      unist-util-visit: 5.0.0
-      vfile: 6.0.3
-      vite: 5.4.8(@types/node@22.0.0)
-      vitefu: 0.2.5(vite@5.4.8(@types/node@22.0.0))
-      which-pm: 3.0.0
-      xxhash-wasm: 1.0.2
-      yargs-parser: 21.1.1
-      zod: 3.23.8
-      zod-to-json-schema: 3.23.3(zod@3.23.8)
-      zod-to-ts: 1.2.0(typescript@5.6.3)(zod@3.23.8)
-    optionalDependencies:
-      sharp: 0.33.5
-    transitivePeerDependencies:
-      - '@types/node'
-      - less
-      - lightningcss
-      - rollup
-      - sass
-      - sass-embedded
-      - stylus
-      - sugarss
-      - supports-color
-      - terser
-      - typescript
-
-  astro@4.15.12(@types/node@20.14.13)(rollup@4.21.0)(typescript@5.6.3):
-    dependencies:
-      '@astrojs/compiler': 2.10.3
-      '@astrojs/internal-helpers': 0.4.1
-      '@astrojs/markdown-remark': 5.2.0
+      '@astrojs/markdown-remark': 5.3.0
       '@astrojs/telemetry': 3.1.0
       '@babel/core': 7.25.7
       '@babel/plugin-transform-react-jsx': 7.25.7(@babel/core@7.25.7)
@@ -8829,7 +8660,6 @@ snapshots:
       esbuild: 0.21.5
       estree-walker: 3.0.3
       fast-glob: 3.3.2
-      fastq: 1.17.1
       flattie: 1.1.1
       github-slugger: 2.0.0
       gray-matter: 4.0.3
@@ -8850,7 +8680,6 @@ snapshots:
       rehype: 13.0.2
       semver: 7.6.3
       shiki: 1.22.0
-      string-width: 7.2.0
       tinyexec: 0.3.0
       tsconfck: 3.1.3(typescript@5.6.3)
       unist-util-visit: 5.0.0
@@ -8878,11 +8707,11 @@ snapshots:
       - terser
       - typescript
 
-  astro@4.15.12(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3):
+  astro@4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3):
     dependencies:
       '@astrojs/compiler': 2.10.3
       '@astrojs/internal-helpers': 0.4.1
-      '@astrojs/markdown-remark': 5.2.0
+      '@astrojs/markdown-remark': 5.3.0
       '@astrojs/telemetry': 3.1.0
       '@babel/core': 7.25.7
       '@babel/plugin-transform-react-jsx': 7.25.7(@babel/core@7.25.7)
@@ -8910,7 +8739,6 @@ snapshots:
       esbuild: 0.21.5
       estree-walker: 3.0.3
       fast-glob: 3.3.2
-      fastq: 1.17.1
       flattie: 1.1.1
       github-slugger: 2.0.0
       gray-matter: 4.0.3
@@ -8931,7 +8759,6 @@ snapshots:
       rehype: 13.0.2
       semver: 7.6.3
       shiki: 1.22.0
-      string-width: 7.2.0
       tinyexec: 0.3.0
       tsconfck: 3.1.3(typescript@5.6.3)
       unist-util-visit: 5.0.0
@@ -9009,17 +8836,6 @@ snapshots:
 
   boolbase@1.0.0: {}
 
-  boxen@7.1.1:
-    dependencies:
-      ansi-align: 3.0.1
-      camelcase: 7.0.1
-      chalk: 5.3.0
-      cli-boxes: 3.0.0
-      string-width: 5.1.2
-      type-fest: 2.19.0
-      widest-line: 4.0.1
-      wrap-ansi: 8.1.0
-
   boxen@8.0.1:
     dependencies:
       ansi-align: 3.0.1
@@ -9075,8 +8891,6 @@ snapshots:
 
   camelcase-css@2.0.1: {}
 
-  camelcase@7.0.1: {}
-
   camelcase@8.0.0: {}
 
   camelize@1.0.1: {}
@@ -9215,8 +9029,6 @@ snapshots:
 
   convert-source-map@2.0.0: {}
 
-  cookie@0.6.0: {}
-
   cookie@0.7.2: {}
 
   cross-spawn@5.1.0:
@@ -9769,6 +9581,15 @@ snapshots:
       vfile: 6.0.3
       vfile-message: 4.0.2
 
+  hast-util-from-html@2.0.3:
+    dependencies:
+      '@types/hast': 3.0.4
+      devlop: 1.1.0
+      hast-util-from-parse5: 8.0.1
+      parse5: 7.1.2
+      vfile: 6.0.3
+      vfile-message: 4.0.2
+
   hast-util-from-parse5@8.0.1:
     dependencies:
       '@types/hast': 3.0.4
@@ -10305,7 +10126,7 @@ snapshots:
 
   magicast@0.3.5:
     dependencies:
-      '@babel/parser': 7.25.4
+      '@babel/parser': 7.25.7
       '@babel/types': 7.25.7
       source-map-js: 1.2.1
 
@@ -11115,8 +10936,6 @@ snapshots:
       lru-cache: 10.4.3
       minipass: 7.1.2
 
-  path-to-regexp@6.2.2: {}
-
   path-type@4.0.0: {}
 
   pathe@1.1.2: {}
@@ -11343,6 +11162,12 @@ snapshots:
       hast-util-to-html: 9.0.1
       unified: 11.0.5
 
+  rehype-stringify@10.0.1:
+    dependencies:
+      '@types/hast': 3.0.4
+      hast-util-to-html: 9.0.3
+      unified: 11.0.5
+
   rehype@13.0.1:
     dependencies:
       '@types/hast': 3.0.4
@@ -11401,6 +11226,14 @@ snapshots:
       unified: 11.0.5
       vfile: 6.0.3
 
+  remark-rehype@11.1.1:
+    dependencies:
+      '@types/hast': 3.0.4
+      '@types/mdast': 4.0.4
+      mdast-util-to-hast: 13.2.0
+      unified: 11.0.5
+      vfile: 6.0.3
+
   remark-smartypants@3.0.2:
     dependencies:
       retext: 9.0.0
@@ -11628,7 +11461,7 @@ snapshots:
   shiki@1.16.2:
     dependencies:
       '@shikijs/core': 1.16.2
-      '@shikijs/vscode-textmate': 9.2.0
+      '@shikijs/vscode-textmate': 9.3.0
       '@types/hast': 3.0.4
 
   shiki@1.22.0:
@@ -11682,15 +11515,15 @@ snapshots:
 
   sprintf-js@1.0.3: {}
 
-  starlight-package-managers@0.7.0(@astrojs/starlight@0.28.2(astro@4.15.12(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3)))(astro@4.15.12(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3)):
+  starlight-package-managers@0.7.0(@astrojs/starlight@0.28.2(astro@4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3)))(astro@4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3)):
     dependencies:
-      '@astrojs/starlight': 0.28.2(astro@4.15.12(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))
-      astro: 4.15.12(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3)
+      '@astrojs/starlight': 0.28.2(astro@4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))
+      astro: 4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3)
 
-  starlight-typedoc@0.16.0(@astrojs/starlight@0.28.2(astro@4.15.12(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3)))(astro@4.15.12(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))(typedoc-plugin-markdown@4.2.9(typedoc@0.26.8(typescript@5.6.3)))(typedoc@0.26.8(typescript@5.6.3)):
+  starlight-typedoc@0.16.0(@astrojs/starlight@0.28.2(astro@4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3)))(astro@4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))(typedoc-plugin-markdown@4.2.9(typedoc@0.26.8(typescript@5.6.3)))(typedoc@0.26.8(typescript@5.6.3)):
     dependencies:
-      '@astrojs/starlight': 0.28.2(astro@4.15.12(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))
-      astro: 4.15.12(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3)
+      '@astrojs/starlight': 0.28.2(astro@4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3))
+      astro: 4.16.2(@types/node@22.0.0)(rollup@4.21.0)(typescript@5.6.3)
       github-slugger: 2.0.0
       typedoc: 0.26.8(typescript@5.6.3)
       typedoc-plugin-markdown: 4.2.9(typedoc@0.26.8(typescript@5.6.3))
@@ -11886,8 +11719,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  type-fest@2.19.0: {}
-
   type-fest@4.26.1: {}
 
   typedoc-plugin-markdown@4.2.9(typedoc@0.26.8(typescript@5.6.3)):
@@ -11899,7 +11730,7 @@ snapshots:
       lunr: 2.3.9
       markdown-it: 14.1.0
       minimatch: 9.0.5
-      shiki: 1.22.0
+      shiki: 1.16.2
       typescript: 5.6.3
       yaml: 2.5.1
 
@@ -12081,14 +11912,6 @@ snapshots:
       '@types/node': 22.0.0
       fsevents: 2.3.3
 
-  vitefu@0.2.5(vite@5.4.8(@types/node@20.14.13)):
-    optionalDependencies:
-      vite: 5.4.8(@types/node@20.14.13)
-
-  vitefu@0.2.5(vite@5.4.8(@types/node@22.0.0)):
-    optionalDependencies:
-      vite: 5.4.8(@types/node@22.0.0)
-
   vitefu@1.0.2(vite@5.4.8(@types/node@20.14.13)):
     optionalDependencies:
       vite: 5.4.8(@types/node@20.14.13)
@@ -12241,10 +12064,6 @@ snapshots:
     dependencies:
       isexe: 2.0.0
 
-  widest-line@4.0.1:
-    dependencies:
-      string-width: 5.1.2
-
   widest-line@5.0.0:
     dependencies:
       string-width: 7.2.0
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index b74e795a5..df684f750 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -8,7 +8,7 @@ catalog:
   '@astrojs/web-vitals': ^3.0.0
   '@astrojs/node': ^8.3.3
   '@types/node': ^20.14.11
-  astro: ^4.15.12
+  astro: ^4.16
   astro-integration-kit: ^0.16.1
   astro-theme-provider: ^0.6.1
   sharp: ^0.33.4
@@ -17,7 +17,7 @@ catalog:
 
 catalogs:
   min:
-    astro: ">=4.15"
+    astro: ">=4.16"
     '@astrojs/db': ">=0.14"
     astro-integration-kit: ">=0.16"
     vite: ^4 || ^5
@@ -97,4 +97,4 @@ catalogs:
 packages:
   - "packages/*"
   - "playgrounds/*"
-  - "www/*"
\ No newline at end of file
+  - "www/*"
diff --git a/www/docs/astro.config.mts b/www/docs/astro.config.mts
index 49a202828..ce71106f1 100644
--- a/www/docs/astro.config.mts
+++ b/www/docs/astro.config.mts
@@ -5,20 +5,92 @@ import { defineConfig } from 'astro/config';
 import { getCoolifyURL } from '../hostUtils';
 import { typeDocPlugins, typeDocSideBarEntry } from './typedoc.config';
 
+import type { Element, ElementContent } from 'hast';
+import { fromMarkdown } from 'mdast-util-from-markdown';
+import { gfmFromMarkdown } from 'mdast-util-gfm';
+import { defaultHandlers, toHast } from 'mdast-util-to-hast';
+import type { ShikiTransformerContextCommon } from 'shiki';
+
+import JS from 'shiki/langs/javascript.mjs'
+
 // Define the Site URL
 const site = getCoolifyURL(true) || 'https://docs.studiocms.xyz/';
 
+function renderMarkdown(this: ShikiTransformerContextCommon, md: string): ElementContent[] {
+  const mdast = fromMarkdown(
+    md.replace(/\{@link ([^}]*)\}/g, '$1'), // replace jsdoc links
+    { mdastExtensions: [gfmFromMarkdown()] },
+  )
+
+  return (toHast(
+    mdast,
+    {
+      handlers: {
+        code: (state, node) => {
+          const lang = node.lang || ''
+          if (lang) {
+            return {
+              type: 'element',
+              tagName: 'code',
+              properties: {},
+              children: this.codeToHast(
+                node.value,
+                {
+                  ...this.options,
+                  transformers: [],
+                  lang,
+                  structure: node.value.trim().includes('\n') ? 'classic' : 'inline',
+                },
+              ).children,
+            } as Element
+          }
+          return defaultHandlers.code(state, node)
+        },
+      },
+    },
+  ) as Element).children
+}
+
+function renderMarkdownInline(this: ShikiTransformerContextCommon, md: string, context?: string): ElementContent[] {
+	let betterMD = md;
+  if (context === 'tag:param')
+    betterMD = md.replace(/^([\w$-]+)/, '`$1` ')
+
+  const children = renderMarkdown.call(this, betterMD)
+  if (children.length === 1 && children[0].type === 'element' && children[0].tagName === 'p')
+    return children[0].children
+  return children
+}
+
 export default defineConfig({
 	site,
+	experimental: {
+		directRenderScript: true,
+  },
 	markdown: {
 		shikiConfig: {
+			langs: [
+				...JS,
+			],
 			themes: {
-				light: 'catppuccin-latte',
+				light: 'light-plus',
 				dark: 'dark-plus',
 			},
 			transformers: [
-				// @ts-expect-error - version mismatch
-				transformerTwoslash({ renderer: rendererRich() }),
+				// @ts-expect-error - Broken types
+				transformerTwoslash({ 
+					renderer: rendererRich({
+						renderMarkdown,
+						renderMarkdownInline,
+					}),
+					explicitTrigger: true,
+					twoslashOptions: {
+						compilerOptions: {
+							// Set module resolution to "Bundler"
+							moduleResolution: 100,
+						},
+					},
+				}),
 			],
 			wrap: true,
 		},
@@ -49,6 +121,7 @@ export default defineConfig({
 			customCss: [
 				'@fontsource-variable/onest/index.css',
 				'@shikijs/twoslash/style-rich.css',
+				'@studiocms/ui/css/global.css',
 				'./src/styles/custom.css',
 			],
 			editLink: {
@@ -116,7 +189,16 @@ export default defineConfig({
 								{
 									label: '@studiocms/renderers',
 									autogenerate: { directory: 'customizing/studiocms-renderers' },
+									collapsed: true,
 								},
+                {
+                  label: '@studiocms/ui',
+                  items: [
+                    { label: 'Getting Started', link: 'customizing/studiocms-ui/' },
+                    { label: 'Components', autogenerate: { directory: 'customizing/studiocms-ui/components', collapsed: true } }
+                  ],
+									collapsed: true,
+                },
 							],
 						},
 					],
diff --git a/www/docs/package.json b/www/docs/package.json
index eed532768..b0042c242 100644
--- a/www/docs/package.json
+++ b/www/docs/package.json
@@ -17,7 +17,7 @@
     "@fontsource-variable/onest": "catalog:studiocms-shared",
     "@lorenzo_lewis/starlight-utils": "catalog:docs",
     "@shoelace-style/shoelace": "catalog:docs",
-    "@shikijs/twoslash": "^1.22.0",
+    "@shikijs/twoslash": "1.16.2",
     "@types/hast": "catalog:docs",
     "astro": "catalog:",
     "astro-embed": "catalog:docs",
@@ -32,8 +32,11 @@
     "typescript": "catalog:",
     "@astrojs/db": "catalog:",
     "@astrojs/node": "catalog:",
-    "studiocms": "workspace:*"
-  },
-  "devDependencies": {
+    "studiocms": "workspace:*",
+    "@studiocms/ui": "workspace:*",
+    "mdast-util-from-markdown": "^2.0.1",
+    "mdast-util-gfm": "^3.0.0",
+    "mdast-util-to-hast": "^13.2.0",
+    "shiki": "1.16.2"
   }
 }
diff --git a/www/docs/src/assets/avatar.png b/www/docs/src/assets/avatar.png
new file mode 100644
index 000000000..9db62ee70
Binary files /dev/null and b/www/docs/src/assets/avatar.png differ
diff --git a/www/docs/src/components/DropdownScript.astro b/www/docs/src/components/DropdownScript.astro
new file mode 100644
index 000000000..b3a1cb53c
--- /dev/null
+++ b/www/docs/src/components/DropdownScript.astro
@@ -0,0 +1,10 @@
+<script>
+  import { DropdownHelper } from '@studiocms/ui/components';
+
+  new DropdownHelper('usage-dropdown');
+  new DropdownHelper('align-start-dropdown');
+  new DropdownHelper('align-center-dropdown');
+  new DropdownHelper('align-end-dropdown');
+  new DropdownHelper('right-click-dropdown');
+  new DropdownHelper('options-dropdown');
+</script>
diff --git a/www/docs/src/components/ModalScript.astro b/www/docs/src/components/ModalScript.astro
new file mode 100644
index 000000000..d5f77f7d3
--- /dev/null
+++ b/www/docs/src/components/ModalScript.astro
@@ -0,0 +1,10 @@
+<script>
+  import { ModalHelper } from '@studiocms/ui/components';
+
+  new ModalHelper('usage-modal', 'usage-modal-trigger');
+  new ModalHelper('sizes-modal-sm', 'sm-modal-trigger');
+  new ModalHelper('sizes-modal-md', 'md-modal-trigger');
+  new ModalHelper('sizes-modal-lg', 'lg-modal-trigger');
+  new ModalHelper('dismissable-modal', 'dismissable-modal-trigger');
+  new ModalHelper('buttons-modal', 'buttons-modal-trigger');
+</script>
diff --git a/www/docs/src/components/PreviewCard.astro b/www/docs/src/components/PreviewCard.astro
new file mode 100644
index 000000000..0396b6b81
--- /dev/null
+++ b/www/docs/src/components/PreviewCard.astro
@@ -0,0 +1,34 @@
+---
+type Props = {
+  vertical?: boolean;
+  gapSize?: 'sm' | 'md' | 'lg';
+};
+
+const { vertical = false, gapSize = 'md' } = Astro.props;
+---
+<div class="preview-card not-content" class:list={[vertical && "vertical", gapSize]}>
+  <slot />
+</div>
+<style>
+  .preview-card {
+    border: 1px solid var(--sl-color-gray-5);
+    border-radius: 4px;
+    padding: 4rem 1rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 1rem;
+  }
+
+  .preview-card.vertical {
+    flex-direction: column;
+  }
+
+  .preview-card.sm {
+    gap: .5rem;
+  }
+
+  .preview-card.lg {
+    gap: 2rem;
+  }
+</style>
diff --git a/www/docs/src/components/Sponsors.astro b/www/docs/src/components/Sponsors.astro
index 7bd2ba252..b0ed0a122 100644
--- a/www/docs/src/components/Sponsors.astro
+++ b/www/docs/src/components/Sponsors.astro
@@ -2,12 +2,12 @@
 ---
 
 <div class="sponsors">
-	<h2 class="sponsors-title">Sponsored By</h2>
+	<span class="sponsors-title">Sponsored By</span>
 	<a
 		href="https://turso.tech"
 		aria-label="Turso Tech"
-        target="_blank" 
-        rel="sponsored"
+		target="_blank" 
+		rel="sponsored"
 	>
     {/* Turso Tech Logo (Adapted for light/dark mode using CSS in the main custom.css file) */}
     <svg class="turso-logo" height="40" viewBox="0 0 821 240" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -25,15 +25,20 @@
 	.sponsors {
 		display: flex;
 		flex-wrap: wrap;
-		gap: 0 1.5rem;
+		margin-top: 1rem;
+		border-top: 1px solid var(--sl-color-gray-4);
+		padding-top: 1rem;
+		padding-bottom: 1rem;
 	}
+
 	a {
 		display: flex;
 		align-items: center;
 		min-height: 3rem;
 		opacity: 0.75;
-        margin: auto;
+		margin: auto;
 	}
+
 	a:hover {
 		opacity: 1;
 	}
@@ -50,7 +55,6 @@
 		font-family: var(--__sl-font-mono);
 		line-height: var(--sl-line-height-headings);
 		margin: 0 0 0.5rem;
-        text-align: center;
+		text-align: center;
 	}
-
-</style>
\ No newline at end of file
+</style>
diff --git a/www/docs/src/components/StudioSunset.astro b/www/docs/src/components/StudioSunset.astro
index 15acb6fac..80edc94aa 100644
--- a/www/docs/src/components/StudioSunset.astro
+++ b/www/docs/src/components/StudioSunset.astro
@@ -3,6 +3,11 @@ import { Aside } from '@astrojs/starlight/components';
 import ReadMore from './ReadMore.astro';
 ---
 <Aside type="danger" title="Sunset">
-    Astro Studio is currently in a sunset phase and users will no longer be able to create new databases after <strong><code>October 1st, 2024</code></strong>. We recommend using another libSQL provider such as <a href="https://turso.tech" target="_blank">Turso</a> or self-hosting your own <a href="https://github.com/tursodatabase/libsql/tree/main" target="_blank">libSQL server</a>.
-  <ReadMore>For more information regarding the sunset of Studio, see <a href="https://astro.build/blog/goodbye-astro-studio/" target="_blank">Astro's 'Goodbye Studio, Hello DB' Blog Post</a></ReadMore>
-</Aside>
\ No newline at end of file
+  Astro Studio is currently in a sunset phase and users can no longer create new databases. 
+  We recommend using another libSQL provider such as <a href="https://turso.tech" target="_blank">Turso</a> 
+  or self-hosting your own <a href="https://github.com/tursodatabase/libsql/tree/main" target="_blank">libSQL server</a>.
+  <ReadMore>
+    For more information regarding the sunset of Studio, see 
+    <a href="https://astro.build/blog/goodbye-astro-studio/" target="_blank">Astro's 'Goodbye Studio, Hello DB' Blog Post</a>
+  </ReadMore>
+</Aside>
diff --git a/www/docs/src/components/ToasterScript.astro b/www/docs/src/components/ToasterScript.astro
new file mode 100644
index 000000000..5aa2eec7b
--- /dev/null
+++ b/www/docs/src/components/ToasterScript.astro
@@ -0,0 +1,11 @@
+<script>
+  import { toast } from '@studiocms/ui/components';
+
+  document.getElementById('usage-trigger')!.addEventListener('click', () => {
+    toast({
+      title: "This is a toast!",
+      description: "Hi there!",
+      type: 'info',
+    });
+  });
+</script>
diff --git a/www/docs/src/content/docs/config-reference/dashboard.mdx b/www/docs/src/content/docs/config-reference/dashboard.mdx
index d97a5515e..710938db9 100644
--- a/www/docs/src/content/docs/config-reference/dashboard.mdx
+++ b/www/docs/src/content/docs/config-reference/dashboard.mdx
@@ -42,7 +42,7 @@ studioCMS({
 - **Type:** `boolean | undefined`
 - **Default:** `true`
 
-Allows enabling or disabling of the Astro StudioCMS dashboard but still provide all the helpers and utilities to those who are customizing their setup. By disabling it will disable the dashboard and you will need to manage your content via the your database's dashboard with whatever access your libSQL server provides.
+Allows enabling or disabling of the StudioCMS dashboard but still provide all the helpers and utilities to those who are customizing their setup. By disabling it will disable the dashboard and you will need to manage your content via your database's dashboard with whatever access your libSQL server provides.
 
 
 ### `faviconURL`
diff --git a/www/docs/src/content/docs/customizing/studiocms-renderers/markdoc.mdx b/www/docs/src/content/docs/customizing/studiocms-renderers/markdoc.mdx
index 01cd3066d..25721d1db 100644
--- a/www/docs/src/content/docs/customizing/studiocms-renderers/markdoc.mdx
+++ b/www/docs/src/content/docs/customizing/studiocms-renderers/markdoc.mdx
@@ -111,4 +111,4 @@ Normally, users will not need to install the `@studiocms/renderers` package dire
     </Tabs>
 </Steps>
 
-<ReadMore>For more information on how to configure the MarkDoc renderer, see the [MarkDoc Configuration](/config-reference/markdoc-config/) documentation.</ReadMore>
\ No newline at end of file
+<ReadMore>For more information on how to configure the MarkDoc renderer, see the [MarkDoc Configuration](/config-reference/markdoc-config/) documentation.</ReadMore>
diff --git a/www/docs/src/content/docs/customizing/studiocms-ui/components/button.mdx b/www/docs/src/content/docs/customizing/studiocms-ui/components/button.mdx
new file mode 100644
index 000000000..bbdef99e0
--- /dev/null
+++ b/www/docs/src/content/docs/customizing/studiocms-ui/components/button.mdx
@@ -0,0 +1,261 @@
+---
+title: Button
+---
+
+import { Button } from '@studiocms/ui/components';
+import { Tabs, TabItem } from '@astrojs/starlight/components';
+import PreviewCard from '~/components/PreviewCard.astro';
+
+A button component with support for different colors, sizes and states out of the box. You can also customize it to your needs!
+
+## Usage
+
+Using the button component is easy. Check out the example below:
+
+<Tabs>
+  <TabItem label="Preview">
+    <PreviewCard>
+      <Button color='primary'>
+        Button
+      </Button>
+    </PreviewCard>
+  </TabItem>
+  <TabItem label="Code">
+    ```astro
+    ---
+    import { Button } from '@studiocms/ui/components';
+    ---
+
+    <Button color="primary">
+      Button
+    </Button>
+    ```
+  </TabItem>
+</Tabs>
+
+### Disabled
+
+You can disable the button component via the `disabled` attribute:
+
+<Tabs>
+  <TabItem label="Preview">
+    <PreviewCard>
+      <Button color='primary' disabled>
+        Button
+      </Button>
+    </PreviewCard>
+  </TabItem>
+  <TabItem label="Code">
+    ```astro "disabled"
+    ---
+    import { Button } from '@studiocms/ui/components';
+    ---
+
+    <Button color="primary" disabled>
+      Button
+    </Button>
+    ```
+  </TabItem>
+</Tabs>
+
+### Sizes
+
+The button component supports three different sizes out of the box:
+
+<Tabs>
+  <TabItem label="Preview">
+    <PreviewCard>
+      <Button color='primary' size='sm'>
+        Button (sm)
+      </Button>
+      <Button color='primary'>
+        Button (default)
+      </Button>
+      <Button color='primary' size='lg'>
+        Button (lg)
+      </Button>
+    </PreviewCard>
+  </TabItem>
+  <TabItem label="Code">
+    ```astro /size='(?:sm|lg)'/
+    ---
+    import { Button } from '@studiocms/ui/components';
+    ---
+
+    <Button color='primary' size='sm'>
+      Button (sm)
+    </Button>
+    <Button color='primary'>
+      Button (default)
+    </Button>
+    <Button color='primary' size='lg'>
+      Button (lg)
+    </Button>
+    ```
+  </TabItem>
+</Tabs>
+
+### Colors
+
+There is five default colorways that can be used right away:
+- Default
+- Primary
+- Success
+- Warning
+- Danger
+
+<Tabs>
+  <TabItem label="Preview">
+    <PreviewCard>
+      <Button color='default'>
+        Default
+      </Button>
+      <Button color='primary'>
+        Primary
+      </Button>
+      <Button color='success'>
+        Success
+      </Button>
+      <Button color='warning'>
+        Warning
+      </Button>
+      <Button color='danger'>
+        Danger
+      </Button>
+    </PreviewCard>
+  </TabItem>
+  <TabItem label="Code">
+    ```astro /color='[a-z]+'/
+    ---
+    import { Button } from '@studiocms/ui/components';
+    ---
+
+    <Button color='default'>
+      Default
+    </Button>
+    <Button color='primary'>
+      Primary
+    </Button>
+    <Button color='success'>
+      Success
+    </Button>
+    <Button color='warning'>
+      Warning
+    </Button>
+    <Button color='danger'>
+      Danger
+    </Button>
+    ```
+  </TabItem>
+</Tabs>
+
+### Variants
+
+In addition to colors, the button component can be displayed in three different variants:
+
+<Tabs>
+  <TabItem label="Preview">
+    <PreviewCard>
+      <Button color='primary'>
+        Default
+      </Button>
+      <Button color='primary' variant="outlined">
+        Outlined
+      </Button>
+      <Button color='primary' variant="flat">
+        Flat
+      </Button>
+    </PreviewCard>
+  </TabItem>
+  <TabItem label="Code">
+    ```astro /variant=\"[a-z]+\"/
+    ---
+    import { Button } from '@studiocms/ui/components';
+    ---
+
+    <Button color='primary'>
+      Default
+    </Button>
+    <Button color='primary' variant="outlined">
+      Outlined
+    </Button>
+    <Button color='primary' variant="flat">
+      Flat
+    </Button>
+    ```
+  </TabItem>
+</Tabs>
+
+### Polymorphic (rendered as anchor tag)
+
+Thanks to Astro's `Polymorphic` type, you can change the button's parent component into whatever HTML tag you need it to be!
+Here's an example where the button is an `<a>` tag instead of a `<button>`:
+
+<Tabs>
+  <TabItem label="Preview">
+    <PreviewCard>
+      <Button color='primary' target="_blank" as='a' href="https://studiocms.xyz">
+        studiocms.xyz
+      </Button>
+    </PreviewCard>
+  </TabItem>
+  <TabItem label="Code">
+    ```astro "as='a'"
+    ---
+    import { Button } from '@studiocms/ui/components';
+    ---
+  
+    <Button color='primary' target="_blank" as='a' href="https://studiocms.xyz">
+      studiocms.xyz
+    </Button>
+    ```
+  </TabItem>
+</Tabs>
+
+### Custom Styles
+
+As mentioned earlier, you can apply your custom styles to the button component! Here's a gradient button to show you how it's done:
+
+:::danger[Custom styles in production]
+Due to Astro bundling CSS in an honestly, weird way, your custom styles will get overwritten in production **unless you use `!important` or make 
+them inline-styles!**
+:::
+
+<Tabs>
+  <TabItem label="Preview">
+    <PreviewCard>
+      <Button style="background-image: linear-gradient(to top right, #a07cee, #4ff8d2); color: black; font-weight: 600;">
+        Custom Button
+      </Button>
+    </PreviewCard>
+  </TabItem>
+  <TabItem label="Code (with inline styles)">
+    ```astro /style="(?:[^"]*)"/
+    ---
+    import { Button } from '@studiocms/ui/components';
+    ---
+  
+    <Button style="background-image: linear-gradient(to top right, #a07cee, #4ff8d2); color: black; font-weight: 600;">
+      Custom Button
+    </Button>
+    ```
+  </TabItem>
+  <TabItem label="Code (with !important)">
+    ```astro ins={9-13}
+    ---
+    import { Button } from '@studiocms/ui/components';
+    ---
+  
+    <Button class="custom-btn">
+      Custom Button
+    </Button>
+    <style>
+      .custom-btn {
+        background-image: linear-gradient(to top right, #a07cee, #4ff8d2) !important;
+        color: black !important;
+        font-weight: 600 !important;
+      }
+    </style>
+    ```
+  </TabItem>
+</Tabs>
diff --git a/www/docs/src/content/docs/customizing/studiocms-ui/components/card.mdx b/www/docs/src/content/docs/customizing/studiocms-ui/components/card.mdx
new file mode 100644
index 000000000..a2b85b85a
--- /dev/null
+++ b/www/docs/src/content/docs/customizing/studiocms-ui/components/card.mdx
@@ -0,0 +1,83 @@
+---
+title: Card
+---
+
+import { Card } from '@studiocms/ui/components';
+import { Tabs, TabItem } from '@astrojs/starlight/components';
+import PreviewCard from '~/components/PreviewCard.astro';
+
+A simple card component to wrap other stuff in! 
+
+## Usage
+
+<Tabs>
+  <TabItem label="Preview">
+    <PreviewCard>
+      <Card>
+        Content
+      </Card>
+    </PreviewCard>
+  </TabItem>
+  <TabItem label="Code">
+    ```astro
+    ---
+    import { Card } from '@studiocms/ui/components';
+    ---
+
+    <Card>
+      Content
+    </Card>
+    ```
+  </TabItem>
+</Tabs>
+
+### Full Width
+
+You can set the card to fill it's parent container using the `fullWidth` param:
+
+<Tabs>
+  <TabItem label="Preview">
+    <PreviewCard>
+      <Card fullWidth>
+        Content
+      </Card>
+    </PreviewCard>
+  </TabItem>
+  <TabItem label="Code">
+    ```astro "fullWidth"
+    ---
+    import { Card } from '@studiocms/ui/components';
+    ---
+
+    <Card fullWidth>
+      Content
+    </Card>
+    ```
+  </TabItem>
+</Tabs>
+
+### Polymorphic
+
+A card can be anything you want it to be, literally! Cards support Astro's `Polymorphic` type, meaning you can render the card
+as whatever you want by passing the `as` attribute. Here's a card that renders as an `<a>` tag instead of a `<div>`: 
+
+<Tabs>
+  <TabItem label="Preview">
+    <PreviewCard>
+      <Card as="a" href="https://studiocms.xyz">
+        studiocms.xyz
+      </Card>
+    </PreviewCard>
+  </TabItem>
+  <TabItem label="Code">
+    ```astro "as=\"a\""
+    ---
+    import { Card } from '@studiocms/ui/components';
+    ---
+
+    <Card as="a" href="https://studiocms.xyz">
+      studiocms.xyz
+    </Card>
+    ```
+  </TabItem>
+</Tabs>
diff --git a/www/docs/src/content/docs/customizing/studiocms-ui/components/center.mdx b/www/docs/src/content/docs/customizing/studiocms-ui/components/center.mdx
new file mode 100644
index 000000000..ece621549
--- /dev/null
+++ b/www/docs/src/content/docs/customizing/studiocms-ui/components/center.mdx
@@ -0,0 +1,34 @@
+---
+title: Center
+---
+
+import { Tabs, TabItem } from '@astrojs/starlight/components';
+import PreviewCard from '~/components/PreviewCard.astro';
+import { Center } from '@studiocms/ui/components';
+
+<small>
+This is only here to annoy Jumper. Hi Jumper!
+</small>
+
+Jokes aside. This is a wrapper that saves you some time by abstracting the `flex` or `grid` shenanigans into a component. You can use it like this:
+
+<Tabs>
+  <TabItem label="Preview">
+    <PreviewCard>
+      <Center>
+        Hi Jumper!
+      </Center>
+    </PreviewCard>
+  </TabItem>
+  <TabItem label="Code">
+    ```astro
+    ---
+    import { Center } from '@studiocms/ui/components';
+    ---
+
+    <Center>
+      Hi Jumper!
+    </Center>
+    ```
+  </TabItem>
+</Tabs>
diff --git a/www/docs/src/content/docs/customizing/studiocms-ui/components/checkbox.mdx b/www/docs/src/content/docs/customizing/studiocms-ui/components/checkbox.mdx
new file mode 100644
index 000000000..5e1b71f32
--- /dev/null
+++ b/www/docs/src/content/docs/customizing/studiocms-ui/components/checkbox.mdx
@@ -0,0 +1,119 @@
+---
+title: Checkbox
+---
+
+import { Tabs, TabItem } from '@astrojs/starlight/components';
+import PreviewCard from '~/components/PreviewCard.astro';
+import { Checkbox, Row } from '@studiocms/ui/components';
+
+A custom checkbox component with support for sizes and colors. Form compatible.
+
+## Usage
+
+<Tabs>
+  <TabItem label="Preview">
+    <PreviewCard>
+      <Checkbox label="Label" color="primary" />
+    </PreviewCard>
+  </TabItem>
+  <TabItem label="Code">
+    ```astro
+    ---
+    import { Checkbox } from '@studiocms/ui/components';
+    ---
+
+    <Checkbox label="Label" color="primary" />
+    ```
+  </TabItem>
+</Tabs>
+
+### Sizes
+
+There's three different sizes for checkboxes:
+
+<Tabs>
+  <TabItem label="Preview">
+    <PreviewCard>
+      <Row>
+        <Checkbox label="Small" color="primary" size="sm" defaultChecked />
+        <Checkbox label="Medium" color="primary" defaultChecked />
+        <Checkbox label="Large" color="primary" size="lg" defaultChecked />
+      </Row>
+    </PreviewCard>
+  </TabItem>
+  <TabItem label="Code">
+    ```astro /size="[a-z]+"/
+    ---
+    import { Checkbox } from '@studiocms/ui/components';
+    ---
+
+    <Checkbox label="Small" color="primary" size="sm" defaultChecked />
+    <Checkbox label="Medium" color="primary" defaultChecked />
+    <Checkbox label="Large" color="primary" size="lg" defaultChecked />
+    ```
+  </TabItem>
+</Tabs>
+
+### Colors
+
+The checkbox component supports all default colorways.
+
+<Tabs>
+  <TabItem label="Preview">
+    <PreviewCard>
+      <Row>
+        <Checkbox label="Default" defaultChecked />
+        <Checkbox label="Primary" color="primary" defaultChecked />
+        <Checkbox label="Success" color="success" defaultChecked />
+        <Checkbox label="Warning" color="warning" defaultChecked />
+        <Checkbox label="Danger" color="danger" defaultChecked />
+      </Row>
+    </PreviewCard>
+  </TabItem>
+  <TabItem label="Code">
+    ```astro /color="[a-z]+"/
+    ---
+    import { Checkbox } from '@studiocms/ui/components';
+    ---
+
+    <Checkbox label="Default" defaultChecked />
+    <Checkbox label="Primary" color="primary" defaultChecked />
+    <Checkbox label="Success" color="success" defaultChecked />
+    <Checkbox label="Warning" color="warning" defaultChecked />
+    <Checkbox label="Danger" color="danger" defaultChecked />
+    ```
+  </TabItem>
+</Tabs>
+
+### Form Support
+
+If you want to use this component in a form, you're in luck! There's two props you can pass: `isRequired` and `name`.
+
+The first one does what it says it does, while the latter sets the `name` attribute so you can access the checkbox in, for example,
+the `FormData` returned by a submission. Here's an example showing how to set both of them:
+
+<Tabs>
+  <TabItem label="Preview">
+    <PreviewCard>
+      <Checkbox label="Required & Custom Name" color="primary" isRequired name='required-checkbox' />
+    </PreviewCard>
+  </TabItem>
+  <TabItem label="Code">
+    ```astro ins={8-9}
+    ---
+    import { Checkbox } from '@studiocms/ui/components';
+    ---
+
+    <Checkbox 
+      label="Required & Custom Name"
+      color="primary"
+      isRequired
+      name='required-checkbox'
+    />
+    ```
+  </TabItem>
+</Tabs>
+
+:::note
+If no name is set, a random one is generated for the component.
+:::
diff --git a/www/docs/src/content/docs/customizing/studiocms-ui/components/divider.mdx b/www/docs/src/content/docs/customizing/studiocms-ui/components/divider.mdx
new file mode 100644
index 000000000..6e5b084dc
--- /dev/null
+++ b/www/docs/src/content/docs/customizing/studiocms-ui/components/divider.mdx
@@ -0,0 +1,30 @@
+---
+title: Divider
+---
+
+import { Tabs, TabItem } from '@astrojs/starlight/components';
+import PreviewCard from '~/components/PreviewCard.astro';
+import { Divider } from '@studiocms/ui/components';
+
+A simple divider. Allows for showing a label in the center, which is helpful for seperating sidebars or other structured content.
+
+<Tabs>
+  <TabItem label="Preview">
+    <PreviewCard>
+      <Divider>
+        Divider
+      </Divider>
+    </PreviewCard>
+  </TabItem>
+  <TabItem label="Code">
+    ```astro
+    ---
+    import { Divider } from '@studiocms/ui/components';
+    ---
+
+    <Divider>
+      Divider
+    </Divider>
+    ```
+  </TabItem>
+</Tabs>
diff --git a/www/docs/src/content/docs/customizing/studiocms-ui/components/dropdown.mdx b/www/docs/src/content/docs/customizing/studiocms-ui/components/dropdown.mdx
new file mode 100644
index 000000000..993fb840a
--- /dev/null
+++ b/www/docs/src/content/docs/customizing/studiocms-ui/components/dropdown.mdx
@@ -0,0 +1,244 @@
+---
+title: Dropdown
+---
+
+import { Tabs, TabItem } from '@astrojs/starlight/components';
+import PreviewCard from '~/components/PreviewCard.astro';
+import DropdownScript from '~/components/DropdownScript.astro';
+import { Dropdown, Button, Row } from '@studiocms/ui/components';
+
+:::caution[Helper required]
+This component requires a **helper**. Make sure to read the documentation carefully so you know how to use it.
+:::
+
+A dropdown component that takes care of all the annoying bits for you, with added support for programmatic triggers on top.
+
+## Usage
+
+<Tabs>
+  <TabItem label="Preview">
+    <PreviewCard>
+      <Dropdown id='usage-dropdown' options={[{ label: 'Option 1', value: 'opt-1'},{ label: 'Option 2', value: 'opt-2'}]}>
+        <Button color="primary">
+          Trigger Dropdown
+        </Button>
+      </Dropdown>
+    </PreviewCard>
+  </TabItem>
+  <TabItem label="Code">
+    ```astro
+    ---
+    import { Dropdown, Button } from '@studiocms/ui/components';
+    ---
+
+    <Dropdown 
+      id='dropdown' 
+      options={[
+        { label: 'Option 1', value: 'opt-1'},
+        { label: 'Option 2', value: 'opt-2'},
+      ]}
+    >
+      <Button color="primary">
+        Trigger Dropdown
+      </Button>
+    </Dropdown>
+    ```
+    ```ts twoslash
+    import { DropdownHelper } from '@studiocms/ui/components';
+
+    const dropdown = new DropdownHelper('dropdown');
+    ```
+  </TabItem>
+</Tabs>
+
+### Dropdown Position
+
+You can change the dropdowns position by supplying the `align` prop.
+
+<Tabs>
+  <TabItem label="Preview">
+    <PreviewCard>
+      <Row>
+        <Dropdown id='align-start-dropdown' align='start' options={[{ label: 'Option 1', value: 'opt-1'},{ label: 'Option 2', value: 'opt-2'}]}>
+          <Button color="primary">
+            Start-aligned
+          </Button>
+        </Dropdown>
+        <Dropdown id='align-center-dropdown' options={[{ label: 'Option 1', value: 'opt-1'},{ label: 'Option 2', value: 'opt-2'}]}>
+          <Button color="primary">
+            Center-aligned
+          </Button>
+        </Dropdown>
+        <Dropdown id='align-end-dropdown' align='end' options={[{ label: 'Option 1', value: 'opt-1'},{ label: 'Option 2', value: 'opt-2'}]}>
+          <Button color="primary">
+            End-aligned
+          </Button>
+        </Dropdown>
+      </Row>
+    </PreviewCard>
+  </TabItem>
+  <TabItem label="Code">
+    ```astro "align='start'"
+    ---
+    import { Dropdown, Button } from '@studiocms/ui/components';
+    ---
+
+    <Dropdown 
+      id='dropdown'
+      options={[
+        { label: 'Option 1', value: 'opt-1'},
+        { label: 'Option 2', value: 'opt-2'},
+      ]}
+
+      align='start'
+    >
+      <Button color="primary">
+        Start-aligned
+      </Button>
+    </Dropdown>
+    
+    <!-- Other buttons omitted for simplicity -->
+    ```
+    ```ts twoslash
+    import { DropdownHelper } from '@studiocms/ui/components';
+
+    const dropdown = new DropdownHelper('dropdown');
+    ```
+  </TabItem>
+</Tabs>
+
+### Right-Click Triggering
+
+You can tell the dropdown wrapper to only show the dropdown when it's children are right-clicked:
+
+<Tabs>
+  <TabItem label="Preview">
+    <PreviewCard>
+      <Dropdown id='right-click-dropdown' triggerOn='right' options={[{ label: 'Option 1', value: 'opt-1'},{ label: 'Option 2', value: 'opt-2'}]}>
+        <Button color="primary">
+          Right Click
+        </Button>
+      </Dropdown>
+    </PreviewCard>
+  </TabItem>
+  <TabItem label="Code">
+    ```astro "triggerOn='right'"
+    ---
+    import { Dropdown, Button } from '@studiocms/ui/components';
+    ---
+
+    <Dropdown
+      id='dropdown'
+      options={[
+        { label: 'Option 1', value: 'opt-1'},
+        { label: 'Option 2', value: 'opt-2'},
+      ]}
+      triggerOn='right'
+    >
+      <Button color="primary">
+        Right Click
+      </Button>
+    </Dropdown>
+    ```
+    ```ts twoslash
+    import { DropdownHelper } from '@studiocms/ui/components';
+
+    const dropdown = new DropdownHelper('dropdown');
+    ```
+  </TabItem>
+</Tabs>
+
+:::note
+You can also tell the dropdown to trigger on both left- & right-click by using the `triggerOn='both'` prop.
+:::
+
+### Disabled
+
+You can disable a dropdown by passing the `disabled` prop.
+
+```astro "disabled"
+<Dropdown disabled {/* ... */}>
+  <!-- ... -->
+</Dropdown>
+```
+
+### Option Options
+
+No, you read that right. You can customize the options too. You can individually disable them and also change their color to any of the default colors:
+
+<Tabs>
+  <TabItem label="Preview">
+    <PreviewCard>
+      <Dropdown 
+        id='options-dropdown' 
+        options={[
+          { label: 'Default', value: 'default', color: 'default'},
+          { label: 'Primary', value: 'primary', color: 'primary'},
+          { label: 'Success', value: 'success', color: 'success'},
+          { label: 'Warning', value: 'warning', color: 'warning'},
+          { label: 'Danger', value: 'danger', color: 'danger'},
+          { label: 'Disabled', value: 'disabled', disabled: 'true'},
+        ]}
+      >
+        <Button color="primary">
+          Customized Options
+        </Button>
+      </Dropdown>
+    </PreviewCard>
+  </TabItem>
+  <TabItem label="Code">
+    ```astro ins={7-14}
+    ---
+    import { Dropdown, Button } from '@studiocms/ui/components';
+    ---
+
+    <Dropdown 
+      id='dropdown' 
+      options={[
+        { label: 'Default', value: 'default', color: 'default'},
+        { label: 'Primary', value: 'primary', color: 'primary'},
+        { label: 'Success', value: 'success', color: 'success'},
+        { label: 'Warning', value: 'warning', color: 'warning'},
+        { label: 'Danger', value: 'danger', color: 'danger'},
+        { label: 'Disabled', value: 'disabled', disabled: 'true'},
+      ]}
+    >
+      <Button color="primary">
+        Customized Options
+      </Button>
+    </Dropdown>
+    ```
+    ```ts twoslash
+    import { DropdownHelper } from '@studiocms/ui/components';
+
+    const dropdown = new DropdownHelper('dropdown');
+    ```
+  </TabItem>
+</Tabs>
+
+### Controlling Dropdowns Programatically
+
+You know how, this entire page, we've been assigning our `DropdownHelper` to a variable? There's a reason for that. The DropdownHelper allows
+you to acces some built-in functions for programatically toggling, showing and hiding the dropdown. You can even register a callback for when one of the 
+dropdowns options has been clicked!
+
+```ts twoslash
+import { DropdownHelper } from '@studiocms/ui/components';
+
+const dropdown = new DropdownHelper('dropdown');
+
+dropdown.registerClickCallback((value) => {
+  // `value` will be the value you gave your option in the dropdown wrapper.
+  console.log(value);
+});
+
+// You can toggle the dropdown like this:
+dropdown.toggle();
+
+// Instead of toggling, you can simply show or hide the dropdown:
+dropdown.show();
+dropdown.hide();
+```
+
+{/* All the helpers are in here 🥲 */}
+<DropdownScript />
diff --git a/www/docs/src/content/docs/customizing/studiocms-ui/components/input.mdx b/www/docs/src/content/docs/customizing/studiocms-ui/components/input.mdx
new file mode 100644
index 000000000..1a0f267f1
--- /dev/null
+++ b/www/docs/src/content/docs/customizing/studiocms-ui/components/input.mdx
@@ -0,0 +1,100 @@
+---
+title: Input
+---
+
+import { Tabs, TabItem } from '@astrojs/starlight/components';
+import PreviewCard from '~/components/PreviewCard.astro';
+import { Input } from '@studiocms/ui/components';
+
+A simple input component with support for easy labels and placeholders.
+
+## Usage
+
+<Tabs>
+  <TabItem label="Preview">
+    <PreviewCard>
+      <Input label="Label" placeholder="Placeholder" />
+    </PreviewCard>
+  </TabItem>
+  <TabItem label="Code">
+    ```astro
+    ---
+    import { Input } from '@studiocms/ui/components';
+    ---
+
+    <Input label="Label" placeholder="Placeholder" />
+    ```
+  </TabItem>
+</Tabs>
+
+### Password Inputs
+
+You can set the input's type to `password` using the `type` prop.
+
+<Tabs>
+  <TabItem label="Preview">
+    <PreviewCard>
+      <Input label="Label" placeholder="Placeholder" type='password' />
+    </PreviewCard>
+  </TabItem>
+  <TabItem label="Code">
+    ```astro "type='password'"
+    ---
+    import { Input } from '@studiocms/ui/components';
+    ---
+
+    <Input label="Label" placeholder="Placeholder" type='password' />
+    ```
+  </TabItem>
+</Tabs>
+
+### Disabled
+
+You can disable the input altogether by using the `disabled` prop.
+
+<Tabs>
+  <TabItem label="Preview">
+    <PreviewCard>
+      <Input label="Label" placeholder="Placeholder" disabled />
+    </PreviewCard>
+  </TabItem>
+  <TabItem label="Code">
+    ```astro "disabled"
+    ---
+    import { Input } from '@studiocms/ui/components';
+    ---
+
+    <Input label="Label" placeholder="Placeholder" disabled />
+    ```
+  </TabItem>
+</Tabs>
+
+### Form Support
+
+Inputs have full form support. You can use the `isRequired` and `name` attributes as needed. 
+
+The first one does what it says it does, while the latter sets the `name` attribute so you can access the input in, for example,
+the `FormData` returned by a submission. Here's an example showing how to set both of them:
+
+<Tabs>
+  <TabItem label="Preview">
+    <PreviewCard>
+      <Input label="Label" placeholder="Placeholder" isRequired name="example-input" />
+    </PreviewCard>
+  </TabItem>
+  <TabItem label="Code">
+    ```astro "isRequired" "name=\"example-input\""
+    ---
+    import { Input } from '@studiocms/ui/components';
+    ---
+
+    <Input label="Label" placeholder="Placeholder" isRequired name="example-input"/>
+    ```
+  </TabItem>
+</Tabs>
+
+:::note
+If no name is set, a random one is generated for the component.
+:::
+
+{/* Disabled, isRequired, type, name, class */}
diff --git a/www/docs/src/content/docs/customizing/studiocms-ui/components/modal.mdx b/www/docs/src/content/docs/customizing/studiocms-ui/components/modal.mdx
new file mode 100644
index 000000000..e7236101d
--- /dev/null
+++ b/www/docs/src/content/docs/customizing/studiocms-ui/components/modal.mdx
@@ -0,0 +1,274 @@
+---
+title: Modal
+---
+
+import { Tabs, TabItem } from '@astrojs/starlight/components';
+import PreviewCard from '~/components/PreviewCard.astro';
+import ModalScript from '~/components/ModalScript.astro';
+import { Modal, Button, Row } from '@studiocms/ui/components';
+
+
+A dropdown component that takes care of all the annoying bits for you, with added support for programmatic triggers on top.
+
+## Usage
+
+<Tabs>
+  <TabItem label="Preview">
+    <PreviewCard>
+      <Modal id="usage-modal">
+        <h2 slot="header">Header Content</h2>
+        <div>Modal Content</div>
+      </Modal>
+      <Button color="primary" id="usage-modal-trigger">
+        Trigger Modal
+      </Button>
+    </PreviewCard>
+  </TabItem>
+  <TabItem label="Code">
+    ```astro
+    ---
+    import { Modal, Button } from '@studiocms/ui/components';
+    ---
+
+    <Modal id="modal">
+      <h2 slot="header">Header Content</h2>
+      <div>Modal Content</div>
+    </Modal>
+    <Button color="primary" id="modal-trigger">
+      Trigger Modal
+    </Button>
+    ```
+    ```ts twoslash
+    import { ModalHelper } from '@studiocms/ui/components';
+
+    const modal = new ModalHelper('modal', 'modal-trigger');
+    ```
+  </TabItem>
+</Tabs>
+
+### Size
+
+You can change the modal's size to one of three presets.
+
+<Tabs>
+  <TabItem label="Preview">
+    <PreviewCard>
+      <Modal id="sizes-modal-sm" size="sm">
+        <h2 slot="header">Small Modal</h2>
+        <div>
+          Lorem ipsum dolor sit amet. Est corporis rerum est reprehenderit nesciunt qui quibusdam quam non totam quia. 
+          Et porro unde et rerum aliquam nam consectetur dolorum et unde optio At delectus alias.
+        </div>
+      </Modal>
+      <Modal id="sizes-modal-md">
+        <h2 slot="header">Medium Content</h2>
+        <div>
+          Lorem ipsum dolor sit amet. Est corporis rerum est reprehenderit nesciunt qui quibusdam quam non totam quia. 
+          Et porro unde et rerum aliquam nam consectetur dolorum et unde optio At delectus alias.
+        </div>
+      </Modal>
+      <Modal id="sizes-modal-lg" size="lg">
+        <h2 slot="header">Large Content</h2>
+        <div>
+          Lorem ipsum dolor sit amet. Est corporis rerum est reprehenderit nesciunt qui quibusdam quam non totam quia. 
+          Et porro unde et rerum aliquam nam consectetur dolorum et unde optio At delectus alias.
+        </div>
+      </Modal>
+
+      <Row alignCenter>
+        <Button color="primary" id="sm-modal-trigger">
+          Small
+        </Button>
+        <Button color="primary" id="md-modal-trigger">
+          Medium
+        </Button>
+        <Button color="primary" id="lg-modal-trigger">
+          Large
+        </Button>
+      </Row>
+    </PreviewCard>
+  </TabItem>
+  <TabItem label="Code">
+    ```astro /size="[a-z]+"/
+    ---
+    import { Modal, Button } from '@studiocms/ui/components';
+    ---
+
+    <Modal id="modal" size="sm">
+      <h2 slot="header">Small Modal</h2>
+      <div>
+        Lorem ipsum dolor sit amet. Est corporis rerum est reprehenderit nesciunt qui quibusdam quam non totam quia. 
+        Et porro unde et rerum aliquam nam consectetur dolorum et unde optio At delectus alias.
+      </div>
+    </Modal>
+    <Button color="primary" id="modal-trigger">
+      Small
+    </Button>
+
+    <!-- Other modals and triggers omitted for simplicity -->
+    ```
+    ```ts twoslash
+    import { ModalHelper } from '@studiocms/ui/components';
+
+    const modal = new ModalHelper('modal', 'modal-trigger');
+    ```
+  </TabItem>
+</Tabs>
+
+### Dismissable
+
+You can change whether a modal can be dismissed by clicking outside of it via the `dismissable` prop.
+
+<Tabs>
+  <TabItem label="Preview">
+    <PreviewCard>
+      <Modal id="dismissable-modal" dismissable={false}>
+        <h2 slot="header">Non-dismissable</h2>
+        <div>
+          Lorem ipsum dolor sit amet. Est corporis rerum est reprehenderit nesciunt qui quibusdam quam non totam quia. 
+          Et porro unde et rerum aliquam nam consectetur dolorum et unde optio At delectus alias.
+        </div>
+      </Modal>
+
+      <Button color="primary" id="dismissable-modal-trigger">
+        Non-Dismissable
+      </Button>
+    </PreviewCard>
+  </TabItem>
+  <TabItem label="Code">
+    ```astro "dismissable={false}"
+    ---
+    import { Modal, Button } from '@studiocms/ui/components';
+    ---
+
+    <Modal id="modal" dismissable={false}>
+      <h2 slot="header">Non-dismissable</h2>
+      <div>
+        Lorem ipsum dolor sit amet. Est corporis rerum est reprehenderit nesciunt qui quibusdam quam non totam quia. 
+        Et porro unde et rerum aliquam nam consectetur dolorum et unde optio At delectus alias.
+      </div>
+    </Modal>
+    <Button color="primary" id="modal-trigger">
+      Non-Dismissable
+    </Button>
+    ```
+    ```ts twoslash
+    import { ModalHelper } from '@studiocms/ui/components';
+
+    const modal = new ModalHelper('modal', 'modal-trigger');
+    ```
+  </TabItem>
+</Tabs>
+
+If a modal has buttons (see below), the `x` button in the top right corner will disappear as well.
+
+### Buttons
+
+Modals support both a `Cancel` and a `Confirm` button. You can use both at the same time, or one of them on it's own.
+
+<Tabs>
+  <TabItem label="Preview">
+    <PreviewCard>
+      <Modal id="buttons-modal" buttons={['cancel','confirm']} class="not-content">
+        <h2 slot="header">Buttons</h2>
+        <div>
+          Lorem ipsum dolor sit amet. Est corporis rerum est reprehenderit nesciunt qui quibusdam quam non totam quia. 
+          Et porro unde et rerum aliquam nam consectetur dolorum et unde optio At delectus alias.
+        </div>
+      </Modal>
+
+      <Button color="primary" id="buttons-modal-trigger">
+        Buttons
+      </Button>
+    </PreviewCard>
+  </TabItem>
+  <TabItem label="Code">
+    ```astro "buttons={['cancel','confirm']}"
+    ---
+    import { Modal, Button } from '@studiocms/ui/components';
+    ---
+
+    <Modal id="modal" buttons={['cancel','confirm']}>
+      <h2 slot="header">Buttons</h2>
+      <div>
+        Lorem ipsum dolor sit amet. Est corporis rerum est reprehenderit nesciunt qui quibusdam quam non totam quia. 
+        Et porro unde et rerum aliquam nam consectetur dolorum et unde optio At delectus alias.
+      </div>
+    </Modal>
+    <Button color="primary" id="modal-trigger">
+      Buttons
+    </Button>
+    ```
+    ```ts twoslash
+    import { ModalHelper } from '@studiocms/ui/components';
+
+    const modal = new ModalHelper('modal', 'modal-trigger');
+    ```
+  </TabItem>
+</Tabs>
+
+:::note
+The order of the `button` prop array does not influence the order of the buttons on the form.
+:::
+
+### Registering Callbacks
+
+If you want to implement functionality based on which of the buttons is clicked, you can register a callback on each of them. 
+
+```ts twoslash ins={5-7,9-11}
+import { ModalHelper } from '@studiocms/ui/components';
+
+const modal = new ModalHelper('modal', 'modal-trigger');
+
+modal.registerCancelCallback(() => {
+  // Your logic here
+});
+
+modal.registerConfirmCallback(() => {
+  // Your logic here
+});
+```
+
+### Form Support
+
+You can turn your modals into forms by supplying the `isForm` prop! This turns the `Cancel` button into a reset button and the `Confirm` button into a submission button.
+This only changes their types, not their text.
+
+By using the `registerConfirmCallback` function, you can retrieve the `FormData` after the `Confirm` button is clicked. Any inputs in the modal will be included.
+
+```ts twoslash "formData"
+import { ModalHelper } from '@studiocms/ui/components';
+
+const modal = new ModalHelper('modal', 'modal-trigger');
+
+modal.registerConfirmCallback((formData) => {
+  // Your logic here
+});
+```
+
+### Binding Triggers
+
+You can add multiple triggers to your modal by using the `bindTrigger` function in combination with an element's ID.
+
+```ts twoslash ins={4-5}
+import { ModalHelper } from '@studiocms/ui/components';
+
+const modal = new ModalHelper('modal', 'modal-trigger');
+modal.bindTrigger('modal-trigger-two');
+modal.bindTrigger('modal-trigger-three');
+```
+
+### Controlling Modals Programatically
+
+Similar to [dropdowns](/customizing/studiocms-ui/components/dropdown), modals can be shown and hidden programatically:
+
+```ts twoslash ins={5-6}
+import { ModalHelper } from '@studiocms/ui/components';
+
+const modal = new ModalHelper('modal', 'modal-trigger');
+
+modal.show();
+modal.hide();
+```
+
+<ModalScript />
diff --git a/www/docs/src/content/docs/customizing/studiocms-ui/components/radio-group.mdx b/www/docs/src/content/docs/customizing/studiocms-ui/components/radio-group.mdx
new file mode 100644
index 000000000..d339166f7
--- /dev/null
+++ b/www/docs/src/content/docs/customizing/studiocms-ui/components/radio-group.mdx
@@ -0,0 +1,182 @@
+---
+title: Radio Group
+---
+
+import { Tabs, TabItem } from '@astrojs/starlight/components';
+import PreviewCard from '~/components/PreviewCard.astro';
+import { RadioGroup, Row } from '@studiocms/ui/components';
+
+A custom radio group component with support for sizes and colors. Form compatible.
+
+## Usage
+
+<Tabs>
+  <TabItem label="Preview">
+    <PreviewCard>
+      <RadioGroup label="Label" options={[{label: 'Option 1', value: 'opt-1'}, {label: 'Option 2', value: 'opt-2'}]} />
+    </PreviewCard>
+  </TabItem>
+  <TabItem label="Code">
+    ```astro
+    ---
+    import { RadioGroup } from '@studiocms/ui/components';
+    ---
+
+    <RadioGroup 
+      label="Label"
+      options={[
+        { label: 'Option 1', value: 'opt-1' },
+        { label: 'Option 2', value: 'opt-2' }
+      ]}
+    />
+    ```
+  </TabItem>
+</Tabs>
+
+### Direction
+
+You can change a radio group to be displayed horizontally by using the `horizontal` prop:
+
+<Tabs>
+  <TabItem label="Preview">
+    <PreviewCard>
+      <RadioGroup label="Label" horizontal options={[{label: 'Option 1', value: 'opt-1'}, {label: 'Option 2', value: 'opt-2'}]} />
+    </PreviewCard>
+  </TabItem>
+  <TabItem label="Code">
+    ```astro "horizontal"
+    ---
+    import { RadioGroup } from '@studiocms/ui/components';
+    ---
+
+    <RadioGroup 
+      label="Label"
+      horizontal
+      options={[
+        { label: 'Option 1', value: 'opt-1-h' },
+        { label: 'Option 2', value: 'opt-2-h' }
+      ]}
+    />
+    ```
+  </TabItem>
+</Tabs>
+
+### Default Value
+
+You can set a default selected option via the `defaultValue` prop.
+
+<Tabs>
+  <TabItem label="Preview">
+    <PreviewCard>
+      <RadioGroup label="Default Selected" defaultValue='opt-1-def' options={[{ label: 'Option 1', value: 'opt-1-def' }]} />
+    </PreviewCard>
+  </TabItem>
+  <TabItem label="Code">
+    ```astro "defaultValue='opt-1'"
+    ---
+    import { RadioGroup } from '@studiocms/ui/components';
+    ---
+
+    <RadioGroup 
+      label="Default Selected"
+      defaultValue='opt-1'
+      options={[
+        { label: 'Option 1', value: 'opt-1' }
+      ]} 
+    />
+    <!-- Other colors omitted for simplicity -->
+    ```
+  </TabItem>
+</Tabs>
+
+### Colors
+
+The radio group component supports all default colorways.
+
+<Tabs>
+  <TabItem label="Preview">
+    <PreviewCard>
+      <Row gapSize="lg">    
+        <RadioGroup label="Default" defaultValue='opt-1-d' options={[{ label: 'Option 1', value: 'opt-1-d' }]} color='default' />
+        <RadioGroup label="Primary" defaultValue='opt-1-p' options={[{ label: 'Option 1', value: 'opt-1-p' }]} color='primary' />
+        <RadioGroup label="Success" defaultValue='opt-1-s' options={[{ label: 'Option 1', value: 'opt-1-s' }]} color='success' />
+        <RadioGroup label="Warning" defaultValue='opt-1-w' options={[{ label: 'Option 1', value: 'opt-1-w' }]} color='warning' />
+        <RadioGroup label="Danger" defaultValue='opt-1-da' options={[{ label: 'Option 1', value: 'opt-1-da' }]} color='danger' />
+      </Row>
+    </PreviewCard>
+  </TabItem>
+  <TabItem label="Code">
+    ```astro "color=\"primary\""
+    ---
+    import { RadioGroup } from '@studiocms/ui/components';
+    ---
+
+    <RadioGroup 
+      label="Default Selected"
+      defaultValue='opt-1'
+      options={[
+        { label: 'Option 1', value: 'opt-1' }
+      ]}
+      color="primary"
+    />
+    <!-- Other colors omitted for simplicity -->
+    ```
+  </TabItem>
+</Tabs>
+
+### Disabling
+
+You can disable either the entire radio group (by passing the `disabled` prop) or a single option via the options. The example
+below shows how to do the latter:
+
+<Tabs>
+  <TabItem label="Preview">
+    <PreviewCard>
+      <RadioGroup label="One option disabled" options={[{ label: 'Option 1', value: 'opt-1-dis' }, { label: 'Option 2', value: 'opt-2-dis', disabled: true }]} />
+    </PreviewCard>
+  </TabItem>
+  <TabItem label="Code">
+    ```astro "disabled: true"
+    ---
+    import { RadioGroup } from '@studiocms/ui/components';
+    ---
+
+    <RadioGroup 
+      label="Default"
+      options={[
+        { label: 'Option 1', value: 'opt-1', disabled: true },
+        { label: 'Option 1', value: 'opt-2' }
+      ]}
+      color='primary' 
+    />
+    <!-- Other colors omitted for simplicity -->
+    ```
+  </TabItem>
+</Tabs>
+
+### Form Support
+
+Inputs have full form support. You can use the `isRequired` and `name` attributes as needed. 
+
+The first one does what it says it does, while the latter sets the `name` attribute so you can access the input in, for example,
+the `FormData` returned by a submission. Here's an example showing how to set both of them:
+
+```astro "isRequired" "name='required-radio'"
+---
+import { RadioGroup } from '@studiocms/ui/components';
+---
+
+<RadioGroup 
+  label="Required & Custom Name"
+  isRequired
+  name='required-radio'
+  options={[
+    { label: 'Option 1', value: 'opt-1' },
+    { label: 'Option 2', value: 'opt-2' }
+  ]}
+/>
+```
+
+:::note
+If no name is set, a random one is generated for the component.
+:::
diff --git a/www/docs/src/content/docs/customizing/studiocms-ui/components/row.mdx b/www/docs/src/content/docs/customizing/studiocms-ui/components/row.mdx
new file mode 100644
index 000000000..f07931988
--- /dev/null
+++ b/www/docs/src/content/docs/customizing/studiocms-ui/components/row.mdx
@@ -0,0 +1,90 @@
+---
+title: Row
+---
+
+import { Tabs, TabItem } from '@astrojs/starlight/components';
+import PreviewCard from '~/components/PreviewCard.astro';
+import { Row } from '@studiocms/ui/components';
+
+A small `flex: row` wrapper. Abstracts all the flex weirdness away into a component.
+
+## Usage
+
+<Tabs>
+  <TabItem label="Preview">
+    <PreviewCard>
+      <Row>
+        <span>Row Item 1</span>
+        <span>Row Item 2</span>
+        <span>Row Item 3</span>
+      </Row>
+    </PreviewCard>
+  </TabItem>
+  <TabItem label="Code">
+    ```astro
+    ---
+    import { Row } from '@studiocms/ui/components';
+    ---
+
+    <Row>
+      <span>Row Item 1</span>
+      <span>Row Item 2</span>
+      <span>Row Item 3</span>
+    </Row>
+    ```
+  </TabItem>
+</Tabs>
+
+### `align-items: center`
+
+You can pass the `alignCenter` prop to add the `align-items: center` CSS property to the row.
+
+```astro "alignCenter"
+---
+import { Row } from '@studiocms/ui/components';
+---
+
+<Row alignCenter>
+  <!-- Content -->
+</Row>
+```
+
+### Gap Size
+
+You can change the gap size of the row via the `gapSize` prop, which can be set to one of `sm`, `md` or `lg`.
+
+<Tabs>
+  <TabItem label="Preview">
+    <PreviewCard vertical gapSize="lg">
+      <Row gapSize="sm">
+        <span>Small Row</span>
+        <span>Small Row</span>
+        <span>Small Row</span>
+      </Row>
+      <Row gapSize="md">
+        <span>Medium Row</span>
+        <span>Medium Row</span>
+        <span>Medium Row</span>
+      </Row>
+      <Row gapSize="lg">
+        <span>Large Row</span>
+        <span>Large Row</span>
+        <span>Large Row</span>
+      </Row>
+    </PreviewCard>
+  </TabItem>
+  <TabItem label="Code">
+    ```astro "gapSize=\"sm\""
+    ---
+    import { Row } from '@studiocms/ui/components';
+    ---
+
+    <Row gapSize="sm">
+      <span>Small Row</span>
+      <span>Small Row</span>
+      <span>Small Row</span>
+    </Row>
+    <!-- Other examples omitted for simplicity -->
+    ```
+  </TabItem>
+</Tabs>
diff --git a/www/docs/src/content/docs/customizing/studiocms-ui/components/textarea.mdx b/www/docs/src/content/docs/customizing/studiocms-ui/components/textarea.mdx
new file mode 100644
index 000000000..e92249d1d
--- /dev/null
+++ b/www/docs/src/content/docs/customizing/studiocms-ui/components/textarea.mdx
@@ -0,0 +1,79 @@
+---
+title: Textarea
+---
+
+import { Tabs, TabItem } from '@astrojs/starlight/components';
+import PreviewCard from '~/components/PreviewCard.astro';
+import { Textarea } from '@studiocms/ui/components';
+
+A simple textarea component with support for easy labels and placeholders.
+
+## Usage
+
+<Tabs>
+  <TabItem label="Preview">
+    <PreviewCard>
+      <Textarea label="Label" placeholder="Placeholder" />
+    </PreviewCard>
+  </TabItem>
+  <TabItem label="Code">
+    ```astro
+    ---
+    import { Textarea } from '@studiocms/ui/components/Button';
+    ---
+
+    <Textarea label="Label" placeholder="Placeholder" />
+    ```
+  </TabItem>
+</Tabs>
+
+### Disabled
+
+You can disable the textarea altogether by using the `disabled` prop.
+
+<Tabs>
+  <TabItem label="Preview">
+    <PreviewCard>
+      <Textarea label="Label" placeholder="Placeholder" disabled />
+    </PreviewCard>
+  </TabItem>
+  <TabItem label="Code">
+    ```astro "disabled"
+    ---
+    import { Textarea } from '@studiocms/ui/components/Button';
+    ---
+
+    <Textarea label="Label" placeholder="Placeholder" disabled />
+    ```
+  </TabItem>
+</Tabs>
+
+### Form Support
+
+Textarea have full form support. You can use the `isRequired` and `name` attributes as needed. 
+
+The first one does what it says it does, while the latter sets the `name` attribute so you can access the textarea in, for example,
+the `FormData` returned by a submission. Here's an example showing how to set both of them:
+
+<Tabs>
+  <TabItem label="Preview">
+    <PreviewCard>
+      <Textarea label="Label" placeholder="Placeholder" isRequired name="example-textarea" />
+    </PreviewCard>
+  </TabItem>
+  <TabItem label="Code">
+    ```astro "isRequired" "name=\"example-textarea\""
+    ---
+    import { Textarea } from '@studiocms/ui/components/Button';
+    ---
+
+    <Textarea label="Label" placeholder="Placeholder" isRequired name="example-textarea"/>
+    ```
+  </TabItem>
+</Tabs>
+
+:::note
+If no name is set, a random one is generated for the component.
+:::
+
+{/* Disabled, isRequired, type, name, class */}
diff --git a/www/docs/src/content/docs/customizing/studiocms-ui/components/toast.mdx b/www/docs/src/content/docs/customizing/studiocms-ui/components/toast.mdx
new file mode 100644
index 000000000..05767115d
--- /dev/null
+++ b/www/docs/src/content/docs/customizing/studiocms-ui/components/toast.mdx
@@ -0,0 +1,151 @@
+---
+title: Toast
+---
+
+import { Tabs, TabItem } from '@astrojs/starlight/components';
+import PreviewCard from '~/components/PreviewCard.astro';
+import ToasterScript from '~/components/ToasterScript.astro';
+import { Toaster, Button, Row } from '@studiocms/ui/components';
+
+:::caution[Helper required]
+This component requires a **helper**. Make sure to read the documentation carefully so you know how to use it.
+:::
+
+## Usage
+
+<Tabs>
+  <TabItem label="Preview">
+    <PreviewCard>
+      <Button color="primary" id="usage-trigger">
+        Show Toast
+      </Button>
+    </PreviewCard>
+  </TabItem>
+  <TabItem label="Code">
+    ```astro
+    ---
+    import { Toaster, Button } from '@studiocms/ui/components';
+    ---
+
+    <!-- Add this to the root of your page: -->
+    <Toaster />
+    
+    <Button color="primary" id="trigger">
+      Show Toast
+    </Button>
+    ```
+    ```ts twoslash
+    import { toast } from '@studiocms/ui/components';
+
+    const trigger = document.getElementById('usage-trigger')!;
+    trigger.addEventListener('click', () => {
+      toast({
+        title: "This is a toast!",
+        description: "Hi there!",
+        type: 'info',
+      });
+    });
+    ```
+  </TabItem>
+</Tabs>
+
+### Position
+
+You can change where all toasts are displayed via the `position` prop on the `<Toaster />` component:
+
+```astro
+---
+import { Toaster } from '@studiocms/ui/components';
+---
+
+<Toaster position="top-left" />
+<Toaster position="top-center" />
+<Toaster position="top-right" />
+<Toaster position="bottom-left" />
+<Toaster position="bottom-center" />
+<Toaster position="bottom-right" />
+```
+
+### Duration
+
+There's two ways to set a toast's duration: via the default on the `<Toaster />` component or via the `toast({ ... })` function.
+
+You can set the default duration like this:
+
+```astro
+---
+import { Toaster } from '@studiocms/ui/components';
+---
+
+<Toaster duration={10000} />
+```
+
+Or you can set it individually for every toast like this:
+
+```ts twoslash
+import { toast } from '@studiocms/ui/components';
+
+toast({
+  title: "This is a toast!",
+  description: "Hi there!",
+  type: 'info',
+  duration: 10000
+});
+```
+
+### Persistance
+
+Sometimes, you don't need a toast to expire after a set time. Instead of setting the toast to only expire after 31 days, you can set it
+to be persistent by setting `persistent` to `true`:
+
+```ts twoslash
+import { toast } from '@studiocms/ui/components';
+
+toast({
+  title: "This is a toast!",
+  description: "Hi there!",
+  type: 'info',
+  persistent: true,
+});
+```
+
+### Close Button
+
+Unless a toast is persistent, you can choose to hide the close button by setting the `closeButton` option to `false`:
+
+```ts twoslash
+import { toast } from '@studiocms/ui/components';
+
+toast({
+  title: "This is a toast!",
+  description: "Hi there!",
+  type: 'info',
+  closeButton: false,
+});
+```
+
+### Offset & Gap
+
+You can change how far the toasts are away from the screen's edge by changing the `offset` prop on the `<Toaster />`:
+
+```astro
+---
+import { Toaster } from '@studiocms/ui/components';
+---
+
+<!-- Offset in pixels -->
+<Toaster offset={64} />
+```
+
+You can also change by how much toasts are seperated via the `gap` prop on the `<Toaster />`:
+
+```astro
+---
+import { Toaster } from '@studiocms/ui/components';
+---
+
+<!-- Offset in pixels -->
+<Toaster gap={32} />
+```
+
+<ToasterScript />
diff --git a/www/docs/src/content/docs/customizing/studiocms-ui/components/toggle.mdx b/www/docs/src/content/docs/customizing/studiocms-ui/components/toggle.mdx
new file mode 100644
index 000000000..1550ec5a0
--- /dev/null
+++ b/www/docs/src/content/docs/customizing/studiocms-ui/components/toggle.mdx
@@ -0,0 +1,119 @@
+---
+title: Toggle
+---
+
+import { Tabs, TabItem } from '@astrojs/starlight/components';
+import PreviewCard from '~/components/PreviewCard.astro';
+import { Toggle, Row } from '@studiocms/ui/components';
+
+A toggle component with support for sizes and colors. Form compatible.
+
+## Usage
+
+<Tabs>
+  <TabItem label="Preview">
+    <PreviewCard>
+      <Toggle label="Label" color="primary" />
+    </PreviewCard>
+  </TabItem>
+  <TabItem label="Code">
+    ```astro
+    ---
+    import { Toggle } from '@studiocms/ui/components';
+    ---
+
+    <Toggle label="Label" color="primary" />
+    ```
+  </TabItem>
+</Tabs>
+
+### Sizes
+
+There's three different sizes for toggles:
+
+<Tabs>
+  <TabItem label="Preview">
+    <PreviewCard>
+      <Row>
+        <Toggle label="Small" color="primary" size="sm" defaultChecked />
+        <Toggle label="Medium" color="primary" defaultChecked />
+        <Toggle label="Large" color="primary" size="lg" defaultChecked />
+      </Row>
+    </PreviewCard>
+  </TabItem>
+  <TabItem label="Code">
+    ```astro /size="[a-z]+"/
+    ---
+    import { Toggle } from '@studiocms/ui/components';
+    ---
+
+    <Toggle label="Small" color="primary" size="sm" defaultChecked />
+    <Toggle label="Medium" color="primary" defaultChecked />
+    <Toggle label="Large" color="primary" size="lg" defaultChecked />
+    ```
+  </TabItem>
+</Tabs>
+
+### Colors
+
+The toggle component supports all default colorways.
+
+<Tabs>
+  <TabItem label="Preview">
+    <PreviewCard>
+      <Row>
+        <Toggle label="Default" defaultChecked />
+        <Toggle label="Primary" color="primary" defaultChecked />
+        <Toggle label="Success" color="success" defaultChecked />
+        <Toggle label="Warning" color="warning" defaultChecked />
+        <Toggle label="Danger" color="danger" defaultChecked />
+      </Row>
+    </PreviewCard>
+  </TabItem>
+  <TabItem label="Code">
+    ```astro /color="[a-z]+"/
+    ---
+    import { Toggle } from '@studiocms/ui/components';
+    ---
+
+    <Toggle label="Default" defaultChecked />
+    <Toggle label="Primary" color="primary" defaultChecked />
+    <Toggle label="Success" color="success" defaultChecked />
+    <Toggle label="Warning" color="warning" defaultChecked />
+    <Toggle label="Danger" color="danger" defaultChecked />
+    ```
+  </TabItem>
+</Tabs>
+
+### Form Support
+
+If you want to use this component in a form, you're in luck! There's two props you can pass: `isRequired` and `name`.
+
+The first one does what it says it does, while the latter sets the `name` attribute so you can access the toggle in, for example,
+the `FormData` returned by a submission. Here's an example showing how to set both of them:
+
+<Tabs>
+  <TabItem label="Preview">
+    <PreviewCard>
+      <Toggle label="Required & Custom Name" color="primary" isRequired name='example' />
+    </PreviewCard>
+  </TabItem>
+  <TabItem label="Code">
+    ```astro ins={8-9}
+    ---
+    import { Toggle } from '@studiocms/ui/components';
+    ---
+
+    <Toggle 
+      label="Required & Custom Name"
+      color="primary"
+      isRequired
+      name='example'
+    />
+    ```
+  </TabItem>
+</Tabs>
+
+:::note
+If no name is set, a random one is generated for the component.
+:::
diff --git a/www/docs/src/content/docs/customizing/studiocms-ui/components/user.mdx b/www/docs/src/content/docs/customizing/studiocms-ui/components/user.mdx
new file mode 100644
index 000000000..81304be28
--- /dev/null
+++ b/www/docs/src/content/docs/customizing/studiocms-ui/components/user.mdx
@@ -0,0 +1,52 @@
+---
+title: User
+---
+
+import { Tabs, TabItem } from '@astrojs/starlight/components';
+import PreviewCard from '~/components/PreviewCard.astro';
+import { User } from '@studiocms/ui/components';
+
+A component to display user info.
+
+## Usage
+
+<Tabs>
+  <TabItem label="Preview">
+    <PreviewCard>
+      <User name="John Doe" description="A cool dude" />
+    </PreviewCard>
+  </TabItem>
+  <TabItem label="Code">
+    ```astro
+    ---
+    import { User } from '@studiocms/ui/components';
+    ---
+
+    <User name="John Doe" description="A cool dude" />
+    ```
+  </TabItem>
+</Tabs>
+
+### Avatar
+
+You can provide an `avatar` using the same rules as the [`Image`](https://docs.astro.build/en/guides/images/#src-required) component.
+
+import Avatar from '~/assets/avatar.png'
+
+<Tabs>
+  <TabItem label="Preview">
+    <PreviewCard>
+      <User name="John Doe" description="A cool dude" avatar={Avatar} />
+    </PreviewCard>
+  </TabItem>
+  <TabItem label="Code">
+    ```astro "avatar={ProfileImage}"
+    ---
+    import { User } from '@studiocms/ui/components';
+    import ProfileImage from '~/assets/profile.png'
+    ---
+
+    <User name="John Doe" description="A cool dude" avatar={ProfileImage} />
+    ```
+  </TabItem>
+</Tabs>
diff --git a/www/docs/src/content/docs/customizing/studiocms-ui/index.mdx b/www/docs/src/content/docs/customizing/studiocms-ui/index.mdx
new file mode 100644
index 000000000..50d507bc6
--- /dev/null
+++ b/www/docs/src/content/docs/customizing/studiocms-ui/index.mdx
@@ -0,0 +1,46 @@
+---
+title: "Getting Started"
+type: integration
+catalogEntry: studiocms-ui
+description: Install @studiocms/ui in your own project and make use of our components!
+---
+
+
+import { PackageManagers } from 'starlight-package-managers';
+
+`@studiocms/ui` is the UI library that we use to build StudioCMS. The library is agnostic, meaning that you can use it
+in your own Astro projects! 
+
+You can install it from npm:
+
+<PackageManagers type="add" pkg="@studiocms/ui" />
+
+All of these components can be tested in our [UI playground](https://ui-testing.studiocms.xyz/).
+
+## Importing Components
+
+All components this library are exported from `@studiocms/ui/components`. You can import and use the components like this:
+
+```astro
+---
+import { Button } from '@studiocms/ui/components';
+---
+
+<Button />
+```
+
+Include the styles by importing `@studiocms/ui/styles/global.css` in your page layout.
+
+```astro
+---
+import '@studiocms/ui/styles/global.css';
+---
+```
+
+:::danger[About Accessibility]
+As of right now, `@studiocms/ui` is nowhere near being accessible. We are still missing crucial support for keyboard navigation,
+screen readers etc. This is by design, as although this library is publicly accessible, we still focus on building StudioCMS with it.
+
+We will add support for keyboard navigation and screenreaders at a later time, once we perform the planned accessibility audit for StudioCMS.
+Should you however want to contribute, and add these features yourself, feel free to!
+:::
diff --git a/www/docs/src/content/docs/start-here/environment-variables.mdx b/www/docs/src/content/docs/start-here/environment-variables.mdx
index 01842495a..5fc350ccb 100644
--- a/www/docs/src/content/docs/start-here/environment-variables.mdx
+++ b/www/docs/src/content/docs/start-here/environment-variables.mdx
@@ -23,18 +23,6 @@ StudioCMS makes use of Astro's new Experimental [`astro:env`](https://docs.astro
 
 ## Required Environment Variables
 
-<StudioHeading>
-### If using Astro's `Studio` with `@astrojs/db`
-</StudioHeading>
-
-<StudioSunset />
-
-`ASTRO_STUDIO_APP_TOKEN` - Token provided from the [Astro Studio Dashboard](https://studio.astro.build)
-
-```bash title=".env"
-ASTRO_STUDIO_APP_TOKEN=your_app_token
-```
-
 ### If using `libSQL` with `@astrojs/db`
 
 `ASTRO_DB_REMOTE_URL` - The connection URL to your libSQL server
diff --git a/www/docs/src/content/docs/start-here/getting-started.mdx b/www/docs/src/content/docs/start-here/getting-started.mdx
index 23378f5c3..065bfad49 100644
--- a/www/docs/src/content/docs/start-here/getting-started.mdx
+++ b/www/docs/src/content/docs/start-here/getting-started.mdx
@@ -32,8 +32,6 @@ To use libSQL with Astro Db, you will need to set the following environment vari
 
 <ReadMore>For more information about these environment varibales, see [Using libSQL with @astrojs/db](/start-here/environment-variables/#if-using-libsql-with-astrojsdb)</ReadMore>
 
-The [commands for deploying and pushing changes](https://docs.astro.build/en/guides/astro-db/#libsql) to your database are the same when using libSQL as when connecting to an Astro Studio hosted database. However, both of your environment variables need to be set locally when running commands with the `--remote` option like `astro build` and `astro db push`.
-
 <ReadMore>See Astro's [Astro DB LibSQL Docs](https://docs.astro.build/en/guides/astro-db/#libsql) for more information</ReadMore>
 
 <StudioHeading>
diff --git a/www/docs/src/content/docs/start-here/why-studioCMS.mdx b/www/docs/src/content/docs/start-here/why-studioCMS.mdx
index 619df908e..9426ac6da 100644
--- a/www/docs/src/content/docs/start-here/why-studioCMS.mdx
+++ b/www/docs/src/content/docs/start-here/why-studioCMS.mdx
@@ -1,6 +1,6 @@
 ---
 title: Why StudioCMS?
-description: StudioCMS is an alternative to traditional CMS platforms. It is a headless CMS that relies on Astro Studio and Astro Framework to deliver a seamless content management experience.
+description: StudioCMS is an alternative to traditional CMS platforms. It is a headless CMS that relies on Astro DB and Astro to deliver a seamless content management experience.
 sidebar:
    order: 4
 ---
@@ -31,8 +31,6 @@ We believe that by building on the cutting-edge features of Astro Db, we can cre
 
 - **Markdoc Integration:** In addition to 'Marked', StudioCMS provides an alternative with Markdoc, offering users a choice for their markdown processing needs.
 
-- **Secure libSQL Database:** All data is securely housed within the Astro Studio database, ensuring access only to authorized users with `studio.astro.build` login credentials. Or you can use your own libSQL server.
-
 - **Built-in Authentication:** StudioCMS features built-in authentication with support for multiple platforms, including Local and Github, enhancing security and user management (currently in development).
 
 - **Unpic Image Service:** StudioCMS includes a free and efficient image service, Unpic, which makes managing external URLs straightforward, with support for major CDNs.
\ No newline at end of file
diff --git a/www/docs/src/starlightOverrides/PageTitle.astro b/www/docs/src/starlightOverrides/PageTitle.astro
index d7231eb5a..345521001 100644
--- a/www/docs/src/starlightOverrides/PageTitle.astro
+++ b/www/docs/src/starlightOverrides/PageTitle.astro
@@ -94,12 +94,12 @@ const { scoped, scope, name } = parsePackageName(entryData.name);
 		flex-wrap: wrap;
 		color: var(--sl-color-white);
 		font-size: var(--sl-text-h1);
-		font-weight: 600;
+		font-weight: 700;
 		line-height: var(--sl-line-height-headings);
 	}
 	.scope {
 		color: var(--sl-color-text);
-		font-weight: 400;
+		font-weight: 500;
 	}
 	.integration-metadata {
 		display: flex;
@@ -121,4 +121,4 @@ const { scoped, scope, name } = parsePackageName(entryData.name);
 	.integration-metadata svg {
 		width: 1.5rem;
 	}
-</style>
\ No newline at end of file
+</style>
diff --git a/www/docs/src/starlightOverrides/SideBar.astro b/www/docs/src/starlightOverrides/SideBar.astro
index 5e4e4f8d6..023536a95 100644
--- a/www/docs/src/starlightOverrides/SideBar.astro
+++ b/www/docs/src/starlightOverrides/SideBar.astro
@@ -22,4 +22,4 @@ import Sponsors from '../components/Sponsors.astro';
     .sidebar-footer {
         margin-top: auto;
     }
-</style>
\ No newline at end of file
+</style>
diff --git a/www/docs/src/starlightOverrides/SiteTitle.astro b/www/docs/src/starlightOverrides/SiteTitle.astro
index 6ddfc1f1d..63b762f86 100644
--- a/www/docs/src/starlightOverrides/SiteTitle.astro
+++ b/www/docs/src/starlightOverrides/SiteTitle.astro
@@ -2,8 +2,11 @@
 import Default from '@astrojs/starlight/components/SiteTitle.astro';
 
 import type { Props } from '@astrojs/starlight/props';
+import { Toaster } from '@studiocms/ui/components';
 ---
 
+<Toaster />
+
 <div>
     <Default {...Astro.props} />
     <ul>
@@ -50,4 +53,4 @@ import type { Props } from '@astrojs/starlight/props';
       font-size: var(--sl-text-sm);
     }
   }
-</style>
\ No newline at end of file
+</style>
diff --git a/www/docs/src/styles/custom.css b/www/docs/src/styles/custom.css
index 4a463cd33..2dac7adc0 100644
--- a/www/docs/src/styles/custom.css
+++ b/www/docs/src/styles/custom.css
@@ -14,6 +14,7 @@
 
 	--sl-font: "Onest Variable";
 }
+
 /* Light mode colors. */
 :root[data-theme="light"] {
 	--sl-color-accent-low: #3a158b;
@@ -59,8 +60,34 @@ aside.starlight-aside {
 	border-bottom-right-radius: 4px;
 }
 
+@media (max-width: 50rem) {
+	.hero > img {
+		width: min(50%, 16rem);
+	}
+}
+
+#starlight__sidebar [aria-current="page"] span {
+	color: black !important;
+}
+
+[data-theme="light"] #starlight__sidebar [aria-current="page"] span {
+	color: white !important;
+}
+
+button[aria-label="Menu"][aria-controls="starlight__sidebar"] {
+	background-color: var(--sl-color-white);
+	padding: 0.5rem;
+}
+
+[data-theme="light"] button[aria-label="Menu"][aria-controls="starlight__sidebar"] {
+	background-color: var(--sl-color-black);
+	padding: 0.5rem;
+}
+
 [data-theme="dark"] .astro-code,
-[data-theme="dark"] .astro-code span {
+[data-theme="dark"] .astro-code span,
+[data-theme="dark"] .shiki,
+[data-theme="dark"] .shiki span {
 	color: var(--shiki-dark) !important;
 	background-color: var(--shiki-dark-bg) !important;
 	/* Optional, if you also want font styles */
@@ -70,5 +97,96 @@ aside.starlight-aside {
 }
 
 .astro-code {
-	overflow: visible;
+	overflow: visible !important;
+	border-radius: .5rem;
+}
+
+.twoslash-popup-container {
+	white-space: nowrap !important;
+	word-break: normal !important;
+	overflow-wrap: normal !important;
+	max-width: 512px !important;
+	width: max-content !important;
+}
+
+.twoslash-popup-container * {
+	white-space: wrap !important;
+	word-break: normal !important;
+	overflow-wrap: normal !important;
+}
+
+main[data-pagefind-body] {
+	overflow: hidden !important;
+}
+
+.twoslash-popup-docs {
+	font-size: 1em !important;
+	color: var(--sl-color-white) !important;
+	font-family: var(--sl-font) !important;
+}
+
+.twoslash-popup-docs code:not(:has(.shiki)) {
+	color: var(--sl-color-white) !important;
+	background-color: var(--sl-color-gray-5) !important;
+	padding: .125rem !important;
+	border-radius: 4px !important;
+	position: relative !important;
+	display: inline-block !important;
+	line-height: 1 !important;
+}
+
+.twoslash-popup-docs-tag-name {
+	color: #8839EF !important;
+	--shiki-dark: #C586C0 !important;
+	font-style: italic;
+	--shiki-dark-font-style: italic;
+}
+
+.twoslash-popup-docs-tag-value {
+	color: var(--sl-color-gray-2) !important;
+	--shiki-dark: var(--sl-color-gray-2);
+}
+
+.twoslash-popup-docs.twoslash-popup-docs-tags {
+	font-size: 14px !important;
+	margin: 0 !important;
+}
+
+.twoslash-popup-docs-tag-value code:first-of-type {
+	margin-right: .75rem !important;
+}
+
+.twoslash-popup-docs-tag-value code:first-of-type:not(:has(.shiki))::after {
+	content: "—";
+	position: absolute;
+	top: 50%;
+	transform: translateY(-50%);
+	right: -.75rem;
+	color: var(--sl-color-gray-2) !important;
+	--shiki-dark: var(--sl-color-gray-2);
+}
+
+.twoslash-popup-container .shiki {
+	border: none !important;
+	outline: none !important;
+	padding: 0 !important;
+}
+
+.twoslash-popup-container .shiki code, .twoslash-popup-container .shiki code span {
+	white-space: preserve !important;
+}
+
+.twoslash-popup-container .shiki code {
+	margin: 0 !important;
+	background-color: transparent !important;
+	line-height: normal !important;
+}
+
+.twoslash-popup-container .shiki code span::after {
+	content: none !important;
+}
+
+.twoslash-popup-code, .twoslash-popup-docs {
+	max-height: 200px !important;
+	overflow: auto !important;
 }