Docs: Rework Get Started page CTA positioning and copy #33244
Conversation
Co-authored-by: Michael Shilman <[email protected]>
Sidnioulz
added
maintenance
📝 WalkthroughWalkthroughThis PR restructures multiple framework setup guides in the Storybook documentation, replacing legacy narrative install flows with standardized Get Started patterns using GetStartedVersions and CodeSnippets components. The reorganization introduces consistent Install, Configure, Run, and FAQ sections across all framework documentation while emphasizing Vite-based frameworks over Webpack alternatives. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes
Possibly related PRs
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 6
🧹 Nitpick comments (5)
docs/get-started/frameworks/sveltekit.mdx (1)
158-158: Minor formatting inconsistency in prettier-ignore comments.Lines 158, 168, and 206 use
{/* prettier-ignore-start */ }with a trailing space before the closing brace, while all other instances (lines 74, 88, 110, 124, 134, 218, 226, 357) use{/* prettier-ignore-start */}without the extra space. Normalize these for consistency.Apply this diff to align with the rest of the file:
- {/* prettier-ignore-start */ } + {/* prettier-ignore-start */}Repeat for lines 168 and 206.
Also applies to: 168-168, 206-206
docs/get-started/frameworks/nextjs-vite.mdx (2)
20-30: Consider adding Node.js version requirement.The Requirements section specifies Next.js and Vite versions but omits the Node.js version requirement, which is typically necessary for ensuring npm/yarn/pnpm compatibility. This is an optional enhancement that may help users avoid environment-related setup issues.
604-609: Minor: Reword to eliminate split infinitive.The phrasing "recommended to do your research on how to properly make" contains a split infinitive. Consider: "It is recommended that you do your research on how to make your modification properly to Storybook's Vite config and on how Vite works."
This aligns with the static analysis hint and improves writing clarity.
docs/get-started/frameworks/react-native-web-vite.mdx (1)
68-70: Clarify intent of TODO comment about missing image.The TODO comment indicates an image placeholder but doesn't specify where the image should be sourced or what it depicts. Clarify whether the image should be:
- Added to the documentation in a later task
- Removed if no longer needed
- Replaced with alternative visual content
This requires clarification on whether you want me to flag this for a follow-up task or if the image reference should be removed entirely.
docs/get-started/frameworks/nextjs.mdx (1)
2-6: Consider clarifying the title to reflect this is the Webpack alternative.The document title "Storybook for Next.js with Webpack" paired with the prominent Callout on line 12 recommending the Vite path might confuse new users. Consider a subtitle or adjusted title like "Storybook for Next.js (Webpack)" or "Storybook for Next.js with Webpack (Legacy)" to set expectations clearly.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (13)
docs/get-started/frameworks/angular.mdx(5 hunks)docs/get-started/frameworks/index.mdx(1 hunks)docs/get-started/frameworks/nextjs-vite.mdx(22 hunks)docs/get-started/frameworks/nextjs.mdx(25 hunks)docs/get-started/frameworks/preact-vite.mdx(1 hunks)docs/get-started/frameworks/react-native-web-vite.mdx(3 hunks)docs/get-started/frameworks/react-vite.mdx(1 hunks)docs/get-started/frameworks/react-webpack5.mdx(2 hunks)docs/get-started/frameworks/svelte-vite.mdx(2 hunks)docs/get-started/frameworks/sveltekit.mdx(4 hunks)docs/get-started/frameworks/vue3-vite.mdx(9 hunks)docs/get-started/frameworks/web-components-vite.mdx(1 hunks)docs/index.mdx(1 hunks)
🧰 Additional context used
🧠 Learnings (29)
📓 Common learnings
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-28T14:50:24.872Z
Learning: Follow existing patterns and conventions in the Storybook codebase
Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32458
File: code/core/src/components/components/Select/Select.tsx:200-204
Timestamp: 2025-11-05T09:38:47.712Z
Learning: Repo: storybookjs/storybook — Guidance: Until Storybook 11 is released, do not suggest using React.useId anywhere (e.g., in code/core/src/components/components/Select/Select.tsx) to maintain compatibility with React 17 runtimes. Prefer advising: accept a caller-provided props.id and, if needed, generate a client-only fallback id to minimize SSR hydration issues — but avoid useId. Resume prompting for useId after Storybook 11.
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-28T14:50:24.872Z
Learning: Applies to code/{addons,frameworks}/**/README.md : Include code examples in addon/framework documentation for significant changes
📚 Learning: 2025-11-28T14:50:24.872Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-28T14:50:24.872Z
Learning: Applies to code/{addons,frameworks}/**/README.md : Include code examples in addon/framework documentation for significant changes
Applied to files:
docs/get-started/frameworks/web-components-vite.mdxdocs/get-started/frameworks/index.mdxdocs/index.mdxdocs/get-started/frameworks/svelte-vite.mdxdocs/get-started/frameworks/angular.mdxdocs/get-started/frameworks/sveltekit.mdxdocs/get-started/frameworks/nextjs-vite.mdxdocs/get-started/frameworks/vue3-vite.mdxdocs/get-started/frameworks/nextjs.mdx
📚 Learning: 2025-11-28T14:50:24.872Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-28T14:50:24.872Z
Learning: Applies to README.md : Update relevant README files for significant code changes
Applied to files:
docs/get-started/frameworks/web-components-vite.mdxdocs/get-started/frameworks/index.mdxdocs/index.mdxdocs/get-started/frameworks/react-native-web-vite.mdxdocs/get-started/frameworks/svelte-vite.mdxdocs/get-started/frameworks/angular.mdxdocs/get-started/frameworks/preact-vite.mdxdocs/get-started/frameworks/sveltekit.mdxdocs/get-started/frameworks/react-webpack5.mdxdocs/get-started/frameworks/nextjs-vite.mdxdocs/get-started/frameworks/vue3-vite.mdxdocs/get-started/frameworks/nextjs.mdxdocs/get-started/frameworks/react-vite.mdx
📚 Learning: 2025-11-28T14:50:24.872Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-28T14:50:24.872Z
Learning: Follow existing patterns and conventions in the Storybook codebase
Applied to files:
docs/get-started/frameworks/web-components-vite.mdxdocs/get-started/frameworks/index.mdxdocs/index.mdxdocs/get-started/frameworks/react-native-web-vite.mdxdocs/get-started/frameworks/svelte-vite.mdxdocs/get-started/frameworks/angular.mdxdocs/get-started/frameworks/preact-vite.mdxdocs/get-started/frameworks/sveltekit.mdxdocs/get-started/frameworks/react-webpack5.mdxdocs/get-started/frameworks/nextjs-vite.mdxdocs/get-started/frameworks/vue3-vite.mdxdocs/get-started/frameworks/nextjs.mdxdocs/get-started/frameworks/react-vite.mdx
📚 Learning: 2025-11-05T09:38:47.712Z
Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32458
File: code/core/src/components/components/Select/Select.tsx:200-204
Timestamp: 2025-11-05T09:38:47.712Z
Learning: Repo: storybookjs/storybook — Guidance: Until Storybook 11 is released, do not suggest using React.useId anywhere (e.g., in code/core/src/components/components/Select/Select.tsx) to maintain compatibility with React 17 runtimes. Prefer advising: accept a caller-provided props.id and, if needed, generate a client-only fallback id to minimize SSR hydration issues — but avoid useId. Resume prompting for useId after Storybook 11.
Applied to files:
docs/get-started/frameworks/web-components-vite.mdxdocs/index.mdxdocs/get-started/frameworks/react-native-web-vite.mdxdocs/get-started/frameworks/svelte-vite.mdxdocs/get-started/frameworks/angular.mdxdocs/get-started/frameworks/preact-vite.mdxdocs/get-started/frameworks/sveltekit.mdxdocs/get-started/frameworks/react-webpack5.mdxdocs/get-started/frameworks/nextjs-vite.mdxdocs/get-started/frameworks/vue3-vite.mdxdocs/get-started/frameworks/nextjs.mdxdocs/get-started/frameworks/react-vite.mdx
📚 Learning: 2025-11-05T09:37:25.920Z
Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32458
File: code/core/src/components/components/tooltip/WithTooltip.tsx:54-96
Timestamp: 2025-11-05T09:37:25.920Z
Learning: Repo: storybookjs/storybook — In code/core/src/components/components/tooltip/WithTooltip.tsx, the legacy WithTooltip implementation is intentionally reintroduced for backward compatibility and is deprecated; maintainers (per Sidnioulz) do not want maintenance or improvements on it. Prefer WithTooltipNew/Popover; avoid suggesting changes to WithTooltip.* going forward.
Applied to files:
docs/index.mdxdocs/get-started/frameworks/vue3-vite.mdxdocs/get-started/frameworks/nextjs.mdx
📚 Learning: 2025-09-24T09:39:39.233Z
Learnt from: ndelangen
Repo: storybookjs/storybook PR: 32507
File: code/core/src/manager/globals/globals-module-info.ts:25-33
Timestamp: 2025-09-24T09:39:39.233Z
Learning: In Storybook, storybook/actions/decorator is a preview-only entrypoint and should not be included in manager globals configuration. The duplicatedKeys array in code/core/src/manager/globals/globals-module-info.ts is specifically for manager-side externalization, not preview entrypoints.
Applied to files:
docs/get-started/frameworks/angular.mdx
📚 Learning: 2025-11-24T17:49:59.279Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-11-24T17:49:59.279Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Document complex mock behaviors in Vitest tests
Applied to files:
docs/get-started/frameworks/sveltekit.mdxdocs/get-started/frameworks/nextjs-vite.mdxdocs/get-started/frameworks/nextjs.mdx
📚 Learning: 2025-11-24T17:49:59.279Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-11-24T17:49:59.279Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Mock all required dependencies that the test subject uses
Applied to files:
docs/get-started/frameworks/sveltekit.mdxdocs/get-started/frameworks/nextjs-vite.mdxdocs/get-started/frameworks/nextjs.mdx
📚 Learning: 2025-11-28T14:50:24.872Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-28T14:50:24.872Z
Learning: Applies to code/**/*.{test,spec}.{ts,tsx,js,jsx} : Mock external dependencies using vi.mock() for file system, loggers, and other external dependencies in tests
Applied to files:
docs/get-started/frameworks/sveltekit.mdxdocs/get-started/frameworks/nextjs-vite.mdxdocs/get-started/frameworks/nextjs.mdx
📚 Learning: 2025-11-24T17:49:59.279Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-11-24T17:49:59.279Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Use type-safe mocking with `vi.mocked()` in Vitest tests
Applied to files:
docs/get-started/frameworks/sveltekit.mdxdocs/get-started/frameworks/nextjs-vite.mdxdocs/get-started/frameworks/nextjs.mdx
📚 Learning: 2025-11-24T17:49:59.279Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-11-24T17:49:59.279Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Use `vi.mocked()` to type and access the mocked functions in Vitest tests
Applied to files:
docs/get-started/frameworks/sveltekit.mdxdocs/get-started/frameworks/nextjs-vite.mdxdocs/get-started/frameworks/nextjs.mdx
📚 Learning: 2025-11-24T17:49:59.279Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-11-24T17:49:59.279Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Mock all required properties and methods that the test subject uses in Vitest tests
Applied to files:
docs/get-started/frameworks/sveltekit.mdxdocs/get-started/frameworks/nextjs-vite.mdxdocs/get-started/frameworks/nextjs.mdx
📚 Learning: 2025-11-24T17:49:59.279Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-11-24T17:49:59.279Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Implement mock behaviors in `beforeEach` blocks in Vitest tests
Applied to files:
docs/get-started/frameworks/sveltekit.mdxdocs/get-started/frameworks/nextjs-vite.mdxdocs/get-started/frameworks/nextjs.mdx
📚 Learning: 2025-11-24T17:49:59.279Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-11-24T17:49:59.279Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Mock implementations should match the expected return type of the original function
Applied to files:
docs/get-started/frameworks/sveltekit.mdxdocs/get-started/frameworks/nextjs-vite.mdxdocs/get-started/frameworks/nextjs.mdx
📚 Learning: 2025-11-24T17:49:59.279Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-11-24T17:49:59.279Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Avoid mocking only a subset of required dependencies in Vitest tests
Applied to files:
docs/get-started/frameworks/sveltekit.mdxdocs/get-started/frameworks/nextjs-vite.mdxdocs/get-started/frameworks/nextjs.mdx
📚 Learning: 2025-11-24T17:49:59.279Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-11-24T17:49:59.279Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Mock at the highest level of abstraction needed in Vitest tests
Applied to files:
docs/get-started/frameworks/sveltekit.mdxdocs/get-started/frameworks/nextjs-vite.mdx
📚 Learning: 2025-10-02T09:22:13.215Z
Learnt from: JReinhold
Repo: storybookjs/storybook PR: 32607
File: code/package.json:243-243
Timestamp: 2025-10-02T09:22:13.215Z
Learning: The Storybook repository uses Yarn v^4 (any 4.x version) as the package manager, configured via .yarnrc.yml and package.json packageManager field. Specific patch versions within v4 can be upgraded as needed.
Applied to files:
docs/get-started/frameworks/react-webpack5.mdx
📚 Learning: 2025-09-29T13:20:23.346Z
Learnt from: mrginglymus
Repo: storybookjs/storybook PR: 32556
File: code/core/package.json:309-313
Timestamp: 2025-09-29T13:20:23.346Z
Learning: The `fast-printf` dependency in Storybook's core package is bundled into the final distribution during the build process, so it should remain in devDependencies rather than being moved to dependencies, following the same pattern as other bundled dependencies like `open`.
Applied to files:
docs/get-started/frameworks/nextjs-vite.mdxdocs/get-started/frameworks/nextjs.mdx
📚 Learning: 2025-11-28T14:50:24.872Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-28T14:50:24.872Z
Learning: Applies to **/*.{js,jsx,json,html,ts,tsx,mjs} : Use ESLint and Prettier configurations that are enforced in the codebase
Applied to files:
docs/get-started/frameworks/nextjs-vite.mdxdocs/get-started/frameworks/vue3-vite.mdxdocs/get-started/frameworks/nextjs.mdx
📚 Learning: 2025-11-24T17:49:59.279Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-11-24T17:49:59.279Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Group related mocks together in Vitest tests
Applied to files:
docs/get-started/frameworks/nextjs-vite.mdxdocs/get-started/frameworks/nextjs.mdx
📚 Learning: 2025-11-24T17:49:31.838Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursorrules:0-0
Timestamp: 2025-11-24T17:49:31.838Z
Learning: Applies to **/*.{test,spec}.{ts,tsx} : Follow the spy mocking rules defined in `.cursor/rules/spy-mocking.mdc` for consistent mocking patterns with Vitest
Applied to files:
docs/get-started/frameworks/nextjs-vite.mdxdocs/get-started/frameworks/nextjs.mdx
📚 Learning: 2025-11-24T17:49:31.838Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursorrules:0-0
Timestamp: 2025-11-24T17:49:31.838Z
Learning: Applies to code/vitest.workspace.ts : Vitest configuration is centralized in `code/vitest.workspace.ts` for workspace setup
Applied to files:
docs/get-started/frameworks/nextjs-vite.mdxdocs/get-started/frameworks/vue3-vite.mdx
📚 Learning: 2025-11-28T14:50:24.872Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-28T14:50:24.872Z
Learning: Applies to **/*.{ts,tsx} : Enable TypeScript strict mode
Applied to files:
docs/get-started/frameworks/nextjs-vite.mdxdocs/get-started/frameworks/vue3-vite.mdxdocs/get-started/frameworks/nextjs.mdx
📚 Learning: 2025-11-28T14:50:24.872Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-28T14:50:24.872Z
Learning: Applies to code/**/*.{ts,tsx,js,jsx,mjs} : Use server-side logger from 'storybook/internal/node-logger' for Node.js code
Applied to files:
docs/get-started/frameworks/nextjs-vite.mdxdocs/get-started/frameworks/nextjs.mdx
📚 Learning: 2025-11-24T17:49:59.279Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-11-24T17:49:59.279Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Keep mock implementations simple and focused in Vitest tests
Applied to files:
docs/get-started/frameworks/nextjs-vite.mdx
📚 Learning: 2025-11-28T14:50:24.872Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-28T14:50:24.872Z
Learning: Applies to code/**/*.{ts,tsx,js,jsx,mjs} : Use client-side logger from 'storybook/internal/client-logger' for browser code
Applied to files:
docs/get-started/frameworks/nextjs-vite.mdxdocs/get-started/frameworks/nextjs.mdx
📚 Learning: 2025-09-18T20:51:06.618Z
Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32458
File: code/core/src/viewport/components/Tool.tsx:38-39
Timestamp: 2025-09-18T20:51:06.618Z
Learning: In viewport tool code, when using the `useGlobals` hook from storybook/manager-api, the third returned value `storyGlobals` is guaranteed by TypeScript to be defined (not undefined/null), making the `in` operator safe to use without additional null checks.
Applied to files:
docs/get-started/frameworks/nextjs.mdx
📚 Learning: 2025-11-24T17:49:31.838Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursorrules:0-0
Timestamp: 2025-11-24T17:49:31.838Z
Learning: Applies to **/*.{test,spec}.{ts,tsx} : Test files should follow the naming pattern `*.test.ts`, `*.test.tsx`, `*.spec.ts`, or `*.spec.tsx`
Applied to files:
docs/get-started/frameworks/nextjs.mdx
🪛 LanguageTool
docs/get-started/frameworks/react-native-web-vite.mdx
[grammar] ~111-~111: Ensure spelling is correct
Context: ...-native-web-vite`). If you're using the addon, you should migrate to the framework, w...
(QB_NEW_EN_ORTHOGRAPHY_ERROR_IDS_1)
docs/get-started/frameworks/nextjs-vite.mdx
[style] ~608-~608: Try moving the adverb to make the sentence clearer.
Context: ... recommended to do your research on how to properly make your modification to Storybook's Vite config and on how [...
(SPLIT_INFINITIVE)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Core Unit Tests, windows-latest
🔇 Additional comments (34)
docs/get-started/frameworks/sveltekit.mdx (4)
11-42: Well-structured Install and Run Storybook sections.The new Install section (lines 11-17), Requirements subsection (lines 19-29), and Run Storybook section (lines 32-42) follow the standardized pattern outlined in the PR objectives. The progressive disclosure of version constraints and concise setup instructions improve user onboarding.
70-70: Heading restructuring improves semantic clarity.Renaming "### Mocking" to "### How to mock" and promoting "Mocking links" from a top-level heading to a sub-heading (
####) under it creates a clearer, hierarchical organization. This aligns with the broader documentation restructuring across frameworks.Also applies to: 82-82
212-237: FAQ section appropriately captures manual setup guidance.The new FAQ section addresses a common workflow (manual installation with framework configuration) and provides clear deprecation notices for removed packages. This follows the established pattern across other framework guides in the PR.
1-384: Overall restructuring is solid and well-aligned with PR pattern.The file successfully adopts the standardized Get Started framework structure (Install → Requirements → Run → Configure → FAQ) while preserving comprehensive API documentation and migration guidance. The supported features matrix is thorough, and all cross-references and internal links are correctly formed. Following the existing Storybook codebase conventions will ensure consistency across the documentation suite.
To ensure completeness, please verify:
- All referenced CodeSnippets files exist and contain appropriate content (e.g.,
create-command.md,sveltekit-mock-features.md, etc.)- External documentation links (e.g., SvelteKit docs) remain valid
- Package deprecation information in the FAQ (lines 232–236) reflects the current state of
@storybook/svelte-vite,storybook-builder-vite, and@storybook/builder-vitedocs/get-started/frameworks/svelte-vite.mdx (3)
1-9: Approve frontmatter and introductory content.The frontmatter and description remain appropriate and clearly communicate the purpose of Storybook for Svelte & Vite. The restructuring preserves the essential context for users entering this documentation.
163-181: FAQ section is consistent with framework documentation restructuring.The manual installation FAQ pattern in this file aligns with the documented framework guidelines. This approach is used consistently across Svelte, Vue, Web Components, Preact, Next.js, SvelteKit, and Angular documentation, providing a standardized secondary pathway for advanced users.
18-18: Fix broken internal documentation links.The file contains internal cross-references to Storybook documentation, but three of them are broken:
/docs/get-started/whats-a-story/— not found/docs/install/— not found/docs/svelte/v5-migration-guide— not foundThe links to
/docs/writing-docs/and/docs/writing-tests/are valid. Update the broken links to match the current documentation structure.⛔ Skipped due to learnings
Learnt from: CR Repo: storybookjs/storybook PR: 0 File: .github/copilot-instructions.md:0-0 Timestamp: 2025-11-28T14:50:24.872Z Learning: Applies to docs/**/migration*.md : Update migration guides for breaking changesLearnt from: Sidnioulz Repo: storybookjs/storybook PR: 32594 File: code/core/src/components/components/Popover/WithPopover.tsx:7-9 Timestamp: 2025-10-01T15:24:01.060Z Learning: In the Storybook repository, "react-aria-components/patched-dist/*" (e.g., "react-aria-components/patched-dist/Dialog", "react-aria-components/patched-dist/Popover", "react-aria-components/patched-dist/Tooltip") are valid import paths created by a patch applied to the react-aria-components package. These imports should not be flagged as broken or invalid until a maintainer explicitly states they are no longer acceptable.docs/get-started/frameworks/web-components-vite.mdx (4)
12-18: Install section is clear and actionable.The new Install section simplifies onboarding by directing users to the main installation command and then pointing them to key next steps. This aligns well with the PR's goal of standardizing the Get Started experience across frameworks.
29-39: Run Storybook section is well-structured.Clear separation of run and build commands with appropriate context (outputDir reference). The CodeSnippets structure is consistent with the standardized pattern introduced in this PR.
42-59: FAQ section appropriately addresses manual installation gap.The FAQ directly answers the "how do I manually install?" question with framework and config file snippets. Prettier-ignore directives are properly applied. This complements the automated Install flow well.
12-77: Remove the unsupportedvariant="new-users"attribute from the CodeSnippets component.The
create-commandsnippet usespackageManagerattributes (npm, pnpm, yarn) for content selection, not avariantattribute. Thevariant="new-users"on line 16 should be removed as it's not recognized by the CodeSnippets component. All referenced snippet file paths are correct and exist.Likely an incorrect or invalid review comment.
docs/get-started/frameworks/nextjs-vite.mdx (8)
9-17: Strong introductory flow with clear install pathway.The intro effectively positions Vite benefits upfront, and the Install section provides a direct path forward with references to getting started. The structure aligns well with the broader documentation restructuring mentioned in the PR.
32-44: Clear framework comparison with sound positioning.The section effectively communicates why nextjs-vite is recommended while respecting user choice for Webpack. The guidance on automatic detection and selection criteria is practical and helpful.
47-57: Clean, action-oriented Run Storybook section.The separation of dev and build commands with clear output expectations makes this section easy to follow and execute.
251-273: Router mocking examples look correct, but verify against current framework API.The examples showing
getRouter()usage and Vitest mock patterns (lines 251-273 and 385-407) follow modern Storybook patterns. However, since these are API examples that tie to actual framework implementations, recommend verifying they work end-to-end before merging, especially for the@storybook/nextjs-vite/router.mockand@storybook/nextjs-vite/navigation.mockimports.Also applies to: 385-407
625-653: Well-structured experimental RSC section with clear limitations and workarounds.The RSC section appropriately flags experimental status, provides clear setup steps, and thoroughly documents limitations. The guidance on mocking strategies and forward-looking notes are helpful for users.
716-790: Practical and helpful FAQ entries addressing common Next.js patterns.The data fetching, image imports, and Sharp setup sections provide clear solutions with good before/after examples. These address realistic developer pain points effectively.
792-801: Balanced framework choice guidance.The recommendation for Vite is appropriately nuanced ("for most projects") and acknowledges valid Webpack use cases. This helps users make informed decisions without dismissing the alternative.
658-712: The migration guide content is accurate. The automigrate commandnextjs-to-nextjs-viteis properly implemented incode/lib/cli-storybook/src/automigrate/fixes/nextjs-to-nextjs-vite.ts, and all three referenced CodeSnippets files exist:nextjs-vite-install.md,nextjs-vite-add-framework.md, andnextjs-remove-addons.md. No changes needed.docs/get-started/frameworks/react-native-web-vite.mdx (5)
107-141: FAQ migration section is clear and well-structured.The migration path from the
@storybook/addon-react-native-webaddon to the framework is clearly documented with step-by-step instructions, upgrade command, installation, and configuration updates. This provides good guidance for existing users transitioning to the framework.
144-239: API configuration examples are comprehensive and helpful.The API section provides three well-documented configuration examples (reanimated, nativewind, and node_modules transpilation) with complete code blocks that demonstrate common use cases. This aligns with the framework's flexibility requirements.
19-25: Install section follows the standardized pattern effectively.The simplified install section uses the CodeSnippets component to display the creation command and points users to relevant next steps (writing stories, testing, documenting). This streamlined approach matches the PR's goal of standardizing framework documentation.
90-104: Documentation is accurate—no changes needed.The "Both" installation option and its described behavior are correctly implemented in the codebase. The
ProjectType.REACT_NATIVE_AND_RNWgenerator exists in the install wizard and properly configures both React Native (callsreactNativeGeneratorModule.configure) and React Native Web (callsreactNativeWebGeneratorModule.configure) during installation, exactly as documented. The documentation aligns with the actual implementation.
30-42: TheGetStartedVersionscomponent successfully supports version range strings across all framework documentation. The format is consistent and functional across 12+ framework files with various range specifications (≥, ||, and complex ranges), confirming proper implementation.docs/get-started/frameworks/index.mdx (1)
8-17: Structure and organization look good.The new section headers and separation of "Supported frameworks" from "Community-maintained frameworks" improve clarity and information hierarchy.
docs/get-started/frameworks/react-vite.mdx (1)
47-57: FAQ section appropriately guides migration from React Webpack.The migration guidance is clear: first try the automated upgrade command, and if that doesn't work, follow manual installation. This reduces friction for existing users.
docs/get-started/frameworks/react-webpack5.mdx (1)
11-16: Callout effectively sets expectations and guides toward modern path.The info callout clearly recommends React-Vite while explaining when Webpack is still appropriate. This balances user guidance with support for legacy setups.
docs/get-started/frameworks/preact-vite.mdx (1)
15-16: The referenced snippet files exist in the correct directory.All CodeSnippets paths referenced in the file (
create-command.md,storybook-run-dev.md,build-storybook-production-mode.md,preact-vite-install.md,preact-vite-add-framework.md, andpreact-vite-framework-options.md) are present indocs/_snippets/and contain appropriate content.Likely an incorrect or invalid review comment.
docs/index.mdx (1)
10-12: Thevariant="new-users"parameter is already in use across 12 documentation files (including the main index.mdx and all framework-specific pages in get-started/frameworks/), demonstrating that the CodeSnippets component supports this variant. The create-command.md snippet file has appropriate content structure. No verification action is required.docs/get-started/frameworks/vue3-vite.mdx (5)
57-73: Clear and accurate configuration guidance.The "Extending the Vue application" subsection provides a practical code example demonstrating the
setupfunction with common Vue 3 extension patterns (plugins, components, mixins). The example is syntactically correct and well-documented.
284-327: API documentation is clear and complete.The API section properly documents framework options with type information, defaults, version markers, and practical examples. The guidance on when to disable docgen provides helpful context for developers considering performance trade-offs.
75-248: All referenced image assets exist in the expected locations.The four images referenced in the vue-component-meta section (
vue-component-meta-prop-types-controls.png,vue-component-meta-event-types-controls.png,vue-component-meta-slot-types-controls.png, andvue-component-meta-exposed-types-controls.png) are present indocs/_assets/get-started/.
31-41: Both referenced CodeSnippets files exist and contain appropriate commands. Thestorybook-run-dev.mdandbuild-storybook-production-mode.mdfiles userenderer="common"blocks that work correctly for Vue3-Vite projects, providing standard npm/pnpm/yarn commands. The outputDir default mentioned is accurate.
1-330: No verification issues found. The CodeSnippets paths are consistent with other framework guides (framework-agnostic ones likecreate-command.mdandstorybook-run-dev.mdare used across 10+ frameworks, while framework-specific ones are appropriately scoped). The document structure (Install → Run Storybook → Configure → FAQ → API) matches other frameworks like Angular. All referenced CodeSnippets files exist indocs/_snippets/.
| <GetStartedVersions versions={[{ | ||
| name: 'Angular', | ||
| range: '≥ 18.0 < 21.0', | ||
| icon: '/images/logos/renderers/logo-angular.svg' | ||
| }, { | ||
| name: 'Webpack', | ||
| range: '5', | ||
| icon: '/images/logos/builders/webpack.svg' | ||
| }]} /> |
There was a problem hiding this comment.
🧩 Analysis chain
🌐 Web query:
current latest version of Angular 2024 2025
💡 Result:
As of December 1, 2025 the latest stable major release is Angular 21 (release 21.0.0 on November 19, 2025). [1][2]
Sources:
[1] Angular official releases page.
[2] endoflife.date — Angular version history.
🌐 Web query:
Storybook Angular framework support versions compatibility matrix
💡 Result:
Here’s a concise compatibility matrix (major Storybook release → supported/minimum Angular version), with sources:
- Storybook 6.x — Angular up to v13 (Storybook 6.4 added Angular 13 support). [1]
- Storybook 7.x — Introduced new framework model; broadly used with Angular 13–14+ (migration notes & community reports show Angular 14 support arrived around early 7.x). [2][3]
- Storybook 8.x — Requires Angular 15 or newer (listed as a hard requirement in the Storybook 8 migration notes). [4]
- Storybook (current docs / latest CLI installs) — Storybook’s Angular framework currently requires Angular ≥18 and <21 (and Webpack ≥5). Use npm create storybook@latest to get the supported config. [5][6]
Sources
- Storybook 6.4 release notes (Angular 13 support). [Storybook blog / release]. [1]
- Storybook 7 migration / release notes (framework changes; community notes re: Angular 14 support). [2][3]
- Storybook 8 migration guide (Angular 15+ requirement). [4]
- Storybook “Storybook for Angular” docs — current framework requirements: Angular ≥18 <21; Webpack ≥5. [5][6]
If you’d like, I can produce a version-by-version table (including known patch/minor boundaries and exact Storybook package names, e.g. @storybook/angular for each Storybook major) and link the exact docs/releases for each entry.
Update Angular version range to include Angular 21 and allow future versions.
The specified range (≥ 18.0 < 21.0) excludes Angular 21, which was released on November 19, 2025 and is the current latest stable version. Update the constraint to ≥ 18.0 (or a higher upper bound if needed) to reflect current support.
🤖 Prompt for AI Agents
In docs/get-started/frameworks/angular.mdx around lines 21-29, the Angular
version range currently reads "≥ 18.0 < 21.0" which excludes Angular 21; update
the versions prop to use an open-ended lower-bound (e.g. "≥ 18.0") or a higher
upper bound so it includes Angular 21 and future minor major releases — replace
the Angular object's range value with "≥ 18.0" (or another agreed open-ended
constraint) and keep the rest of the object unchanged.
| - "storybook": "start-storybook -p 6006", // or `storybook dev -p 6006` | ||
| - "build-storybook": "build-storybook" // or `storybook build` | ||
| + "storybook": "ng run <project-name:storybook", | ||
| + "storybook": "ng run <project-name:storybook", | ||
| } | ||
| } | ||
| ``` | ||
|
|
||
| Change it to: | ||
| Note that `compodoc` is now built into `@storybook/angular`; you don't have to call it explicitly. If you were running `compodoc` in your `package.json` scripts, you can remove the related script: | ||
|
|
||
| ```json title="package.json" | ||
| ```diff title="package.json" | ||
| { | ||
| "scripts": { | ||
| "storybook": "ng run <project-name>:storybook", | ||
| "build-storybook": "ng run <project-name>:build-storybook" | ||
| - "docs:json": "compodoc -p tsconfig.json -e json -d ./documentation", | ||
| - "storybook": "npm run docs:json && start-storybook -p 6006", | ||
| - "build-storybook": "npm run docs:json && build-storybook" | ||
| + "storybook": "ng run <project-name:storybook", | ||
| + "storybook": "ng run <project-name:storybook", | ||
| } |
There was a problem hiding this comment.
Fix duplicate storybook script entries in migration guidance.
Lines 278 and 280 both define a "storybook" key with the same value, which will cause the second to overwrite the first. The second key should be "build-storybook" to align with the migration pattern shown.
Apply this diff to fix the duplicate keys:
"scripts": {
- "storybook": "start-storybook -p 6006", // or `storybook dev -p 6006`
- "build-storybook": "build-storybook" // or `storybook build`
+ "storybook": "ng run <project-name>:storybook",
+ "build-storybook": "ng run <project-name>:build-storybook",
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| - "storybook": "start-storybook -p 6006", // or `storybook dev -p 6006` | |
| - "build-storybook": "build-storybook" // or `storybook build` | |
| + "storybook": "ng run <project-name:storybook", | |
| + "storybook": "ng run <project-name:storybook", | |
| } | |
| } | |
| ``` | |
| Change it to: | |
| Note that `compodoc` is now built into `@storybook/angular`; you don't have to call it explicitly. If you were running `compodoc` in your `package.json` scripts, you can remove the related script: | |
| ```json title="package.json" | |
| ```diff title="package.json" | |
| { | |
| "scripts": { | |
| "storybook": "ng run <project-name>:storybook", | |
| "build-storybook": "ng run <project-name>:build-storybook" | |
| - "docs:json": "compodoc -p tsconfig.json -e json -d ./documentation", | |
| - "storybook": "npm run docs:json && start-storybook -p 6006", | |
| - "build-storybook": "npm run docs:json && build-storybook" | |
| + "storybook": "ng run <project-name:storybook", | |
| + "storybook": "ng run <project-name:storybook", | |
| } | |
| "scripts": { | |
| "storybook": "ng run <project-name>:storybook", | |
| "build-storybook": "ng run <project-name>:build-storybook", | |
| } | |
| } |
🤖 Prompt for AI Agents
In docs/get-started/frameworks/angular.mdx around lines 278 to 296, there are
duplicate "storybook" script keys in the example JSON; change the second
occurrence to "build-storybook" so the scripts object contains distinct
"storybook" and "build-storybook" entries (also correct any typos in the command
string if present, e.g., ensure the ng run invocation uses the proper project
selector syntax).
| ### Requirements | ||
|
|
||
| Follow the prompts after running this command in your Preact project's root directory: | ||
| <GetStartedVersions versions={[{ | ||
| name: 'Preact', | ||
| range: '8.x || 10.x', | ||
| icon: '/images/logos/renderers/logo-preact.svg' | ||
| }, { | ||
| name: 'Vite', | ||
| range: '≥ 5', | ||
| icon: '/images/logos/builders/vite.svg' | ||
| }]} /> |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Search for GetStartedVersions component definition and exports
echo "=== Searching for GetStartedVersions component ==="
fd -e tsx -e ts -e jsx -e js | xargs rg -l "GetStartedVersions" 2>/dev/null | head -10
echo -e "\n=== GetStartedVersions definition and export ==="
rg -B 2 -A 20 "export.*GetStartedVersions|const GetStartedVersions|function GetStartedVersions" --type=tsx --type=ts --type=jsx --type=js 2>/dev/null | head -60
echo -e "\n=== Checking MDX imports and component usage ==="
rg -B 5 "GetStartedVersions" docs/get-started/frameworks/preact-vite.mdx 2>/dev/nullRepository: storybookjs/storybook
Length of output: 539
GetStartedVersions component is not defined in the codebase.
The component is being used in the MDX file (lines 19-29) but no definition, export, or implementation exists anywhere in the repository. This will cause a runtime error when rendering the documentation. Either create the component or remove its usage if it's not yet implemented.
🤖 Prompt for AI Agents
In docs/get-started/frameworks/preact-vite.mdx around lines 19 to 29, the
GetStartedVersions component used in the MDX is not defined in the repo and will
cause a runtime render error; either add an implementation (e.g., create a
GetStartedVersions React/Preact-compatible component under docs/components or a
shared docs UI folder, export it, accept a "versions" prop array with
name/range/icon and render the list with proper alt text and accessible markup,
and ensure the icon paths are correct) or remove/replace the usage in this MDX
file; if you implement the component, add an import at the top of the MDX
(import GetStartedVersions from '...') and include PropTypes/TypeScript types or
JSDoc for the versions prop so future callers know the expected shape.
| ### Requirements | ||
|
|
||
| [More on getting started with Storybook.](../install.mdx) | ||
| <GetStartedVersions versions={[{ | ||
| name: 'Svelte', | ||
| range: '≥ 5', | ||
| icon: '/images/logos/renderers/logo-svelte.svg' | ||
| }, { | ||
| name: 'Vite', | ||
| range: '≥ 5', | ||
| icon: '/images/logos/builders/vite.svg' | ||
| }]} /> |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Find Svelte framework addon package.json
find . -path "*/frameworks/svelte*" -name "package.json" -type fRepository: storybookjs/storybook
Length of output: 148
🏁 Script executed:
#!/bin/bash
# Search for peerDependencies in Svelte-related files
rg -l "svelte" --type json | xargs rg -l "peerDependencies" | head -5Repository: storybookjs/storybook
Length of output: 242
🏁 Script executed:
#!/bin/bash
# Look for framework integration files
find . -path "*frameworks*svelte*" -type f | head -20Repository: storybookjs/storybook
Length of output: 1166
🏁 Script executed:
cat code/frameworks/svelte-vite/package.jsonRepository: storybookjs/storybook
Length of output: 2162
Update Vite version requirement to reflect support for Vite 5, 6, and 7.
The peerDependencies in code/frameworks/svelte-vite/package.json specify vite: "^5.0.0 || ^6.0.0 || ^7.0.0", meaning Vite 5, 6, and 7 are all supported. The documentation currently shows only "Vite ≥ 5" which is incomplete and misleading. The range field should be updated to reflect all supported versions (e.g., "5–7" or "≥ 5").
Svelte ≥ 5 is correct (svelte: "^5.0.0").
🤖 Prompt for AI Agents
In docs/get-started/frameworks/svelte-vite.mdx around lines 20 to 30, the Vite
requirement currently shows "≥ 5" which is incomplete; update the Vite object's
range field to reflect supported versions 5, 6 and 7 (e.g., change range to
"5–7" or ">= 5" to match the peerDependencies in
code/frameworks/svelte-vite/package.json).
| ### Requirements | ||
|
|
||
| Follow the prompts after running this command in your Vue project's root directory: | ||
| <GetStartedVersions versions={[{ | ||
| name: 'Vue', | ||
| range: '≥ 3', | ||
| icon: '/images/logos/renderers/logo-vue.svg' | ||
| }, { | ||
| name: 'Vite', | ||
| range: '≥ 5', | ||
| icon: '/images/logos/builders/vite.svg' | ||
| }]} /> |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
# Check for image assets - try common locations
find . -name "logo-vue.svg" 2>/dev/null | head -20
find . -name "vite.svg" 2>/dev/null | head -20
# List the images/logos directory structure if it exists
find . -type d -name "logos" 2>/dev/null
# Check for any Vite version references in the Vue3 related docs
rg -n "Vite.*[0-9]|vite.*version" docs/get-started/frameworks/ -C 1Repository: storybookjs/storybook
Length of output: 785
🏁 Script executed:
# Check if the specific file exists
cat docs/get-started/frameworks/vue3-vite.mdx 2>/dev/null | head -40
# Search for any image references in the docs directory
find docs -name "*.svg" 2>/dev/null | head -20
# Check the images directory structure
find . -type d -path "*/images/logos*" 2>/dev/null
# Look for logo references in all doc files
rg -n "logo-vue|logo-vue\.svg" docs/ -C 1Repository: storybookjs/storybook
Length of output: 1480
🏁 Script executed:
# Check public directory for images
find ./public -name "*.svg" 2>/dev/null | grep -E "(vite|vue)" | head -20
# List the complete logos directory if it exists
find ./public -type d -name "logos" 2>/dev/null -exec ls -la {} \;
# Check if images directory exists in public
ls -la ./public/images/logos/ 2>/dev/null || echo "Directory not found at ./public/images/logos/"
# Search for Vite version requirements in framework configs or docs
rg -n "Vite.*5" docs/ -C 1 | head -30
# Check package.json for Vite version info
cat package.json | grep -A 5 -B 5 "vite" | head -30Repository: storybookjs/storybook
Length of output: 5863
🏁 Script executed:
# Search for where GetStartedVersions component is defined
rg -n "GetStartedVersions" --type tsx --type ts --type jsx --type js | head -10
# Check if there's a build process for static assets
find . -name "*.config.*" -type f | grep -E "(vite|webpack|build)" | head -10
# Look for image handling in build configs
rg -n "images.*logos|logo.*vue|logo.*vite" --type js --type json | head -20
# Check for CDN or external asset references
rg -n "cdn|cloudinary|imgix|images\.storybook" docs/ | head -10
# Search for other uses of GetStartedVersions to see the pattern
rg -n "GetStartedVersions" docs/ -C 2 | head -40Repository: storybookjs/storybook
Length of output: 4386
🏁 Script executed:
# Search for GetStartedVersions component definition
find . -type f \( -name "*.tsx" -o -name "*.ts" -o -name "*.jsx" -o -name "*.js" \) -exec grep -l "GetStartedVersions" {} \; 2>/dev/null | head -10
# Search in the docs source code
rg "GetStartedVersions" --type-list | head -5
rg "export.*GetStartedVersions|function GetStartedVersions|const GetStartedVersions" . 2>/dev/null | head -10
# Check if there's a components directory in docs
find docs -type d -name "components" 2>/dev/null
# Look for any MDX component definitions
rg "export.*GetStartedVersions" . 2>/dev/nullRepository: storybookjs/storybook
Length of output: 454
🏁 Script executed:
# Search for GetStartedVersions component definition more carefully
rg "GetStartedVersions" . 2>/dev/null | head -20
# Check if there's a docs config or components
find . -path "./docs" -prune -o -type f \( -name "*.mdx" -o -name "*.md" \) -print | xargs grep -l "GetStartedVersions" 2>/dev/null | head -10
# Look for where the component might be defined - check for import statements
rg "import.*GetStartedVersions" docs/ 2>/dev/null
# Search the entire repo for the component definition
grep -r "GetStartedVersions.*=" . --include="*.ts" --include="*.tsx" --include="*.js" --include="*.jsx" 2>/dev/null | head -10
# Check if images directory exists anywhere
find . -type d -name "images" 2>/dev/null | grep -v node_modules | head -20Repository: storybookjs/storybook
Length of output: 1017
🏁 Script executed:
# Check for documentation framework config (likely Astro or similar)
find . -maxdepth 2 -type f \( -name "astro.config.*" -o -name "next.config.*" -o -name "docusaurus.config.*" \) 2>/dev/null
# Look for the actual public directory at repo root
ls -la ./public/ 2>/dev/null | head -20
# Check if images exist anywhere in the repo
find . -type f -name "logo-vue.svg" -o -name "logo-vite.svg" 2>/dev/null | grep -v node_modules
# Check the framework nextjs images that were found
ls -la ./code/frameworks/nextjs-vite/src/images/ 2>/dev/null
# Look for any MDX config that might define global components
find . -maxdepth 3 -name ".mdx*" -o -name "mdx.config.*" 2>/dev/nullRepository: storybookjs/storybook
Length of output: 238
🏁 Script executed:
# Check git history for this specific file to see if images were recently removed
git log --oneline -- docs/get-started/frameworks/vue3-vite.mdx 2>/dev/null | head -10
# Check recent changes to the Requirements section
git show HEAD:docs/get-started/frameworks/vue3-vite.mdx 2>/dev/null | grep -A 10 "Requirements" | head -15
# Search for any TODO or FIXME comments related to images
rg "TODO|FIXME" docs/get-started/frameworks/ | grep -i "image\|logo\|icon"
# Check if there are any working image references in the docs
rg "/images/" docs/ | head -20Repository: storybookjs/storybook
Length of output: 3001
Remove or provide image assets for the GetStartedVersions component.
The Requirements section references icon assets at /images/logos/renderers/logo-vue.svg and /images/logos/builders/vite.svg, but these assets do not exist in the repository. A TODO comment in react-native-web-vite.mdx indicates this is a known issue across multiple framework documentation files. Either create and serve these image assets or remove the icon properties from the component.
The Vite ≥ 5 requirement is correct.
🤖 Prompt for AI Agents
In docs/get-started/frameworks/vue3-vite.mdx around lines 19 to 29, the
GetStartedVersions component references non-existent image assets
(/images/logos/renderers/logo-vue.svg and /images/logos/builders/vite.svg);
either add the missing SVG files at those exact paths (ensuring correct
filenames and that they are included in the static assets build) or remove the
icon properties from the versions array in this file so the component renders
without broken image links; choose one approach and apply it consistently across
other framework docs that reference the same assets.
| ### Requirements | ||
|
|
||
| <CodeSnippets path="create-command.md" /> | ||
| <GetStartedVersions versions={[{ | ||
| name: 'Vite', | ||
| range: '≥ 5', | ||
| icon: '/images/logos/builders/vite.svg' | ||
| }]} /> |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Check framework docs structure and what versions are specified in GetStartedVersions
fd "\.mdx$" docs/get-started/frameworks/ -type f | sortRepository: storybookjs/storybook
Length of output: 235
🏁 Script executed:
#!/bin/bash
# List all framework documentation files
fd "\.mdx$" docs/get-started/frameworks/Repository: storybookjs/storybook
Length of output: 593
🏁 Script executed:
#!/bin/bash
# Extract GetStartedVersions sections from all framework docs
for file in docs/get-started/frameworks/*.mdx; do
echo "=== $(basename "$file") ==="
rg -A 20 "GetStartedVersions" "$file" | head -25
echo ""
doneRepository: storybookjs/storybook
Length of output: 5855
Add Web Components version requirement.
The Requirements section only lists Vite ≥ 5, but all other framework docs consistently list both the framework version and the build tool version. Web Components should include a version constraint (e.g., Web Components or a minimum version supported), following the pattern used in react-vite, vue3-vite, svelte-vite, and other framework guides.
🤖 Prompt for AI Agents
In docs/get-started/frameworks/web-components-vite.mdx around lines 20 to 26,
the Requirements block only lists Vite ≥ 5; add a sibling entry for the
framework itself by adding a versions array object for Web Components with a
clear version constraint (e.g., name: "Web Components", range: "v1+" or the
actual minimum supported), and include the appropriate icon path similar to the
existing Vite entry so the Requirements section matches the pattern used by
other framework guides.
See #33069
Summary by CodeRabbit
Release Notes
✏️ Tip: You can customize this high-level summary in your review settings.