Stencil Storybook Boilerplate

A modern boilerplate for building fast and robust design systems for React, Remix, Next.js, Vue, Angular or Vanilla JS applications ✨ using:

• Stencil 4
• Storybook 9
• Vite
• TypeScript
• Style Dictionary

This monorepo is structured using Lerna. For more details, check out my blog post.

📢 Announcement (as of April 2025)

It's happening! 🎉

Storybook has officially confirmed a native Stencil integration, with contributions already coming from the Stencil core team.

👉 storybookjs/storybook#31205

👉 https://stencil-docs-git-cb-storybook-ionic1.vercel.app/docs/next/storybook

👉 https://www.npmjs.com/package/@stencil/storybook-plugin

We're closely following the progress and will switch to the native setup as soon as it's stable.

📖 Features

Optimized for Web Components: Seamlessly integrates across frameworks.

• Optimized for Web Components: Works seamlessly across frameworks
• Storybook Integration: Documents and tests UI components with dark mode support and Hot Module Replacement (HMR).
• Vite-Powered: Provides a lightning-fast development experience.
• SSR-Ready with Next.js: Full support for Server-Side Rendering (SSR) with Next.js App Router , unlike Lit.
• Fully Typed Arguments: Enhanced type safety with TypeScript.
• Design Tokens Support: Enables consistent theming with customizable tokens (DTCG).
• Accessibility-Focused: Define and validate ARIA attributes through a single aria prop, as Porsche and the Stencil Core do, accepting both JSON strings and objects to improve inclusivity and usability.

🤔 Why Stencil over Lit?

Stencil is the only Web Components framework that fully supports SSR with Next.js App Router. While Lit is better integrated with Storybook and Vite, it falls short due to:

❌ Limited SSR support (only for the outdated Next.js Page Router)
❌ Buggy and experimental React integration

✅ Why Stencil Wins:

• Full SSR support with Next.js App Router
• JSX support
• Optimized for modern Micro Frontends
• Cleaner Design System integration

---

💡 Requirements

• Node.js 20+
• Git

🚀 Getting Started

Clone this repository:

git clone https://github.com/artursopelnik/stencil-storybook-boilerplate.git
cd stencil-storybook-boilerplate

👩‍💻 Usage

1. Install dependencies:

   npm install

2. Build packages

   npm run build

3. Go to the Storybook package:

   cd packages/storybook

   • Run npm run storybook.run to monitor only the Storybook stories.
   • Run npm run storybook to also watch changes in the web components.

4. Optional to generate a new component:

   cd packages/core
   npm run generate <sub-folder>

🙌 Contributing

We welcome contributions! 🚀

• Pull requests and ⭐ stars are always appreciated.
• For major changes, please open an issue first.
• Ensure tests are updated accordingly.

📩 Contact

📧 Email: artur.sopelnik93@gmail.com
💼 LinkedIn: @artursopelnik

📜 License

MIT © Artur Sopelnik