From 590848ef3758f364d637e7a4c41c16e994a819b9 Mon Sep 17 00:00:00 2001
From: jonniebigodes <joaocontadesenvolvimento@gmail.com>
Date: Sun, 4 Jan 2026 19:10:06 +0000
Subject: [PATCH] Docs: Fix UI library examples

---
 .../decorator-parameterized-in-preview.md     | 148 ++++++++-
 ...review-with-styled-components-decorator.md | 286 ++++++++++++++++++
 docs/get-started/setup.mdx                    |   2 +-
 3 files changed, 426 insertions(+), 10 deletions(-)

diff --git a/docs/_snippets/decorator-parameterized-in-preview.md b/docs/_snippets/decorator-parameterized-in-preview.md
index 599da719836b..e904a61d6428 100644
--- a/docs/_snippets/decorator-parameterized-in-preview.md
+++ b/docs/_snippets/decorator-parameterized-in-preview.md
@@ -10,7 +10,7 @@ const preview: Preview = {
       const { pageLayout } = parameters;
       switch (pageLayout) {
         case 'page':
-          // Your page layout is probably a little more complex than this ;)
+          //  Your page layout is probably a little more complex than this
           return `<div class="page-layout">${story}</div>`;
         case 'page-mobile':
           return `<div class="page-mobile-layout">${story}</div>`;
@@ -37,7 +37,7 @@ export default {
       switch (pageLayout) {
         case 'page':
           return (
-            // Your page layout is probably a little more complex than this ;)
+            // Your page layout is probably a little more complex than this
             <div className="page-layout">
               <Story />
             </div>
@@ -60,7 +60,7 @@ export default {
 ```tsx filename=".storybook/preview.tsx" renderer="react" language="ts" tabTitle="CSF 3"
 import React from 'react';
 
-// Replace your-framework with the framework you are using, e.g. react-vite, nextjs, nextjs-vite, etc.
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
 import type { Preview } from '@storybook/your-framework';
 
 const preview: Preview = {
@@ -72,7 +72,7 @@ const preview: Preview = {
       switch (pageLayout) {
         case 'page':
           return (
-            // Your page layout is probably a little more complex than this ;)
+            // Your page layout is probably a little more complex than this
             <div className="page-layout">
               <Story />
             </div>
@@ -104,7 +104,7 @@ export default {
       switch (pageLayout) {
         case 'page':
           return (
-            // Your page layout is probably a little more complex than this ;)
+            // Your page layout is probably a little more complex than this
             <div className="page-layout">
               <Story />
             </div>
@@ -136,7 +136,7 @@ const preview: Preview = {
       switch (pageLayout) {
         case 'page':
           return (
-            // Your page layout is probably a little more complex than this ;)
+            // Your page layout is probably a little more complex than this
             <div className="page-layout">
               <Story />
             </div>
@@ -167,7 +167,7 @@ export default {
       const { pageLayout } = parameters;
       switch (pageLayout) {
         case 'page':
-          // Your page layout is probably a little more complex than this ;)
+          // Your page layout is probably a little more complex than this
           return { template: '<div class="page-layout"><story/></div>' };
         case 'page-mobile':
           return { template: '<div class="page-mobile-layout"><story/></div>' };
@@ -206,6 +206,136 @@ const preview: Preview = {
 export default preview;
 ```
 
+```ts filename=".storybook/preview.ts" renderer="svelte" language="ts" tabTitle="Preview"
+// Replace your-framework with svelte-vite or sveltekit
+import type { Preview } from '@storybook/your-framework';
+
+import PageLayout from './PageLayout.svelte';
+
+const preview: Preview = {
+  decorators: [
+    // 👇 Defining the decorator in the preview file applies it to all stories
+    (story, { parameters }) => {
+      // 👇 Make it configurable by reading from parameters
+      const { pageLayout } = parameters;
+      return {
+        Component: PageLayout,
+        props: {
+          layout: pageLayout || 'default',
+          children: story,
+        },
+      };
+    },
+  ],
+};
+
+export default preview;
+```
+
+```svelte filename=".storybook/PageLayout.svelte" renderer="svelte" language="ts" tabTitle="Layout component"
+<script lang="ts">
+  interface Props {
+    layout?: 'page' | 'page-mobile' | 'default';
+    children?: import('svelte').Snippet;
+  }
+
+  let { layout = 'default', children }: Props = $props();
+</script>
+
+<!-- Your page layout is probably a little more complex than this -->
+<div class={layout}>
+  {@render children?.()}
+</div>
+```
+
+```js filename=".storybook/preview.js" renderer="svelte" language="js" tabTitle="Preview"
+import PageLayout from './PageLayout.svelte';
+
+const preview = {
+  decorators: [
+    // 👇 Defining the decorator in the preview file applies it to all stories
+    (story, { parameters }) => {
+      // 👇 Make it configurable by reading from parameters
+      const { pageLayout } = parameters;
+      return {
+        Component: PageLayout,
+        props: {
+          layout: pageLayout || 'default',
+          children: story,
+        },
+      };
+    },
+  ],
+};
+
+export default preview;
+```
+
+```svelte filename=".storybook/PageLayout.svelte" renderer="svelte" language="js" tabTitle="Layout component"
+<script>
+  let { layout = 'default', children } = $props();
+</script>
+
+<!-- Your page layout is probably a little more complex than this -->
+<div class={layout}>
+  {@render children?.()}
+</div>
+```
+
+```ts filename=".storybook/preview.ts" renderer="web-components" language="ts"
+import type { Preview } from '@storybook/web-components-vite';
+
+import { html } from 'lit';
+
+const preview: Preview = {
+  decorators: [
+    // 👇 Defining the decorator in the preview file applies it to all stories
+    (story, { parameters }) => {
+      // 👇 Make it configurable by reading from parameters
+      const { pageLayout } = parameters;
+      switch (pageLayout) {
+        case 'page':
+          // Your page layout is probably a little more complex than this
+          return html`<div class="page-layout">${story()}</div>`;
+        case 'page-mobile':
+          return html`<div class="page-mobile-layout">${story()}</div>`;
+        default:
+          // In the default case, don't apply a layout
+          return story();
+      }
+    },
+  ],
+};
+
+export default preview;
+```
+
+```js filename=".storybook/preview.js" renderer="web-components" language="js" tabTitle="Preview"
+import { html } from 'lit';
+
+const preview = {
+  decorators: [
+    // 👇 Defining the decorator in the preview file applies it to all stories
+    (story, { parameters }) => {
+      // 👇 Make it configurable by reading from parameters
+      const { pageLayout } = parameters;
+      switch (pageLayout) {
+        case 'page':
+          // Your page layout is probably a little more complex than this
+          return html`<div class="page-layout">${story()}</div>`;
+        case 'page-mobile':
+          return html`<div class="page-mobile-layout">${story()}</div>`;
+        default:
+          // In the default case, don't apply a layout
+          return story();
+      }
+    },
+  ],
+};
+
+export default preview;
+```
+
 ```tsx filename=".storybook/preview.tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
 import React from 'react';
 
@@ -221,7 +351,7 @@ export default definePreview({
       switch (pageLayout) {
         case 'page':
           return (
-            // Your page layout is probably a little more complex than this ;)
+            // Your page layout is probably a little more complex than this
             <div className="page-layout">
               <Story />
             </div>
@@ -258,7 +388,7 @@ export default definePreview({
       switch (pageLayout) {
         case 'page':
           return (
-            // Your page layout is probably a little more complex than this ;)
+            // Your page layout is probably a little more complex than this
             <div className="page-layout">
               <Story />
             </div>
diff --git a/docs/_snippets/storybook-preview-with-styled-components-decorator.md b/docs/_snippets/storybook-preview-with-styled-components-decorator.md
index df975665fc46..278ba3e2cf15 100644
--- a/docs/_snippets/storybook-preview-with-styled-components-decorator.md
+++ b/docs/_snippets/storybook-preview-with-styled-components-decorator.md
@@ -27,6 +27,292 @@ const preview: Preview = {
 export default preview;
 ```
 
+```ts filename=".storybook/preview.ts" renderer="vue" language="ts" tabTitle="Preview"
+import type { Preview } from '@storybook/vue3-vite';
+import { setup } from '@storybook/vue3-vite';
+
+import 'vuetify/styles';
+import '@mdi/font/css/materialdesignicons.css';
+import vuetify from '../src/plugins/vuetify';
+
+import StoryWrapper from './StoryWrapper.vue';
+
+// Registers the Vuetify plugin in Storybook's Vue app instance
+setup((app) => {
+  app.use(vuetify);
+});
+
+const preview: Preview = {
+  decorators: [
+    (_, { globals }) => {
+      // The theme can be accessed via the story context's globals
+      const themeName = globals.theme || 'light';
+      return {
+        components: { StoryWrapper },
+        setup() {
+          return { themeName };
+        },
+        template: `
+          <StoryWrapper :themeName="themeName">
+            <template #story>
+              <story />
+            </template>
+          </StoryWrapper>
+        `,
+      };
+    },
+  ],
+};
+
+export default preview;
+```
+
+```html filename=".storybook/StoryWrapper.vue" renderer="vue" language="ts" tabTitle="Theme Provider"
+<template>
+  <v-app :theme="themeName">
+    <v-main>
+      <slot name="story"></slot>
+    </v-main>
+  </v-app>
+</template>
+
+<script lang="ts" setup>
+  defineProps<{ themeName?: string }>();
+</script>
+```
+
+```js filename=".storybook/preview.js" renderer="vue" language="js" tabTitle="Preview"
+import { setup } from '@storybook/vue3-vite';
+
+import 'vuetify/styles';
+import '@mdi/font/css/materialdesignicons.css';
+import vuetify from '../src/plugins/vuetify';
+
+import StoryWrapper from './StoryWrapper.vue';
+
+// Registers the Vuetify plugin in Storybook's Vue app instance
+setup((app) => {
+  app.use(vuetify);
+});
+
+const preview = {
+  decorators: [
+    (_, { globals }) => {
+      // The theme can be accessed via the story context's globals
+      const themeName = globals.theme || 'light';
+      return {
+        components: { StoryWrapper },
+        setup() {
+          return { themeName };
+        },
+        template: `
+          <StoryWrapper :themeName="themeName">
+            <template #story>
+              <story />
+            </template>
+          </StoryWrapper>
+        `,
+      };
+    },
+  ],
+};
+
+export default preview;
+```
+
+```html filename=".storybook/StoryWrapper.vue" renderer="vue" language="js" tabTitle="Theme Provider"
+<template>
+  <v-app :theme="themeName">
+    <v-main>
+      <slot name="story"></slot>
+    </v-main>
+  </v-app>
+</template>
+
+<script>
+  export default {
+    name: 'StoryWrapper',
+    props: {
+      themeName: {
+        type: String,
+        default: 'light',
+      },
+    },
+  };
+</script>
+```
+
+```ts filename=".storybook/preview.ts" renderer="svelte" language="ts" tabTitle="Preview"
+// Replace your-framework with svelte-vite or sveltekit
+import type { Preview } from '@storybook/your-framework';
+
+import ThemeProvider from './ThemeProvider.svelte';
+
+const preview: Preview = {
+  decorators: [
+    // The theme can be accessed via the story context's globals
+    (story, { globals }) => {
+      return {
+        Component: ThemeProvider,
+        props: {
+          theme: globals.theme || 'light',
+          children: story,
+        },
+      };
+    },
+  ],
+};
+
+export default preview;
+```
+
+```svelte filename=".storybook/ThemeProvider.svelte" renderer="svelte" language="ts" tabTitle="Theme Provider"
+<script lang="ts">
+  import { BitsConfig } from 'bits-ui';
+
+  interface Props {
+    theme?: 'light' | 'dark';
+    children?: import('svelte').Snippet;
+  }
+
+  let { theme = 'light', children }: Props = $props();
+</script>
+
+<BitsConfig defaultPortalTo="body">
+  <div data-theme={theme} class="theme-wrapper">
+    {@render children?.()}
+  </div>
+</BitsConfig>
+```
+
+```js filename=".storybook/preview.js" renderer="svelte" language="js" tabTitle="Preview"
+import ThemeProvider from './ThemeProvider.svelte';
+
+const preview = {
+  decorators: [
+    // The theme can be accessed via the story context's globals
+    (story, { globals }) => {
+      return {
+        Component: ThemeProvider,
+        props: {
+          theme: globals.theme || 'light',
+          children: story,
+        },
+      };
+    },
+  ],
+};
+
+export default preview;
+```
+
+```svelte filename=".storybook/ThemeProvider.svelte" renderer="svelte" language="js" tabTitle="Theme Provider"
+<script>
+  import { BitsConfig } from 'bits-ui';
+
+  let { theme = 'light', children } = $props();
+</script>
+
+<BitsConfig defaultPortalTo="body">
+  <div data-theme={theme} class="theme-wrapper">
+    {@render children?.()}
+  </div>
+</BitsConfig>
+```
+
+```ts filename=".storybook/preview.ts" renderer="web-components" language="ts" tabTitle="Preview"
+import type { Preview } from '@storybook/web-components-vite';
+
+import { html } from 'lit';
+
+import './ThemeProvider';
+
+const preview: Preview = {
+  decorators: [
+    // The theme can be accessed via the story context's globals
+    (story, { globals }) => {
+      const theme = globals.theme || 'light';
+      return html`<theme-provider theme=${theme}>${story()}</theme-provider>`;
+    },
+  ],
+};
+
+export default preview;
+```
+
+```ts filename=".storybook/ThemeProvider.ts" renderer="web-components" language="ts" tabTitle="Theme Provider"
+import { LitElement, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+export type Theme = 'light' | 'dark';
+
+@customElement('theme-provider')
+export class ThemeProvider extends LitElement {
+  @property({ type: String, reflect: true })
+  theme: Theme = 'light';
+
+  public setTheme(theme: Theme): void {
+    this.theme = theme;
+  }
+  public getTheme(): Theme {
+    return this.theme;
+  }
+
+  override render() {
+    return html` <slot></slot> `;
+  }
+}
+```
+
+```js filename=".storybook/preview.js" renderer="web-components" language="js" tabTitle="Preview"
+import { html } from 'lit';
+
+import './ThemeProvider';
+
+const preview = {
+  decorators: [
+    // The theme can be accessed via the story context's globals
+    (story, { globals }) => {
+      const theme = globals.theme || 'light';
+      return html`<theme-provider theme=${theme}>${story()}</theme-provider>`;
+    },
+  ],
+};
+
+export default preview;
+```
+
+```js filename=".storybook/ThemeProvider.js" renderer="web-components" language="js" tabTitle="Theme Provider"
+import { LitElement, html } from 'lit';
+
+export class ThemeProvider extends LitElement {
+  static properties = {
+    theme: { type: String, reflect: true },
+  };
+
+  constructor() {
+    super();
+    this.theme = 'light';
+  }
+
+  setTheme(theme) {
+    this.theme = theme;
+  }
+
+  getTheme() {
+    return this.theme;
+  }
+
+  render() {
+    return html`<slot></slot>`;
+  }
+}
+
+if (!customElements.get('theme-provider')) {
+  customElements.define('theme-provider', ThemeProvider);
+}
+```
+
 ```jsx filename=".storybook/preview.js" renderer="react" language="js" tabTitle="CSF 3"
 import React from 'react';
 
diff --git a/docs/get-started/setup.mdx b/docs/get-started/setup.mdx
index e922ffc54db1..1c5fc6f93cc5 100644
--- a/docs/get-started/setup.mdx
+++ b/docs/get-started/setup.mdx
@@ -66,7 +66,7 @@ Your project may have additional requirements before components can be rendered
 
   A common frontend pattern is for components to assume that they render in a specific “context” with parent components higher up the rendering hierarchy (for instance, theme providers).
 
-  Use [decorators](../writing-stories/decorators.mdx) to “wrap” every story in the necessary context providers. The [`.storybook/preview.js|ts`](../configure/index.mdx#configure-story-rendering) file allows you to customize how components render in Canvas, the preview iframe. See how you can wrap every component rendered in Storybook with [Styled Components](https://styled-components.com/) `ThemeProvider`, [Vue's Fontawesome](https://github.com/FortAwesome/vue-fontawesome), or with an Angular theme provider component in the example below.
+  Use [decorators](../writing-stories/decorators.mdx) to “wrap” every story in the necessary context providers. The [`.storybook/preview.js|ts`](../configure/index.mdx#configure-story-rendering) file allows you to customize how components render in Canvas, the preview iframe. See how you can wrap every component rendered in Storybook with [Styled Components](https://styled-components.com/) `ThemeProvider`, [Vue's Vuetify](https://vuetifyjs.com/en/), Svelte's [Bits UI](https://bits-ui.com/) `BitsConfig`, or with an Angular theme provider component in the example below.
 
   {/* prettier-ignore-start */}