diff --git a/package/package.json b/package/package.json
index 3791891..12b72a1 100644
--- a/package/package.json
+++ b/package/package.json
@@ -29,8 +29,8 @@
 		"./schema": "./src/schema.ts",
 		"./client": "./lib/client.ts",
 		"./server": "./lib/server.ts",
-		"./components/TurnstileWidget": "./lib/components/TurnstileWidget",
-		"./components/TurnstileForm": "./lib/components/TurnstileForm"
+		"./components/TurnstileWidget": "./lib/components/TurnstileWidget.astro",
+		"./components/TurnstileForm": "./lib/components/TurnstileForm.astro"
 	},
 	"scripts": {},
 	"type": "module",
diff --git a/package/src/integration.ts b/package/src/integration.ts
index 673c19c..cc56a4c 100644
--- a/package/src/integration.ts
+++ b/package/src/integration.ts
@@ -148,8 +148,8 @@ export const astroTurnstile = defineIntegration({
 							"virtual:astro-turnstile/config": `export default ${JSON.stringify(
 								options,
 							)}`,
-							"astro-turnstile:components/TurnstileWidget": `export * from '${name}/components';`,
-							"astro-turnstile:components/TurnstileForm": `export * from '${name}/components';`,
+							"astro-turnstile:components/TurnstileWidget": `import Widget from '${name}/components/TurnstileWidget'; export default Widget;`,
+							"astro-turnstile:components/TurnstileForm": `import Form from '${name}/components/TurnstileForm'; export default Form;`,
 						},
 					});
 
diff --git a/package/src/stubs.ts b/package/src/stubs.ts
index bbbfba9..2794f44 100644
--- a/package/src/stubs.ts
+++ b/package/src/stubs.ts
@@ -26,45 +26,45 @@ components.addSingleLineNote(
 );
 
 // Add the module to the file
-components.addModule("astro-turnstile:components", {
-	namedExports: [
-		{
-			name: "TurnstileWidget",
-			typeDef: `typeof import('${name}/components/TurnstileWidget.astro').TurnstileWidget`,
-			multiLineDescription: [
-				"# Turnstile Verification Widget",
-				"@description An [Astro](https://astro.build) component that is used to render a Turnstile verification widget. This widget is used to verify that a user is human.",
-				`@param {"auto"|"light"|"dark"} theme - The theme for the widget. (default: "auto")`,
-				`@param {"normal"|"compact"|"flexible"} size - The size for the widget. (default: "normal")`,
-				`@param {string} margin - The margin for the widget element. (default: '0.5rem')`,
-				"@example",
-				"```tsx",
-				"---",
-				`import { TurnstileWidget } from '${name}:components';`,
-				"---",
-				"<form action='/your/api/endpoint' method='POST'>",
-				"<TurnstileWidget theme='light' size='compact' margin='1rem' />",
-				"<button type='submit'>Submit</button>",
-				"</form>",
-			],
-		},
-		{
-			name: "TurnstileForm",
-			typeDef: `typeof import('${name}/components/TurnstileForm.astro').TurnstileForm`,
-			multiLineDescription: [
-				"# Turnstile Verification Form",
-				"@description An [Astro](https://astro.build) component that is used to render a Turnstile verification form. This form includes a Turnstile verification widget and a submit button.",
-				"@slot default - Any unassigned content will be placed here.",
-				"@slot header - `<div slot='header'>...</div>`",
-				"@slot buttons - `<div slot='buttons'>...</div>`",
-				"@slot footer - `<div slot='footer'>...</div>`",
-				`@param {"auto"|"light"|"dark"} theme - The theme for the widget. (default: "auto")`,
-				`@param {"normal"|"compact"|"flexible"} size - The size for the widget. (default: "normal")`,
-				`@param {string} margin - The margin for the widget element. (default: '0.5rem')`,
-				`@param {"multipart/form-data"|"application/x-www-form-urlencoded"|"submit"} enctype - The form enctype. (default: 'application/x-www-form-urlencoded')`,
-			],
-		},
-	],
+components.addModule("astro-turnstile:components/TurnstileWidget", {
+	defaultExport: {
+		typeDef: `typeof import('${name}/components/TurnstileWidget.astro').TurnstileWidget`,
+		multiLineDescription: [
+			"# Turnstile Verification Widget",
+			"@description An [Astro](https://astro.build) component that is used to render a Turnstile verification widget. This widget is used to verify that a user is human.",
+			`@param {"auto"|"light"|"dark"} theme - The theme for the widget. (default: "auto")`,
+			`@param {"normal"|"compact"|"flexible"} size - The size for the widget. (default: "normal")`,
+			`@param {string} margin - The margin for the widget element. (default: '0.5rem')`,
+			"@example",
+			"```tsx",
+			"---",
+			`import TurnstileWidget from '${name}:components/TurnstileWidget';`,
+			"---",
+			"<form action='/your/api/endpoint' method='POST'>",
+			"<TurnstileWidget theme='light' size='compact' margin='1rem' />",
+			"<button type='submit'>Submit</button>",
+			"</form>",
+		],
+	},
+});
+
+// Add the module to the file
+components.addModule("astro-turnstile:components/TurnstileForm", {
+	defaultExport: {
+		typeDef: `typeof import('${name}/components/TurnstileForm.astro').TurnstileForm`,
+		multiLineDescription: [
+			"# Turnstile Verification Form",
+			"@description An [Astro](https://astro.build) component that is used to render a Turnstile verification form. This form includes a Turnstile verification widget and a submit button.",
+			"@slot default - Any unassigned content will be placed here.",
+			"@slot header - `<div slot='header'>...</div>`",
+			"@slot buttons - `<div slot='buttons'>...</div>`",
+			"@slot footer - `<div slot='footer'>...</div>`",
+			`@param {"auto"|"light"|"dark"} theme - The theme for the widget. (default: "auto")`,
+			`@param {"normal"|"compact"|"flexible"} size - The size for the widget. (default: "normal")`,
+			`@param {string} margin - The margin for the widget element. (default: '0.5rem')`,
+			`@param {"multipart/form-data"|"application/x-www-form-urlencoded"|"submit"} enctype - The form enctype. (default: 'application/x-www-form-urlencoded')`,
+		],
+	},
 });
 
 // Export the DTS files
diff --git a/playground/src/pages/index.astro b/playground/src/pages/index.astro
index caa42c1..f322090 100644
--- a/playground/src/pages/index.astro
+++ b/playground/src/pages/index.astro
@@ -1,57 +1,68 @@
 ---
-import TurnstileForm from "astro-turnstile/components/TurnstileForm";
-import Layout from "../layouts/Layout.astro";
+import TurnstileForm from 'astro-turnstile/components/TurnstileForm';
+import Layout from '../layouts/Layout.astro';
+import TurnstileWidget from 'astro-turnstile:components/TurnstileWidget';
 
-if (Astro.request.method === "POST") {
-	console.log("success");
+if (Astro.request.method === 'POST') {
+	console.log('success');
 }
 ---
 
 <Layout title="Welcome to Astro.">
 	<main>
+		<form>
+			<label>
+				Username:
+				<input type="text" name="username" required />
+			</label>
+			<button type="submit">Submit</button>
+			<TurnstileWidget />
+		</form>
+		<!-- <main>
 		<TurnstileForm action="/" method={'POST'} enctype={'submit'}>
 			<label>
 				Username:
 				<input type="text" name="username" required />
 			</label>
 		</TurnstileForm>
+	</main> -->
 	</main>
-</Layout>
 
-<style is:global>
-	main {
-		max-width: 600px;
-		margin: 0 auto;
-		padding: 20px;
-	}
-
-	form {
-		display: flex;
-		flex-direction: column;
-	}
-
-	label {
-		margin-bottom: 10px;
-	}
-
-	input[type='text'] {
-		padding: 8px;
-		font-size: 16px;
-		border: 1px solid #ccc;
-		border-radius: 4px;
-	}
-
-	button {
-		padding: 10px 20px;
-		background-color: #007bff;
-		color: white;
-		border: none;
-		border-radius: 4px;
-		cursor: pointer;
-		font-size: 16px;
-	}
-
-	button:hover {
-		background-color: #0056b3;
-	}
-</style>
+	<style is:global>
+		main {
+			max-width: 600px;
+			margin: 0 auto;
+			padding: 20px;
+		}
+
+		form {
+			display: flex;
+			flex-direction: column;
+		}
+
+		label {
+			margin-bottom: 10px;
+		}
+
+		input[type='text'] {
+			padding: 8px;
+			font-size: 16px;
+			border: 1px solid #ccc;
+			border-radius: 4px;
+		}
+
+		button {
+			padding: 10px 20px;
+			background-color: #007bff;
+			color: white;
+			border: none;
+			border-radius: 4px;
+			cursor: pointer;
+			font-size: 16px;
+		}
+
+		button:hover {
+			background-color: #0056b3;
+		}
+	</style>
+</Layout>