Is your proposal related to a problem?

Fixing small UI issues currently requires running the full application, navigating through multiple pages, and setting up the correct state.

For example, when adjusting a minor component (e.g. Button, Modal, Form states), developers need to:

• boot the entire app
• authenticate / navigate to a specific page
• reproduce the exact UI state

This introduces unnecessary overhead and slows down iteration, especially in a large codebase like cal.com.

Describe the solution you'd like

Introduce Storybook to enable isolated component development.

With Storybook, components can be:

• rendered independently of the full app
• tested across multiple states (loading, error, disabled, etc.)
• iterated on quickly without routing or backend dependencies

This would allow developers to:

• reproduce UI issues instantly
• fix small component bugs much faster, eg: fix(apps/web): update digitClassName in VerifyCodeDialog for improved dark mode styling #28623
• reduce reliance on full application runtime for UI work

Describe alternatives you've considered

• Using local pages or temporary routes to render components
• Logging / console debugging within the app
• Manually navigating through the app to reach target UI states

These approaches still depend on the full application environment and are slower compared to isolated rendering.

Additional context

This becomes particularly valuable in large projects where:

• startup time is non-trivial
• UI components are reused across multiple pages
• small visual fixes happen frequently

For example, fixing a small UI bug currently requires running the entire app, while with Storybook it could be done instantly in isolation.

Storybook could also be extended later for:

• visual regression testing
• component documentation
• design-system alignment

Requirement/Document

• https://storybook.js.org/docs/react/get-started/install
• Example integrations with Next.js:
  https://storybook.js.org/docs/react/get-started/nextjs