diff --git a/src/lib/components/index.ts b/src/lib/components/index.ts
index c5a94d8..46bf83b 100644
--- a/src/lib/components/index.ts
+++ b/src/lib/components/index.ts
@@ -37,4 +37,5 @@ export * from './atom';
 export * from './container';
 export * from './calendar';
 export * from './date-picker';
-export * from './qr-code';
\ No newline at end of file
+export * from './qr-code';
+export * from './lazy';
diff --git a/src/lib/components/lazy/index.ts b/src/lib/components/lazy/index.ts
new file mode 100644
index 0000000..a5334cf
--- /dev/null
+++ b/src/lib/components/lazy/index.ts
@@ -0,0 +1 @@
+export { default as Lazy } from './lazy.svelte';
diff --git a/src/lib/components/lazy/lazy.stories.svelte b/src/lib/components/lazy/lazy.stories.svelte
new file mode 100644
index 0000000..d2ebd31
--- /dev/null
+++ b/src/lib/components/lazy/lazy.stories.svelte
@@ -0,0 +1,35 @@
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+
+	const { Story } = defineMeta({
+		title: 'Atoms/Lazy'
+	});
+</script>
+
+<script lang="ts">
+	import Lazy from './lazy.svelte';
+	import { Root } from '../root';
+	import { delay } from 'es-toolkit';
+</script>
+
+<Story name="Lazy">
+	{#snippet children({ args })}
+		<Root>
+			{#snippet children({})}
+				<Lazy
+					promise={import('../button/button.svelte').then(async res=> {
+                    await delay(1000 * 5);
+
+                    return res.default;
+                })}
+				>
+					Hello World
+
+					{#snippet loading()}
+						<span>Loading...</span>
+					{/snippet}
+				</Lazy>
+			{/snippet}
+		</Root>
+	{/snippet}
+</Story>
diff --git a/src/lib/components/lazy/lazy.svelte b/src/lib/components/lazy/lazy.svelte
new file mode 100644
index 0000000..c4cbc43
--- /dev/null
+++ b/src/lib/components/lazy/lazy.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+	import type { Component } from 'svelte';
+	import type { LazyProps } from './types';
+
+	let { promise, children, loading, error, ...restProps }: LazyProps = $props();
+
+	let Lazy: Component | null = $state(null);
+
+	let err = $state();
+
+	promise
+		.then((c) => {
+			Lazy = c;
+		})
+		.catch((r) => {
+			err = r;
+		});
+</script>
+
+<Lazy {...restProps}>
+	{@render children?.()}
+</Lazy>
+
+{#if err && error}
+	{@render error?.()}
+{:else if !Lazy}
+	{@render loading?.()}
+{/if}
diff --git a/src/lib/components/lazy/types.ts b/src/lib/components/lazy/types.ts
new file mode 100644
index 0000000..8c5b85f
--- /dev/null
+++ b/src/lib/components/lazy/types.ts
@@ -0,0 +1,12 @@
+import type { Component, Snippet } from 'svelte';
+import type { HtmlAtomProps } from '../atom';
+
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface LazyExtendProps {}
+
+export interface LazyProps extends HtmlAtomProps<'button'>, LazyExtendProps {
+	promise: Promise<Component>;
+	children?: Snippet;
+	error?: Snippet;
+	loading?: Snippet;
+}