Docs: Fix UI library examples

[jonniebigodes]

Closes #

What I did

With this pull request, the examples on the Decorators and Setup page were updated to include other frameworks and prevent them from rendering duplicate React examples.

This can be observed currently by navigating to the appropriate documentation and selecting other frameworks (e.g., Svelte)

What was done:

• Fixed the setup page to include a reference to a headless UI library (i.e., Bits UI)
• Update the examples in the setup and Decorators page for the other core frameworks

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

• stories
• unit tests
• integration tests
• end-to-end tests

Manual testing

This is a documentation-only change and doesn't require testing

Caution

This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!

Documentation

• Add or update documentation reflecting your changes
• If you are deprecating/removing a feature, make sure to update
  MIGRATION.MD

Checklist for Maintainers

• When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli-storybook/src/sandbox-templates.ts

• Make sure this PR contains one of the labels below:

  Available labels

  • bug: Internal changes that fixes incorrect behavior.
  • maintenance: User-facing maintenance tasks.
  • dependencies: Upgrading (sometimes downgrading) dependencies.
  • build: Internal-facing build tooling & test updates. Will not show up in release changelog.
  • cleanup: Minor cleanup style change. Will not show up in release changelog.
  • documentation: Documentation only changes. Will not show up in release changelog.
  • feature request: Introducing a new feature.
  • BREAKING CHANGE: Changes that break compatibility in some way with current major version.
  • other: Changes that don't fit in the above categories.

🦋 Canary release

This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the @storybookjs/core team here.

core team members can create a canary release here or locally with gh workflow run --repo storybookjs/storybook publish.yml --field pr=<PR_NUMBER>

Summary by CodeRabbit

• Documentation
  • Expanded decorator examples across multiple frameworks (Vue, Svelte, Web Components, React, Angular, Solid).
  • Added theming decorator patterns demonstrating context provider usage.
  • Updated component integration examples with additional library options (Vuetify for Vue, Bits UI for Svelte).

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

📝 Walkthrough

Walkthrough

Documentation expansion across three files adds multi-framework code examples demonstrating Storybook decorators and context providers. Changes include new Svelte, Web Components, and framework-specific decorator snippets; updates to existing code comments; and replacement of Vue Fontawesome example with Vuetify plus addition of Svelte Bits UI example.

Changes

Cohort / File(s)	Summary
Decorator parameterized preview examples docs/_snippets/decorator-parameterized-in-preview.md	Added substantial new multi-framework example blocks (Svelte, Web Components, JS, TS variants) demonstrating decorators and PageLayout component; minor comment text adjustments in existing React/CSF examples with no behavioral changes.
Storybook preview decorator examples docs/_snippets/storybook-preview-with-styled-components-decorator.md	Extensive additions of multi-framework Storybook preview decorator examples (Vue, HTML/Template, Svelte, Web Components, React, Solid, Angular) showing theme-provider/StoryWrapper registration and global.theme usage patterns across frameworks.
Setup guide context provider updates docs/get-started/setup.mdx	Replaced Vue Fontawesome example with Vuetify in component-context decoration description; added Svelte Bits UI with BitsConfig in decorator usage example to expand showcased context provider options.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• Docs: Fix Svelte references #32985: Modifies Svelte-related documentation and snippet examples, sharing similar scope in expanding Svelte framework coverage.

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

docs/_snippets/storybook-preview-with-styled-components-decorator.md (1)

243-265: Consider adding duplicate custom element registration check in TypeScript version.

The JavaScript version (lines 311-313) properly checks if the custom element is already defined before registering it, preventing duplicate registration errors. The TypeScript version using the @customElement decorator doesn't include this check. While the decorator may handle this internally, explicitly checking could prevent issues if the module is imported multiple times.

🔎 Suggested addition for defensive registration

If the @customElement decorator doesn't automatically handle duplicate registration, consider:

+if (!customElements.get('theme-provider')) {
  @customElement('theme-provider')
  export class ThemeProvider extends LitElement {
    // ... rest of class
  }
+}

However, if Lit's @customElement decorator already handles duplicate registration gracefully, this check is unnecessary.

📜 Review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 7f193d3 and 590848e.

📒 Files selected for processing (3)

• docs/_snippets/decorator-parameterized-in-preview.md
• docs/_snippets/storybook-preview-with-styled-components-decorator.md
• docs/get-started/setup.mdx

🧰 Additional context used

📓 Path-based instructions (1)

**/*.{js,jsx,ts,tsx,json,md,html,css,scss}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Format code using Prettier with yarn prettier --write <file>

Files:

• docs/_snippets/storybook-preview-with-styled-components-decorator.md
• docs/_snippets/decorator-parameterized-in-preview.md

🧠 Learnings (6)

📓 Common learnings

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: Sidnioulz
Repo: storybookjs/storybook PR: 32458
File: code/core/src/components/components/Tabs/Tabs.stories.tsx:222-227
Timestamp: 2025-11-05T09:36:55.944Z
Learning: Repo: storybookjs/storybook PR: 32458 — In code/core/src/components/components/Button/Button.tsx (React/TypeScript), ButtonProps includes ariaLabel?: string | false and the component maps it to the DOM aria-label. Convention: ariaLabel is mandatory on all Button usages — provide a descriptive string for icon-only buttons; set ariaLabel=false when the button’s children already serve as the accessible name. Do not suggest using a raw aria-label prop on Button call sites.

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.

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.

Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-12-22T22:03:40.123Z
Learning: Applies to {code/addons,code/frameworks}/**/README.md : Update README files for significant changes and include code examples in addon/framework documentation

📚 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/_snippets/storybook-preview-with-styled-components-decorator.md
• docs/get-started/setup.mdx
• docs/_snippets/decorator-parameterized-in-preview.md

📚 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/_snippets/storybook-preview-with-styled-components-decorator.md
• docs/get-started/setup.mdx
• docs/_snippets/decorator-parameterized-in-preview.md

📚 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/_snippets/storybook-preview-with-styled-components-decorator.md
• docs/get-started/setup.mdx
• docs/_snippets/decorator-parameterized-in-preview.md

📚 Learning: 2025-12-22T22:03:40.123Z

Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-12-22T22:03:40.123Z
Learning: Applies to {code/addons,code/frameworks}/**/README.md : Update README files for significant changes and include code examples in addon/framework documentation

Applied to files:

• docs/_snippets/storybook-preview-with-styled-components-decorator.md

📚 Learning: 2025-12-22T22:03:40.123Z

Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-12-22T22:03:40.123Z
Learning: Applies to code/{renderers}/**/*.{ts,tsx,js,jsx} : Use `logger` from `storybook/internal/client-logger` for client-side logging in browser code

Applied to files:

• docs/_snippets/storybook-preview-with-styled-components-decorator.md
• docs/_snippets/decorator-parameterized-in-preview.md

⏰ 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 (6)

docs/_snippets/decorator-parameterized-in-preview.md (3)

13-13: LGTM! Documentation consistency improvements.

The comment updates improve consistency across examples and modernize framework references (e.g., react-vite, nextjs-vite instead of older framework names). These are good documentation maintenance changes.

Also applies to: 40-40, 63-63, 75-75, 107-107, 139-139, 170-170, 194-194

---

285-337: LGTM! Web Components examples follow Lit best practices.

The new Web Components examples correctly use Lit's html template tag and follow the same decorator pattern as other framework examples. Both TypeScript and JavaScript variants are properly structured.

---

209-283: No changes needed. The Svelte examples correctly use Svelte 5+ runes syntax ($props(), {@render}, Snippet type) which aligns with Storybook's explicit requirement of Svelte 5.0.0 or higher for both svelte-vite and sveltekit frameworks. The concern about older Svelte version compatibility is not applicable, as Storybook no longer supports pre-5 versions. The examples are correct and appropriate for the documented framework requirements.

docs/get-started/setup.mdx (1)

69-69: LGTM! Documentation text aligns with new code examples.

The updated text correctly references the new Vuetify (Vue) and Bits UI (Svelte) examples added in the companion snippet files, replacing the previous FontAwesome reference. The links and formatting are proper.

docs/_snippets/storybook-preview-with-styled-components-decorator.md (2)

145-221: The Bits UI BitsConfig implementation is correct. Using BitsConfig with defaultPortalTo is the documented and recommended approach for configuring portal behavior in Storybook. This ensures Portal-based Bits components (dialogs, tooltips, and other overlay components) render properly in Storybook's iframe. The pattern correctly wraps the story context and sets the portal target, confirming the examples follow best practices.

---

30-143: The Vue examples correctly demonstrate Vuetify v3 integration. The plugin registration via setup() and theme switching via v-app :theme="themeName" aligns with Vuetify v3's recommended pattern for per-component theme control. The themeName prop is properly applied through the StoryWrapper component, allowing dynamic theme switching via Storybook globals.