diff --git a/app/components/Package/Playgrounds.vue b/app/components/Package/Playgrounds.vue
index 83a6cdefb..3a6e4d18b 100644
--- a/app/components/Package/Playgrounds.vue
+++ b/app/components/Package/Playgrounds.vue
@@ -17,6 +17,7 @@ const providerIcons: Record<string, string> = {
   'nuxt-new': 'i-simple-icons:nuxtdotjs',
   'vite-new': 'i-simple-icons:vite',
   'jsfiddle': 'i-carbon:code',
+  'storybook': 'i-simple-icons:storybook',
 }
 
 // Map provider id to color class
@@ -30,6 +31,7 @@ const providerColors: Record<string, string> = {
   'nuxt-new': 'text-provider-nuxt',
   'vite-new': 'text-provider-vite',
   'jsfiddle': 'text-provider-jsfiddle',
+  'storybook': 'text-provider-storybook',
 }
 
 function getIcon(provider: string): string {
diff --git a/app/components/Storybook/FileTree.vue b/app/components/Storybook/FileTree.vue
new file mode 100644
index 000000000..8e4c34fc6
--- /dev/null
+++ b/app/components/Storybook/FileTree.vue
@@ -0,0 +1,129 @@
+<script setup lang="ts">
+import type { StorybookFileTree } from '#shared/types'
+import type { RouteLocationRaw } from 'vue-router'
+import { getFileIcon } from '~/utils/file-icons'
+import { getFirstStoryInDirectory } from '~/utils/storybook-tree'
+
+const props = defineProps<{
+  tree: StorybookFileTree[]
+  currentStoryId: string | null
+  baseUrl: string
+  /** Base path segments for the stories route (e.g., ['nuxt', 'v', '4.2.0']) */
+  basePath: string[]
+  depth?: number
+}>()
+
+const depth = computed(() => props.depth ?? 0)
+
+// Check if a node or any of its children is currently selected
+function isNodeActive(node: StorybookFileTree): boolean {
+  if (node.type === 'story' && props.currentStoryId === node.storyId) return true
+  if (node.type === 'directory') {
+    return props.currentStoryId?.startsWith(node.path + '/') || false
+  }
+  return false
+}
+
+// Build route object for a story
+function getStoryRoute(node: StorybookFileTree): RouteLocationRaw {
+  if (node.type === 'story') {
+    return {
+      name: 'stories',
+      params: { path: props.basePath },
+      query: { storyid: node.storyId },
+    }
+  }
+  // For directories - navigate to first story in that directory
+  if (node.type === 'directory') {
+    const firstStory = getFirstStoryInDirectory(node)
+    if (firstStory) {
+      return {
+        name: 'stories',
+        params: { path: props.basePath },
+        query: { storyid: firstStory.storyId },
+      }
+    }
+  }
+  return { name: 'stories', params: { path: props.basePath } }
+}
+
+// Get icon for story or directory
+function getNodeIcon(node: StorybookFileTree): string {
+  if (node.type === 'directory') {
+    return isNodeActive(node)
+      ? 'i-carbon:folder-open text-yellow-500'
+      : 'i-carbon:folder text-yellow-600'
+  }
+
+  if (node.storyId) {
+    // Try to get icon based on story file type if available
+    if (node.story?.importPath) {
+      return getFileIcon(node.story.importPath)
+    }
+    // Default story icon
+    return 'i-vscode-icons-file-type-storybook'
+  }
+
+  return getFileIcon(node.name)
+}
+
+const { toggleDir, isExpanded, autoExpandAncestors } = useStoryTreeState(props.baseUrl)
+
+// Handle directory click - toggle expansion and navigate to first story
+function handleDirectoryClick(node: StorybookFileTree) {
+  if (node.type !== 'directory') return
+
+  // Toggle directory expansion
+  toggleDir(node.path)
+
+  // Navigate to first story in directory (if available)
+  const route = getStoryRoute(node)
+  if (route.query?.storyid) {
+    navigateTo(route)
+  }
+}
+</script>
+
+<template>
+  <ul class="list-none m-0 p-0" :class="depth === 0 ? 'py-2' : ''">
+    <li v-for="node in tree" :key="node.path">
+      <!-- Directory -->
+      <template v-if="node.type === 'directory'">
+        <ButtonBase
+          class="w-full justify-start! rounded-none! border-none!"
+          block
+          :aria-pressed="isNodeActive(node)"
+          :style="{ paddingLeft: `${depth * 12 + 12}px` }"
+          @click="handleDirectoryClick(node)"
+          :classicon="isExpanded(node.path) ? 'i-carbon:chevron-down' : 'i-carbon:chevron-right'"
+        >
+          <span class="w-4 h-4 shrink-0" :class="getNodeIcon(node)" />
+          <span class="truncate">{{ node.name }}</span>
+        </ButtonBase>
+        <StorybookFileTree
+          v-if="isExpanded(node.path) && node.children"
+          :tree="node.children"
+          :current-story-id="currentStoryId"
+          :base-url="baseUrl"
+          :base-path="basePath"
+          :depth="depth + 1"
+        />
+      </template>
+
+      <!-- Story -->
+      <template v-else>
+        <LinkBase
+          variant="button-secondary"
+          :to="getStoryRoute(node)"
+          :aria-current="currentStoryId === node.storyId"
+          class="w-full justify-start! rounded-none! border-none!"
+          block
+          :style="{ paddingLeft: `${depth * 12 + 32}px` }"
+          :classicon="getNodeIcon(node)"
+        >
+          <span class="truncate">{{ node.name }}</span>
+        </LinkBase>
+      </template>
+    </li>
+  </ul>
+</template>
diff --git a/app/components/Storybook/MobileTreeDrawer.vue b/app/components/Storybook/MobileTreeDrawer.vue
new file mode 100644
index 000000000..89097439f
--- /dev/null
+++ b/app/components/Storybook/MobileTreeDrawer.vue
@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import type { StorybookFileTree } from '#shared/types'
+
+defineProps<{
+  tree: StorybookFileTree[]
+  currentStoryId: string | null
+  baseUrl: string
+  /** Base path segments for stories route (e.g., ['nuxt', 'v', '4.2.0']) */
+  basePath: string[]
+}>()
+
+const isOpen = shallowRef(false)
+
+// Close drawer on navigation
+const route = useRoute()
+watch(
+  () => route.fullPath,
+  () => {
+    isOpen.value = false
+  },
+)
+
+const isLocked = useScrollLock(document)
+// Prevent body scroll when drawer is open
+watch(isOpen, open => (isLocked.value = open))
+</script>
+
+<template>
+  <!-- Toggle button (mobile only) -->
+  <ButtonBase
+    variant="primary"
+    class="md:hidden fixed bottom-4 inset-ie-4 z-45"
+    :aria-label="$t('stories.toggle_tree')"
+    @click="isOpen = !isOpen"
+    :classicon="isOpen ? 'i-carbon:close' : 'i-carbon:folder'"
+  />
+
+  <!-- Backdrop -->
+  <Transition
+    enter-active-class="transition-opacity duration-200"
+    enter-from-class="opacity-0"
+    enter-to-class="opacity-100"
+    leave-active-class="transition-opacity duration-200"
+    leave-from-class="opacity-100"
+    leave-to-class="opacity-0"
+  >
+    <div v-if="isOpen" class="md:hidden fixed inset-0 z-40 bg-black/50" @click="isOpen = false" />
+  </Transition>
+
+  <!-- Drawer -->
+  <Transition
+    enter-active-class="transition-transform duration-200"
+    enter-from-class="-translate-x-full"
+    enter-to-class="translate-x-0"
+    leave-active-class="transition-transform duration-200"
+    leave-from-class="translate-x-0"
+    leave-to-class="-translate-x-full"
+  >
+    <aside
+      v-if="isOpen"
+      class="md:hidden fixed inset-y-0 inset-is-0 z-50 w-72 bg-bg-subtle border-ie border-border overflow-y-auto"
+    >
+      <div
+        class="sticky top-0 bg-bg-subtle border-b border-border px-4 py-3 flex items-center justify-start"
+      >
+        <span class="font-mono text-sm text-fg-muted">{{ $t('stories.stories_label') }}</span>
+        <span aria-hidden="true" class="flex-shrink-1 flex-grow-1" />
+        <ButtonBase
+          :aria-label="$t('stories.close_tree')"
+          @click="isOpen = false"
+          classicon="i-carbon-close"
+        />
+      </div>
+      <StorybookFileTree
+        :tree="tree"
+        :current-story-id="currentStoryId"
+        :base-url="baseUrl"
+        :base-path="basePath"
+      />
+    </aside>
+  </Transition>
+</template>
diff --git a/app/composables/useStoryTreeState.ts b/app/composables/useStoryTreeState.ts
new file mode 100644
index 000000000..0b9f52186
--- /dev/null
+++ b/app/composables/useStoryTreeState.ts
@@ -0,0 +1,36 @@
+import { computed } from 'vue'
+import { useState } from '#app'
+
+export function useStoryTreeState(baseUrl: string) {
+  const stateKey = computed(() => `npmx-story-tree${baseUrl}`)
+
+  const expanded = useState<Set<string>>(stateKey.value, () => new Set<string>())
+
+  function toggleDir(path: string) {
+    if (expanded.value.has(path)) {
+      expanded.value.delete(path)
+    } else {
+      expanded.value.add(path)
+    }
+  }
+
+  function isExpanded(path: string) {
+    return expanded.value.has(path)
+  }
+
+  function autoExpandAncestors(path: string) {
+    if (!path) return
+    const parts = path.split('/').filter(Boolean)
+    let prefix = ''
+    for (const part of parts) {
+      prefix = prefix ? `${prefix}/${part}` : part
+      expanded.value.add(prefix)
+    }
+  }
+
+  return {
+    toggleDir,
+    isExpanded,
+    autoExpandAncestors,
+  }
+}
diff --git a/app/pages/package-stories/[...path].vue b/app/pages/package-stories/[...path].vue
new file mode 100644
index 000000000..442dfb33d
--- /dev/null
+++ b/app/pages/package-stories/[...path].vue
@@ -0,0 +1,428 @@
+<script setup lang="ts">
+import type { StorybookFileTree } from '#shared/types'
+import {
+  transformStorybookEntries,
+  findStoryById,
+  getFirstStory,
+  getFirstStoryInDirectory,
+  getStoryBreadcrumbs,
+} from '~/utils/storybook-tree'
+
+definePageMeta({
+  name: 'stories',
+  path: '/package-stories/:path+',
+  alias: ['/package/stories/:path+', '/stories/:path+'],
+})
+
+const route = useRoute('stories')
+
+// Parse package name, version, and story ID from URL
+// Patterns:
+//   /stories/nuxt/v/4.2.0 → packageName: "nuxt", version: "4.2.0", storyId: null (auto-select first story)
+//   /stories/nuxt/v/4.2.0?storyid=example-button--primary → packageName: "nuxt", version: "4.2.0", storyId: "example-button--primary"
+//   /stories/@nuxt/kit/v/1.0.0 → packageName: "@nuxt/kit", version: "1.0.0", storyId: null
+const parsedRoute = computed(() => {
+  const segments = route.params.path
+  const storyId = (route.query.storyid as string) || null
+
+  // Find the /v/ separator for version
+  const vIndex = segments.indexOf('v')
+  if (vIndex === -1 || vIndex >= segments.length - 1) {
+    // No version specified - redirect or error
+    return {
+      packageName: segments.join('/'),
+      version: null as string | null,
+      storyId,
+    }
+  }
+
+  const packageName = segments.slice(0, vIndex).join('/')
+  const afterVersion = segments.slice(vIndex + 1)
+  const version = afterVersion[0] ?? null
+
+  return { packageName, version, storyId }
+})
+
+const packageName = computed(() => parsedRoute.value.packageName)
+const version = computed(() => parsedRoute.value.version)
+
+// Fetch package data for version list
+const { data: pkg } = usePackage(packageName)
+
+// URL pattern for version selector - maintain current story if available
+const versionUrlPattern = computed(() => {
+  const base = `/package-stories/${packageName.value}/v/{version}`
+  // Directly include the current storyid if available
+  return currentStoryId.value ? `${base}?storyid=${currentStoryId.value}` : base
+})
+
+// Fetch package.json to get Storybook URL
+const { data: packageJson } = useFetch<{ storybook: { title: string; url: string } }>(() => {
+  const url = `https://cdn.jsdelivr.net/npm/${packageName.value}/package.json`
+  return url
+})
+
+// Fetch Storybook index data
+const { data: storybookData, status: storybookStatus } = useLazyFetch<{
+  v: number
+  entries: Record<string, StorybookEntry>
+}>(
+  () => {
+    if (!packageJson.value?.storybook?.url) return ''
+    return packageJson.value.storybook.url + '/index.json'
+  },
+  {
+    key: computed(() => `storybook:${packageName.value}`),
+    server: false, // Storybook URLs are usually client-side only
+  },
+)
+
+// Transform Storybook entries to tree structure
+const storybookTree = computed(() => {
+  if (!storybookData.value?.entries) return []
+  return transformStorybookEntries(storybookData.value.entries)
+})
+
+// Find current story by ID
+const currentStory = computed(() => {
+  if (!storybookTree.value.length || !parsedRoute.value.storyId) return null
+  return findStoryById(storybookTree.value, parsedRoute.value.storyId)
+})
+
+// Get current story ID for iframe
+const currentStoryId = computed(() => {
+  return parsedRoute.value.storyId || currentStory.value?.storyId || null
+})
+
+// Get first story for default selection
+const firstStory = computed(() => {
+  if (storybookTree.value.length) {
+    return getFirstStory(storybookTree.value)
+  }
+  return null
+})
+
+// Auto-select first story if none specified
+watch(
+  [storybookTree, () => parsedRoute.value.storyId],
+  ([tree, storyId]) => {
+    if (tree.length && !storyId) {
+      const first = getFirstStory(tree)
+      if (first?.storyId) {
+        navigateTo({
+          name: 'stories',
+          params: { path: [...packageName.value.split('/'), 'v', version.value!] },
+          query: { storyid: first.storyId },
+        })
+      }
+    }
+  },
+  { immediate: true },
+)
+
+// Watch for version changes and maintain current story if it exists
+watch([() => version.value, storybookTree], ([newVersion, tree], [oldVersion]) => {
+  if (
+    newVersion &&
+    oldVersion &&
+    newVersion !== oldVersion &&
+    tree.length &&
+    currentStoryId.value
+  ) {
+    // Check if current story exists in new version
+    const currentStoryInNewVersion = findStoryById(tree, currentStoryId.value!)
+
+    if (currentStoryInNewVersion) {
+      // Story exists, maintain it - URL will automatically include storyid
+      return
+    } else {
+      // Story doesn't exist, try to find alternative
+      if (currentStory.value) {
+        const parts = currentStory.value.path.split('/')
+        if (parts.length > 1) {
+          // Try to find first story in same category
+          const category = parts.slice(0, -1).join('/')
+          const findStoryInCategory = (
+            tree: StorybookFileTree[],
+            category: string,
+          ): StorybookFileTree | null => {
+            for (const node of tree) {
+              if (node.type === 'directory' && node.path === category) {
+                return getFirstStoryInDirectory(node)
+              }
+              if (node.type === 'directory' && node.children) {
+                const found = findStoryInCategory(node.children, category)
+                if (found) return found
+              }
+            }
+            return null
+          }
+
+          const firstStoryInCategory = findStoryInCategory(tree, category)
+          if (firstStoryInCategory) {
+            navigateTo({
+              name: 'stories',
+              params: { path: [...packageName.value.split('/'), 'v', newVersion] },
+              query: { storyid: firstStoryInCategory.storyId },
+            })
+            return
+          }
+        }
+      }
+
+      // Fallback to first story overall
+      const first = getFirstStory(tree)
+      if (first?.storyId) {
+        navigateTo({
+          name: 'stories',
+          params: { path: [...packageName.value.split('/'), 'v', newVersion] },
+          query: { storyid: first.storyId },
+        })
+      }
+    }
+  }
+})
+
+// Build breadcrumbs for current story
+const breadcrumbs = computed(() => {
+  if (!currentStory.value) return []
+  return getStoryBreadcrumbs(currentStory.value)
+})
+
+// Navigation helper - build URL for a story
+function getStoryUrl(story: StorybookFileTree): string {
+  const base = `/package-stories/${packageName.value}/v/${version.value}`
+  return `${base}?storyid=${story.storyId}`
+}
+
+// Base path segments for route objects
+const basePath = computed(() => {
+  const segments = packageName.value.split('/')
+  return [...segments, 'v', version.value ?? '']
+})
+
+// Extract org name from scoped package
+const orgName = computed(() => {
+  const name = packageName.value
+  if (!name.startsWith('@')) return null
+  const match = name.match(/^@([^/]+)\//)
+  return match ? match[1] : null
+})
+
+// Storybook iframe URL
+const iframeUrl = computed(() => {
+  if (!packageJson.value?.storybook?.url || !currentStoryId.value) return ''
+  return `${packageJson.value.storybook.url}/iframe.html?id=${currentStoryId.value}`
+})
+
+// SEO Meta
+useHead({
+  title: () => {
+    if (currentStory.value) {
+      return `${currentStory.value.path} - ${packageName.value}@${version.value} - npmx`
+    }
+    return `Stories - ${packageName.value}@${version.value} - npmx`
+  },
+})
+
+useSeoMeta({
+  title: () => {
+    if (currentStory.value) {
+      return `${currentStory.value.path} - ${packageName.value}@${version.value} - npmx`
+    }
+    return `Stories - ${packageName.value}@${version.value} - npmx`
+  },
+  description: () => `Browse Storybook stories for ${packageName.value}@${version.value}`,
+  ogDescription: () => `Browse Storybook stories for ${packageName.value}@${version.value}`,
+})
+
+defineOgImageComponent('Default', {
+  title: () => `${pkg.value?.name ?? 'Package'} - Stories`,
+  description: () => pkg.value?.license ?? '',
+  primaryColor: '#ff6b6b',
+})
+</script>
+
+<template>
+  <main class="flex-1 flex flex-col">
+    <!-- Header -->
+    <header class="border-b border-border bg-bg sticky top-14 z-20">
+      <div class="container py-4">
+        <!-- Package info and navigation -->
+        <div class="flex items-center gap-2 mb-3 flex-wrap min-w-0">
+          <NuxtLink
+            :to="packageRoute(packageName, version)"
+            class="font-mono text-lg font-medium hover:text-fg transition-colors min-w-0 truncate max-w-[60vw] sm:max-w-none"
+            :title="packageName"
+          >
+            <span v-if="orgName" class="text-fg-muted">@{{ orgName }}/</span
+            >{{ orgName ? packageName.replace(`@${orgName}/`, '') : packageName }}
+          </NuxtLink>
+          <!-- Version selector -->
+          <VersionSelector
+            v-if="version && pkg?.versions && pkg?.['dist-tags']"
+            :package-name="packageName"
+            :current-version="version"
+            :versions="pkg.versions"
+            :dist-tags="pkg['dist-tags']"
+            :url-pattern="versionUrlPattern"
+          />
+          <span
+            v-else-if="version"
+            class="px-2 py-0.5 font-mono text-sm bg-bg-muted border border-border rounded truncate max-w-32 sm:max-w-48"
+            :title="`v${version}`"
+          >
+            v{{ version }}
+          </span>
+          <span class="text-fg-subtle shrink-0">/</span>
+          <span class="font-mono text-sm text-fg-muted shrink-0">Stories</span>
+        </div>
+
+        <!-- Breadcrumb navigation -->
+        <nav
+          :aria-label="$t('stories.story_path')"
+          class="flex items-center gap-1 font-mono text-sm overflow-x-auto"
+          dir="ltr"
+        >
+          <NuxtLink
+            v-if="currentStory"
+            :to="getStoryUrl(firstStory!)"
+            class="text-fg-muted hover:text-fg transition-colors shrink-0"
+          >
+            {{ $t('stories.root') }}
+          </NuxtLink>
+          <span v-else class="text-fg shrink-0">{{ $t('stories.root') }}</span>
+          <template v-for="(crumb, i) in breadcrumbs" :key="crumb.path">
+            <span class="text-fg-subtle">/</span>
+            <NuxtLink
+              v-if="i < breadcrumbs.length - 1"
+              :to="
+                getStoryUrl({
+                  path: crumb.path,
+                  name: crumb.name,
+                  storyId: crumb.storyId,
+                  type: 'story',
+                } as any)
+              "
+              class="text-fg-muted hover:text-fg transition-colors"
+            >
+              {{ crumb.name }}
+            </NuxtLink>
+            <span v-else class="text-fg">{{ crumb.name }}</span>
+          </template>
+        </nav>
+      </div>
+    </header>
+
+    <!-- Error: no version -->
+    <div v-if="!version" class="container py-20 text-center">
+      <p class="text-fg-muted mb-4">{{ $t('stories.version_required') }}</p>
+      <LinkBase variant="button-secondary" :to="packageRoute(packageName)">{{
+        $t('stories.go_to_package')
+      }}</LinkBase>
+    </div>
+
+    <!-- Loading state -->
+    <div v-else-if="storybookStatus === 'pending'" class="container py-20 text-center">
+      <div class="i-svg-spinners:ring-resize w-8 h-8 mx-auto text-fg-muted" />
+      <p class="mt-4 text-fg-muted">{{ $t('stories.loading_stories') }}</p>
+    </div>
+
+    <!-- Error: no Storybook found -->
+    <div v-else-if="!packageJson?.storybook?.url" class="container py-20 text-center">
+      <div class="i-carbon:document-blank w-12 h-12 mx-auto text-fg-subtle mb-4" />
+      <p class="text-fg-muted mb-4">{{ $t('stories.no_storybook_found') }}</p>
+      <p class="text-fg-subtle text-sm mb-4">{{ $t('stories.check_package_json') }}</p>
+      <LinkBase variant="button-secondary" :to="packageRoute(packageName, version)">{{
+        $t('stories.back_to_package')
+      }}</LinkBase>
+    </div>
+
+    <!-- Error loading Storybook data -->
+    <div v-else-if="storybookStatus === 'error'" class="container py-20 text-center" role="alert">
+      <div class="i-carbon:warning-alt w-8 h-8 mx-auto text-fg-subtle mb-4" />
+      <p class="text-fg-muted mb-2">{{ $t('stories.failed_to_load_stories') }}</p>
+      <p class="text-fg-subtle text-sm mb-4">{{ $t('stories.storybook_unavailable') }}</p>
+      <a
+        :href="packageJson.storybook.url"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="inline-flex items-center gap-1 text-primary hover:text-primary-hover"
+      >
+        {{ $t('stories.open_storybook') }}
+        <span class="i-carbon:launch w-3 h-3" />
+      </a>
+    </div>
+
+    <!-- Main content: story tree + iframe viewer -->
+    <div v-else-if="storybookTree.length" class="flex flex-1" dir="ltr">
+      <!-- Story tree sidebar - sticky with internal scroll -->
+      <aside
+        class="w-64 lg:w-72 border-ie border-border shrink-0 hidden md:block bg-bg-subtle sticky top-28 self-start h-[calc(100vh-7rem)] overflow-y-auto"
+      >
+        <StorybookFileTree
+          :tree="storybookTree"
+          :current-story-id="currentStoryId"
+          :base-url="`/package-stories/${packageName}/v/${version}`"
+          :base-path="basePath"
+        />
+      </aside>
+
+      <!-- Story iframe viewer -->
+      <div class="flex-1 min-w-0">
+        <div
+          v-if="currentStory"
+          class="sticky z-10 top-0 bg-bg border-b border-border px-4 py-2 flex items-center justify-between"
+        >
+          <div class="flex items-center gap-3 text-sm">
+            <span class="text-fg-muted">{{ $t('stories.story') }}</span>
+            <span class="text-fg font-medium">{{ currentStory.path }}</span>
+            <span v-if="currentStory.story?.tags" class="text-fg-subtle">
+              {{ currentStory.story.tags.join(', ') }}
+            </span>
+          </div>
+          <div class="flex items-center gap-2">
+            <a
+              :href="packageJson.storybook.url + '?path=/story/' + currentStoryId"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="px-2 py-1 font-mono text-xs text-fg-muted bg-bg-subtle border border-border rounded hover:text-fg hover:border-border-hover transition-colors inline-flex items-center gap-1"
+            >
+              {{ $t('stories.open_in_storybook') }}
+              <span class="i-carbon:launch w-3 h-3" />
+            </a>
+          </div>
+        </div>
+
+        <!-- Story iframe -->
+        <div v-if="iframeUrl" class="w-full h-[calc(100vh-10rem)]">
+          <iframe
+            :src="iframeUrl"
+            class="w-full h-full border-0"
+            frameborder="0"
+            :title="currentStory?.path || 'Storybook Story'"
+          ></iframe>
+        </div>
+
+        <!-- No story selected -->
+        <div v-else class="container py-20 text-center">
+          <div class="i-carbon:document-blank w-12 h-12 mx-auto text-fg-subtle mb-4" />
+          <p class="text-fg-muted mb-4">{{ $t('stories.select_story') }}</p>
+        </div>
+      </div>
+    </div>
+
+    <!-- Mobile story tree toggle -->
+    <ClientOnly>
+      <Teleport to="body">
+        <StorybookMobileTreeDrawer
+          v-if="storybookTree.length"
+          :tree="storybookTree"
+          :current-story-id="currentStoryId"
+          :base-url="`/package-stories/${packageName}/v/${version}`"
+          :base-path="basePath"
+        />
+      </Teleport>
+    </ClientOnly>
+  </main>
+</template>
diff --git a/app/pages/package/[[org]]/[name].vue b/app/pages/package/[[org]]/[name].vue
index 913c54af3..c8472161b 100644
--- a/app/pages/package/[[org]]/[name].vue
+++ b/app/pages/package/[[org]]/[name].vue
@@ -54,6 +54,12 @@ if (import.meta.server) {
   assertValidPackageName(packageName.value)
 }
 
+const { data: packageJson } = useLazyFetch<{ storybook?: { title: string; url: string } }>(() => {
+  const version = requestedVersion.value ?? 'latest'
+  const url = `https://cdn.jsdelivr.net/npm/${packageName.value}@${version}/package.json`
+  return url
+})
+
 // Fetch README for specific version if requested, otherwise latest
 const { data: readmeData } = useLazyFetch<ReadmeResponse>(
   () => {
@@ -64,6 +70,20 @@ const { data: readmeData } = useLazyFetch<ReadmeResponse>(
   { default: () => ({ html: '', md: '', playgroundLinks: [], toc: [] }) },
 )
 
+const playgroundLinks = computed(() => [
+  ...readmeData.value.playgroundLinks,
+  ...(packageJson.value?.storybook
+    ? [
+        {
+          url: packageJson.value.storybook.url,
+          provider: 'storybook',
+          providerName: 'Storybook',
+          label: 'Storybook',
+        },
+      ]
+    : []),
+])
+
 //copy README file as Markdown
 const { copied: copiedReadme, copy: copyReadme } = useClipboard({
   source: () => readmeData.value?.md ?? '',
@@ -631,6 +651,15 @@ onKeyStroke(
             >
               {{ $t('package.links.code') }}
             </LinkBase>
+            <LinkBase
+              v-if="packageJson?.storybook"
+              variant="button-secondary"
+              :to="{ name: 'stories', params: { path: [pkg.name, 'v', resolvedVersion] } }"
+              aria-keyshortcuts="."
+              classicon="i-carbon:code"
+            >
+              stories
+            </LinkBase>
             <LinkBase
               variant="button-secondary"
               :to="{ name: 'compare', query: { packages: pkg.name } }"
@@ -1152,10 +1181,7 @@ onKeyStroke(
           <PackageWeeklyDownloadStats :packageName :createdIso="pkg?.time?.created ?? null" />
 
           <!-- Playground links -->
-          <PackagePlaygrounds
-            v-if="readmeData?.playgroundLinks?.length"
-            :links="readmeData.playgroundLinks"
-          />
+          <PackagePlaygrounds v-if="playgroundLinks.length" :links="playgroundLinks" />
 
           <PackageCompatibility :engines="displayVersion?.engines" />
 
diff --git a/app/utils/storybook-tree.ts b/app/utils/storybook-tree.ts
new file mode 100644
index 000000000..2643f397f
--- /dev/null
+++ b/app/utils/storybook-tree.ts
@@ -0,0 +1,140 @@
+import type { StorybookEntry, StorybookFileTree } from '#shared/types'
+
+/**
+ * Transform flat Storybook entries into hierarchical tree structure
+ */
+export function transformStorybookEntries(
+  entries: Record<string, StorybookEntry>,
+): StorybookFileTree[] {
+  const tree: StorybookFileTree[] = []
+  const dirMap = new Map<string, StorybookFileTree>()
+
+  // Use entries in original order to preserve object key ordering
+  for (const [_id, entry] of Object.entries(entries)) {
+    // Parse title into path parts
+    // "Example/Button/Primary" -> ["Example", "Button", "Primary"]
+    if (!entry.title) continue
+    const parts = entry.title.split('/')
+    const storyName = entry.name
+    const storyPath = parts.join('/') || '' || ''
+
+    // Create directories as needed
+    let currentPath = ''
+    for (let i = 0; i < parts.length; i++) {
+      const part = parts[i]
+      if (!part) continue
+      currentPath = currentPath ? `${currentPath}/${part}` : part
+
+      if (!dirMap.has(currentPath)) {
+        const dirNode: StorybookFileTree = {
+          name: part,
+          path: currentPath,
+          type: 'directory',
+          children: [],
+        }
+        dirMap.set(currentPath, dirNode)
+
+        // Add to appropriate parent
+        if (i === 0) {
+          tree.push(dirNode)
+        } else {
+          const parentPath = parts.slice(0, i).join('/') || ''
+          const parent = dirMap.get(parentPath)
+          if (parent) {
+            parent.children!.push(dirNode)
+          }
+        }
+      }
+    }
+
+    // Create story node
+    const storyNode: StorybookFileTree = {
+      name: storyName,
+      path: entry.title,
+      type: 'story',
+      storyId: entry.id,
+      story: entry,
+    }
+
+    // Add story to its directory or root
+    if (storyPath) {
+      const parentDir = dirMap.get(storyPath)
+      if (parentDir) {
+        parentDir.children!.push(storyNode)
+      }
+    } else {
+      // Root level story
+      tree.push(storyNode)
+    }
+  }
+
+  return tree
+}
+
+/**
+ * Find a story by its ID in the tree
+ */
+export function findStoryById(
+  tree: StorybookFileTree[],
+  storyId: string,
+): StorybookFileTree | null {
+  for (const node of tree) {
+    if (node.type === 'story' && node.storyId === storyId) {
+      return node
+    }
+    if (node.type === 'directory' && node.children) {
+      const found = findStoryById(node.children, storyId)
+      if (found) return found
+    }
+  }
+  return null
+}
+
+/**
+ * Get the first story from the tree (for default selection)
+ */
+export function getFirstStory(tree: StorybookFileTree[]): StorybookFileTree | null {
+  for (const node of tree) {
+    if (node.type === 'story') {
+      return node
+    }
+    if (node.type === 'directory' && node.children) {
+      const found = getFirstStory(node.children)
+      if (found) return found
+    }
+  }
+  return null
+}
+
+/**
+ * Get the first story from a specific directory
+ */
+export function getFirstStoryInDirectory(directory: StorybookFileTree): StorybookFileTree | null {
+  if (directory.type !== 'directory' || !directory.children) {
+    return null
+  }
+  return getFirstStory(directory.children)
+}
+
+/**
+ * Build breadcrumb path segments for a story
+ */
+export function getStoryBreadcrumbs(
+  story: StorybookFileTree,
+): { name: string; path: string; storyId?: string }[] {
+  const parts = story.path.split('/')
+  const result: { name: string; path: string; storyId?: string }[] = []
+
+  for (let i = 0; i < parts.length; i++) {
+    const part = parts[i]
+    if (!part) continue
+    const path = parts.slice(0, i + 1).join('/')
+    result.push({
+      name: part,
+      path,
+      storyId: i === parts.length - 1 ? story.storyId || undefined : undefined,
+    })
+  }
+
+  return result
+}
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index f0f28b1c2..72f7e4955 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -631,6 +631,25 @@
     },
     "file_path": "File path"
   },
+  "stories": {
+    "stories_label": "Stories",
+    "story_path": "Story path",
+    "root": "Stories",
+    "version_required": "Version is required to browse stories",
+    "go_to_package": "Go to package",
+    "loading_stories": "Loading Storybook stories...",
+    "no_storybook_found": "No Storybook found",
+    "check_package_json": "Check if this package has Storybook configuration in package.json",
+    "back_to_package": "Back to package",
+    "failed_to_load_stories": "Failed to load Storybook stories",
+    "storybook_unavailable": "The Storybook instance may be unavailable or misconfigured",
+    "open_storybook": "Open Storybook",
+    "story": "Story",
+    "open_in_storybook": "Open in Storybook",
+    "select_story": "Select a story from the tree to view it here",
+    "toggle_tree": "Toggle story tree",
+    "close_tree": "Close story tree"
+  },
   "badges": {
     "provenance": {
       "verified": "verified",
diff --git a/i18n/schema.json b/i18n/schema.json
index 1b2ffaa8f..493412250 100644
--- a/i18n/schema.json
+++ b/i18n/schema.json
@@ -1897,6 +1897,63 @@
       },
       "additionalProperties": false
     },
+    "stories": {
+      "type": "object",
+      "properties": {
+        "stories_label": {
+          "type": "string"
+        },
+        "story_path": {
+          "type": "string"
+        },
+        "root": {
+          "type": "string"
+        },
+        "version_required": {
+          "type": "string"
+        },
+        "go_to_package": {
+          "type": "string"
+        },
+        "loading_stories": {
+          "type": "string"
+        },
+        "no_storybook_found": {
+          "type": "string"
+        },
+        "check_package_json": {
+          "type": "string"
+        },
+        "back_to_package": {
+          "type": "string"
+        },
+        "failed_to_load_stories": {
+          "type": "string"
+        },
+        "storybook_unavailable": {
+          "type": "string"
+        },
+        "open_storybook": {
+          "type": "string"
+        },
+        "story": {
+          "type": "string"
+        },
+        "open_in_storybook": {
+          "type": "string"
+        },
+        "select_story": {
+          "type": "string"
+        },
+        "toggle_tree": {
+          "type": "string"
+        },
+        "close_tree": {
+          "type": "string"
+        }
+      },
+      "additionalProperties": false
+    },
     "badges": {
       "type": "object",
       "properties": {
diff --git a/lunaria/files/en-GB.json b/lunaria/files/en-GB.json
index 0655549a9..25695dada 100644
--- a/lunaria/files/en-GB.json
+++ b/lunaria/files/en-GB.json
@@ -630,6 +630,25 @@
     },
     "file_path": "File path"
   },
+  "stories": {
+    "stories_label": "Stories",
+    "story_path": "Story path",
+    "root": "Stories",
+    "version_required": "Version is required to browse stories",
+    "go_to_package": "Go to package",
+    "loading_stories": "Loading Storybook stories...",
+    "no_storybook_found": "No Storybook found",
+    "check_package_json": "Check if this package has Storybook configuration in package.json",
+    "back_to_package": "Back to package",
+    "failed_to_load_stories": "Failed to load Storybook stories",
+    "storybook_unavailable": "The Storybook instance may be unavailable or misconfigured",
+    "open_storybook": "Open Storybook",
+    "story": "Story",
+    "open_in_storybook": "Open in Storybook",
+    "select_story": "Select a story from the tree to view it here",
+    "toggle_tree": "Toggle story tree",
+    "close_tree": "Close story tree"
+  },
   "badges": {
     "provenance": {
       "verified": "verified",
diff --git a/lunaria/files/en-US.json b/lunaria/files/en-US.json
index 7fb0060ef..d9282873d 100644
--- a/lunaria/files/en-US.json
+++ b/lunaria/files/en-US.json
@@ -630,6 +630,25 @@
     },
     "file_path": "File path"
   },
+  "stories": {
+    "stories_label": "Stories",
+    "story_path": "Story path",
+    "root": "Stories",
+    "version_required": "Version is required to browse stories",
+    "go_to_package": "Go to package",
+    "loading_stories": "Loading Storybook stories...",
+    "no_storybook_found": "No Storybook found",
+    "check_package_json": "Check if this package has Storybook configuration in package.json",
+    "back_to_package": "Back to package",
+    "failed_to_load_stories": "Failed to load Storybook stories",
+    "storybook_unavailable": "The Storybook instance may be unavailable or misconfigured",
+    "open_storybook": "Open Storybook",
+    "story": "Story",
+    "open_in_storybook": "Open in Storybook",
+    "select_story": "Select a story from the tree to view it here",
+    "toggle_tree": "Toggle story tree",
+    "close_tree": "Close story tree"
+  },
   "badges": {
     "provenance": {
       "verified": "verified",
diff --git a/shared/types/index.ts b/shared/types/index.ts
index 96f55a32b..c97553f28 100644
--- a/shared/types/index.ts
+++ b/shared/types/index.ts
@@ -8,3 +8,4 @@ export * from './deno-doc'
 export * from './i18n-status'
 export * from './comparison'
 export * from './skills'
+export * from './storybook'
diff --git a/shared/types/storybook.ts b/shared/types/storybook.ts
new file mode 100644
index 000000000..c026def04
--- /dev/null
+++ b/shared/types/storybook.ts
@@ -0,0 +1,81 @@
+/**
+ * Storybook API Types
+ * Types for Storybook index.json responses and story navigation
+ */
+
+/**
+ * Individual story entry from Storybook's index.json
+ */
+export interface StorybookEntry {
+  /** Unique identifier for the story (e.g., "example-button--primary") */
+  id: string
+  /** Display name of the story */
+  name: string
+  /** Full title/path (e.g., "Example/Button/Primary") */
+  title: string
+  /** Import path for the story file */
+  importPath?: string
+  /** Story tags (e.g., ["autodocs", "play-fn"]) */
+  tags?: string[]
+  /** Component kind/group */
+  kind?: string
+  /** Story name (alternative to 'name') */
+  story?: string
+  /** Story parameters and configuration */
+  parameters?: Record<string, any>
+  /** Story metadata */
+  type?: 'story' | 'docs' | 'component'
+}
+
+/**
+ * Storybook index.json response structure
+ */
+export interface StorybookIndexResponse {
+  /** Storybook version */
+  v?: string
+  /** All story entries keyed by their ID */
+  entries: Record<string, StorybookEntry>
+  /** Global metadata about the Storybook instance */
+  metadata?: {
+    /** Storybook version info */
+    storybook?: {
+      version?: string
+      configDir?: string
+    }
+    /** Package information */
+    packageJson?: {
+      name?: string
+      version?: string
+      dependencies?: Record<string, string>
+    }
+  }
+}
+
+/**
+ * Tree node for Storybook story navigation
+ * Similar structure to PackageFileTree but for stories
+ */
+export interface StorybookFileTree {
+  /** Story or group name */
+  name: string
+  /** Full path from root */
+  path: string
+  /** Node type */
+  type: 'story' | 'directory'
+  /** Story ID (only for stories) */
+  storyId?: string
+  /** Story entry data (only for stories) */
+  story?: StorybookEntry
+  /** Child nodes (only for directories) */
+  children?: StorybookFileTree[]
+}
+
+/**
+ * Response for Storybook tree API
+ */
+export interface StorybookTreeResponse {
+  package: string
+  version: string
+  storybookUrl: string
+  tree: StorybookFileTree[]
+}
diff --git a/uno.config.ts b/uno.config.ts
index b75446763..26bf8db80 100644
--- a/uno.config.ts
+++ b/uno.config.ts
@@ -98,6 +98,7 @@ export default defineConfig({
         nuxt: '#00DC82',
         vite: '#646CFF',
         jsfiddle: '#0084FF',
+        storybook: '#FF4785',
       },
     },
     animation: {