diff --git a/v2/pink-sb/src/lib/index.ts b/v2/pink-sb/src/lib/index.ts
index 22314eb3a..3e3c2a56e 100644
--- a/v2/pink-sb/src/lib/index.ts
+++ b/v2/pink-sb/src/lib/index.ts
@@ -19,6 +19,7 @@ export { default as ActionList } from './action-list/index.js';
 export { default as Upload } from './upload/index.js';
 export { default as Dialog } from './Dialog.svelte';
 export { default as Empty } from './Empty.svelte';
+export { default as Skeleton } from './Skeleton.svelte';
 export { default as Keyboard } from './Keyboard.svelte';
 export { default as Icon } from './Icon.svelte';
 export { default as Pagination } from './Pagination.svelte';
diff --git a/v2/pink-sb/src/stories/Skeleton.stories.svelte b/v2/pink-sb/src/stories/Skeleton.stories.svelte
new file mode 100644
index 000000000..7c320389a
--- /dev/null
+++ b/v2/pink-sb/src/stories/Skeleton.stories.svelte
@@ -0,0 +1,34 @@
+<script context="module" lang="ts">
+    import { Skeleton } from '$lib/index.js';
+    import type { MetaProps } from '@storybook/addon-svelte-csf';
+    import { Story } from '@storybook/addon-svelte-csf';
+
+    export const meta: MetaProps = {
+        title: 'Components/Skeleton',
+        component: Skeleton,
+        args: {
+            variant: 'circle',
+            width: 44,
+            height: 12
+        },
+        argTypes: {
+            variant: {
+                options: ['circle', 'square', 'line'],
+                control: { type: 'select' }
+            }
+        }
+    };
+</script>
+
+<div class="wrapper">
+    <Story name="Default" let:args>
+        <Skeleton {...args} />
+    </Story>
+</div>
+
+<style>
+    .wrapper {
+        margin: 100px auto;
+        width: 400px;
+    }
+</style>