Home

Awesome

<h1>Storybook Reproduction Templates</h1>

<img alt="Storybook latest Badge" src="https://img.shields.io/npm/v/@storybook/react/latest" />

<p> The following repros have been generated with the `latest` version of Storybook. </p> <p> Preview any repro live on <a href="http://stackblitz.com/">StackBlitz:</a> </p> <details> <summary><b>CRA</b></summary> <ul> <li> <a href="https://stackblitz.com/github/storybookjs/sandboxes/tree/main/cra/default-js/after-storybook?preset=node" > Create React App Latest (Webpack | JavaScript) </a> </li> <li> <a href="https://stackblitz.com/github/storybookjs/sandboxes/tree/main/cra/default-ts/after-storybook?preset=node" > Create React App Latest (Webpack | TypeScript) </a> </li> </ul> </details> <details> <summary><b>Nextjs</b></summary> <ul> <li> <a href="https://stackblitz.com/github/storybookjs/sandboxes/tree/main/nextjs/13-ts/after-storybook?preset=node" > Next.js v13.5 (Webpack | TypeScript) </a> </li> <li> <a href="https://stackblitz.com/github/storybookjs/sandboxes/tree/main/nextjs/14-ts/after-storybook?preset=node" > Next.js v14.2 (Webpack | TypeScript) </a> </li> <li> <a href="https://stackblitz.com/github/storybookjs/sandboxes/tree/main/nextjs/default-ts/after-storybook?preset=node" > Next.js Latest (Webpack | TypeScript) </a> </li> <li> <a href="https://stackblitz.com/github/storybookjs/sandboxes/tree/main/nextjs/prerelease/after-storybook?preset=node" > Next.js Prerelease (Webpack | TypeScript) </a> </li> </ul> </details> <details> <summary><b>Experimental-nextjs-vite</b></summary> <ul> <li> <a href="https://stackblitz.com/github/storybookjs/sandboxes/tree/main/experimental-nextjs-vite/14-ts/after-storybook?preset=node" > Next.js Latest (Vite | TypeScript) </a> </li> <li> <a href="https://stackblitz.com/github/storybookjs/sandboxes/tree/main/experimental-nextjs-vite/default-ts/after-storybook?preset=node" > Next.js Latest (Vite | TypeScript) </a> </li> </ul> </details> <details> <summary><b>React-vite</b></summary> <ul> <li> <a href="https://stackblitz.com/github/storybookjs/sandboxes/tree/main/react-vite/default-js/after-storybook?preset=node" > React Latest (Vite | JavaScript) </a> </li> <li> <a href="https://stackblitz.com/github/storybookjs/sandboxes/tree/main/react-vite/default-ts/after-storybook?preset=node" > React Latest (Vite | TypeScript) </a> </li> <li> <a href="https://stackblitz.com/github/storybookjs/sandboxes/tree/main/react-vite/prerelease-ts/after-storybook?preset=node" > React Prerelease (Vite | TypeScript) </a> </li> </ul> </details> <details> <summary><b>React-webpack</b></summary> <ul> <li> <a href="https://stackblitz.com/github/storybookjs/sandboxes/tree/main/react-webpack/18-ts/after-storybook?preset=node" > React Latest (Webpack | TypeScript) </a> </li> <li> <a href="https://stackblitz.com/github/storybookjs/sandboxes/tree/main/react-webpack/17-ts/after-storybook?preset=node" > React v17 (Webpack | TypeScript) </a> </li> <li> <a href="https://stackblitz.com/github/storybookjs/sandboxes/tree/main/react-webpack/prerelease-ts/after-storybook?preset=node" > React Prerelease (Webpack | TypeScript) </a> </li> </ul> </details> <details> <summary><b>Solid-vite</b></summary> <ul> <li> <a href="https://stackblitz.com/github/storybookjs/sandboxes/tree/main/solid-vite/default-js/after-storybook?preset=node" > SolidJS Latest (Vite | JavaScript) </a> </li> <li> <a href="https://stackblitz.com/github/storybookjs/sandboxes/tree/main/solid-vite/default-ts/after-storybook?preset=node" > SolidJS Latest (Vite | TypeScript) </a> </li> </ul> </details> <details> <summary><b>Vue3-vite</b></summary> <ul> <li> <a href="https://stackblitz.com/github/storybookjs/sandboxes/tree/main/vue3-vite/default-js/after-storybook?preset=node" > Vue v3 (Vite | JavaScript) </a> </li> <li> <a href="https://stackblitz.com/github/storybookjs/sandboxes/tree/main/vue3-vite/default-ts/after-storybook?preset=node" > Vue v3 (Vite | TypeScript) </a> </li> </ul> </details> <details> <summary><b>Html-webpack</b></summary> <ul> <li> <a href="https://stackblitz.com/github/storybookjs/sandboxes/tree/main/html-webpack/default/after-storybook?preset=node" > HTML Latest (Webpack | JavaScript) </a> </li> </ul> </details> <details> <summary><b>Html-vite</b></summary> <ul> <li> <a href="https://stackblitz.com/github/storybookjs/sandboxes/tree/main/html-vite/default-js/after-storybook?preset=node" > HTML Latest (Vite | JavaScript) </a> </li> <li> <a href="https://stackblitz.com/github/storybookjs/sandboxes/tree/main/html-vite/default-ts/after-storybook?preset=node" > HTML Latest (Vite | TypeScript) </a> </li> </ul> </details> <details> <summary><b>Svelte-vite</b></summary> <ul> <li> <a href="https://stackblitz.com/github/storybookjs/sandboxes/tree/main/svelte-vite/default-js/after-storybook?preset=node" > Svelte Latest (Vite | JavaScript) </a> </li> <li> <a href="https://stackblitz.com/github/storybookjs/sandboxes/tree/main/svelte-vite/default-ts/after-storybook?preset=node" > Svelte Latest (Vite | TypeScript) </a> </li> </ul> </details> <details> <summary><b>Angular-cli</b></summary> <ul> <li> <a href="https://stackblitz.com/github/storybookjs/sandboxes/tree/main/angular-cli/prerelease/after-storybook?preset=node" > Angular CLI Prerelease (Webpack | TypeScript) </a> </li> <li> <a href="https://stackblitz.com/github/storybookjs/sandboxes/tree/main/angular-cli/default-ts/after-storybook?preset=node" > Angular CLI Latest (Webpack | TypeScript) </a> </li> <li> <a href="https://stackblitz.com/github/storybookjs/sandboxes/tree/main/angular-cli/15-ts/after-storybook?preset=node" > Angular CLI v15 (Webpack | TypeScript) </a> </li> </ul> </details> <details> <summary><b>Svelte-kit</b></summary> <ul> <li> <a href="https://stackblitz.com/github/storybookjs/sandboxes/tree/main/svelte-kit/skeleton-js/after-storybook?preset=node" > SvelteKit Latest (Vite | JavaScript) </a> </li> <li> <a href="https://stackblitz.com/github/storybookjs/sandboxes/tree/main/svelte-kit/skeleton-ts/after-storybook?preset=node" > SvelteKit Latest (Vite | TypeScript) </a> </li> <li> <a href="https://stackblitz.com/github/storybookjs/sandboxes/tree/main/svelte-kit/prerelease-ts/after-storybook?preset=node" > SvelteKit Prerelease (Vite | TypeScript) </a> </li> </ul> </details> <details> <summary><b>Lit-vite</b></summary> <ul> <li> <a href="https://stackblitz.com/github/storybookjs/sandboxes/tree/main/lit-vite/default-js/after-storybook?preset=node" > Lit Latest (Vite | JavaScript) </a> </li> <li> <a href="https://stackblitz.com/github/storybookjs/sandboxes/tree/main/lit-vite/default-ts/after-storybook?preset=node" > Lit Latest (Vite | TypeScript) </a> </li> </ul> </details> <details> <summary><b>Vue-cli</b></summary> <ul> <li> <a href="https://stackblitz.com/github/storybookjs/sandboxes/tree/main/vue-cli/default-js/after-storybook?preset=node" > Vue CLI v3 (Webpack | JavaScript) </a> </li> </ul> </details> <details> <summary><b>Preact-vite</b></summary> <ul> <li> <a href="https://stackblitz.com/github/storybookjs/sandboxes/tree/main/preact-vite/default-js/after-storybook?preset=node" > Preact Latest (Vite | JavaScript) </a> </li> <li> <a href="https://stackblitz.com/github/storybookjs/sandboxes/tree/main/preact-vite/default-ts/after-storybook?preset=node" > Preact Latest (Vite | TypeScript) </a> </li> </ul> </details> <details> <summary><b>Qwik-vite</b></summary> <ul> <li> <a href="https://stackblitz.com/github/storybookjs/sandboxes/tree/main/qwik-vite/default-ts/after-storybook?preset=node" > Qwik CLI Latest (Vite | TypeScript) </a> </li> </ul> </details> <details> <summary><b>Ember</b></summary> <ul> <li> <a href="https://stackblitz.com/github/storybookjs/sandboxes/tree/main/ember/3-js/after-storybook?preset=node" > Ember v3 (Webpack | JavaScript) </a> </li> <li> <a href="https://stackblitz.com/github/storybookjs/sandboxes/tree/main/ember/default-js/after-storybook?preset=node" > Ember v4 (Webpack | JavaScript) </a> </li> </ul> </details> <details> <summary><b>Internal</b></summary> <ul> <li> <a href="https://stackblitz.com/github/storybookjs/sandboxes/tree/main/internal/react18-webpack-babel/after-storybook?preset=node" > React with Babel Latest (Webpack | TypeScript) </a> </li> <li> <a href="https://stackblitz.com/github/storybookjs/sandboxes/tree/main/internal/react16-webpack/after-storybook?preset=node" > React 16 (Webpack | TypeScript) </a> </li> <li> <a href="https://stackblitz.com/github/storybookjs/sandboxes/tree/main/internal/server-webpack5/after-storybook?preset=node" > Server Webpack5 </a> </li> </ul> </details> <details> <summary><b>Bench</b></summary> <ul> <li> <a href="https://stackblitz.com/github/storybookjs/sandboxes/tree/main/bench/react-vite-default-ts/after-storybook?preset=node" > Bench (react-vite/default-ts) </a> </li> <li> <a href="https://stackblitz.com/github/storybookjs/sandboxes/tree/main/bench/react-webpack-18-ts/after-storybook?preset=node" > Bench (react-webpack/18-ts) </a> </li> <li> <a href="https://stackblitz.com/github/storybookjs/sandboxes/tree/main/bench/react-vite-default-ts-nodocs/after-storybook?preset=node" > Bench (react-vite/default-ts, no docs) </a> </li> <li> <a href="https://stackblitz.com/github/storybookjs/sandboxes/tree/main/bench/react-vite-default-ts-test-build/after-storybook?preset=node" > Bench (react-vite/default-ts, test-build) </a> </li> <li> <a href="https://stackblitz.com/github/storybookjs/sandboxes/tree/main/bench/react-webpack-18-ts-test-build/after-storybook?preset=node" > Bench (react-webpack/18-ts, test-build) </a> </li> </ul> </details>