Modern UI development often ties components to specific frameworks like React or Angular. This leads to duplicate development, inconsistent design, and increased maintenance effort.

To solve this, a framework-independent approach using Web Components can help build reusable and scalable UI elements.

💡 Solution Overview

This approach uses:

• Lit (Web Components) to build reusable UI components

• Storybook for interactive testing

• npm packages for sharing components across applications

This allows building components once and using them across multiple frameworks.

🏗️ Architecture Flow

The workflow looks like this:

• Developer creates reusable components using Lit

• Components are documented and tested in Storybook

• Components are built and published as npm packages

• Applications (React, Angular, Vue) consume these components

🧩 Example: Lit Component

@customElement('my-button')
export class MyButton extends LitElement {
  @property() label = 'Click Me';

  render() {
    return html`<button>${this.label}</button>`;
  }
}

<my-button></my-button>
<my-button label="Submit"></my-button>

📘 Storybook Integration

Storybook helps in:

• Viewing components in isolation

• Creating different states (Primary, Disabled, etc.)

• Acting as live documentation

📘 Live Storybook Demo

You can explore reusable UI components and their variations through the live Storybook:

👉 View Storybook

This includes:

• Interactive component previews

• Different states and variations

• Real-time property controls

📦 Publishing Components

npm run build
npm publish

Update:

npm version patch
npm run build
npm publish

🔗 Consuming Components

Components can be published either privately using Azure Artifacts or publicly via npm, depending on your use case.

🔐 Using Azure Artifacts (Private Packages)

Configure your .npmrc:

@your-scope:registry=https://<company-registry-url>
always-auth=true

Authenticate and install:

vsts-npm-auth -config .npmrc
npm install component-name

👉 Used for internal enterprise projects where components are shared within the organization.

🌐 Using npm (Public Packages)

If components are published publicly:

npm install component-name

👉 Used for open-source or publicly reusable component libraries.

📊 Benefits

• Eliminates duplicate UI development

• Improves consistency across applications

• Reduces development and maintenance effort

• Enables faster development cycles

• Supports cross-framework usage

📈 Conclusion

Lit, Storybook, and npm together redefine UI development—enabling teams to build once, reuse everywhere, and deliver faster with consistency and scalability at the core.

💡 If you found this useful, explore the Storybook demo and try integrating these components into your projects.

✍️ Written by Likitha Kattamudi