Meta description: Learn how to create reusable web components in React using RetroUI, enhancing your development workflow with customizable and independent UI elements.

Building React Web Components brings together the power of encapsulation and the flexibility of custom elements. In this guide, we’ll walk through creating a shareable widget using React, Vite, and the RetroUI library. You’ll end up with a fully isolated, style-safe component that any web page can consume—no framework lock-in required.

Why React Web Components?

Web components give you:
– Native encapsulation
Your styles and markup live in a Shadow DOM. No more CSS collisions.
– Framework-agnostic usage
Drop <my-widget> into any page—even one not built with React.
– Easy distribution
Publish a single JavaScript file for users to include.

By combining React’s declarative UI with RetroUI’s retro-styled, TailwindCSS-based components, you get reusable React Web Components that look great and are type-safe.

Meet RetroUI: Your UI Library for Modern Widgets

RetroUI offers:
– 100+ open source components built on React and TailwindCSS.
– Type-safe APIs for stable integrations.
– A premium add-on, RetroUI Pro, with extra templates, Figma kits, and blocks.

Whether you’re a web developer rushing to prototype or a designer who wants consistent visuals, RetroUI has your back. Let’s dive into how you can assemble a tiny subscription widget.

1. Scaffold with Vite

First, install your boilerplate:

npm create vite@latest my-widget --template react-ts
cd my-widget
npm install
npm run dev

Vite’s live reload means you’ll see changes instantly.

2. Build a React Component with RetroUI

Instead of hand-crafting <div>s, use RetroUI’s pre-built pieces:

// src/components/Subscription.tsx
import { FC } from "react";
import { Button, Input } from "@retroui/react";
import styles from "./Subscription.scss?inline";

export interface SubscriptionProps {
  username: string;
  showMentions?: boolean;
}

export const Subscription: FC<SubscriptionProps> = ({
  username,
  showMentions = false,
}) => (
  <>
    <style>{styles}</style>
    <div className="subscription">
      <h2 className="subscription__title">Subscribe</h2>
      <p className="subscription__greeting">Hey {username}!</p>
      <Input
        id="email"
        type="email"
        placeholder="Your email"
        className="subscription__input"
      />
      <Button variant="primary">Join Now</Button>
      {showMentions && (
        <p className="subscription__mentions">
          Keep me in the loop with mentions!
        </p>
      )}
    </div>
  </>
);

Our SCSS adds some layout:

// src/components/Subscription.scss
.subscription {
  text-align: center;
  padding: 1rem;
  background: #fff;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  border-radius: 0.5rem;
  font-family: var(--font-primary, "Roboto", sans-serif);

  &__title {
    font-size: 1.5rem;
    color: var(--color-primary, #0785ff);
    margin-bottom: 0.5rem;
  }
  &__greeting { margin-bottom: 1rem; }
  &__mentions {
    font-size: 0.875rem;
    color: #666;
  }
}

3. Wrap It as a Web Component

Create a web-component.tsx at src/:

import ReactDOM from "react-dom/client";
import { Subscription, SubscriptionProps } from "./components/Subscription";

const normalize = (attr: string) =>
  attr.replace(/-([a-z])/g, (_, c) => c.toUpperCase());

class SubscriptionWC extends HTMLElement {
  shadow = this.attachShadow({ mode: "open" });

  connectedCallback() {
    const props: Record<string, string> = {};
    Array.from(this.attributes).forEach(({ name, value }) => {
      props[normalize(name)] = value;
    });

    const root = ReactDOM.createRoot(this.shadow);
    root.render(<Subscription {...(props as SubscriptionProps)} />);
  }
}

export default SubscriptionWC;

Then define the custom element in src/index.tsx:

import SubscriptionWC from "./web-component";

customElements.define("my-subscription", SubscriptionWC);

4. Build for Distribution

Update your vite.config.ts to bundle a library:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],
  build: {
    lib: {
      entry: "./src/index.tsx",
      name: "subscription",
      fileName: f => `subscription.${f}.js`,
    },
    target: "esnext",
  },
});

Run:

npm run build

Your /dist folder now includes subscription.umd.js and subscription.es.js.

5. Test Your React Web Component

Create dist/index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>React Web Components Demo</title>
  <style>
    /* Override CSS variables if you like */
    :root {
      --color-primary: #1a8917;
      --font-primary: "Helvetica Neue", sans-serif;
    }
  </style>
</head>
<body>
  <my-subscription username="Visitor" show-mentions="true"></my-subscription>
  <script src="subscription.umd.js"></script>
</body>
</html>

Open it in your browser. Voilà—your React Web Components widget runs in isolation, styles intact, and completely reusable.

6. Going Further with RetroUI Pro

Looking for more patterns and Figma assets?
RetroUI Pro adds:
– 100+ extra blocks and templates
– A comprehensive Figma kit
– Priority support from our community

Combine Pro’s designs with your React Web Components bundle for lightning-fast development.

Conclusion

You’ve just seen how easy it is to build encapsulated, reusable React Web Components using Vite and RetroUI. This approach:

Saves you CSS headache with Shadow DOM
Lets non-React pages consume your widget
Leverages RetroUI’s stylish, TypeScript-safe components

Ready to supercharge your UI workflow? Explore the full RetroUI library and unleash your creativity today.

Get started with RetroUI → https://www.retroui.dev