@poluru-labs/universal-modal

Production-grade universal modal monorepo — framework-agnostic core plus separately installable adapters.

npm cannot publish or install a package named @scope/pkg/react (the / is a subpath, not a package).
Install the matching package name instead — same idea as @headlessui/react.

Install

Pick the adapter for your stack (each pulls in the core automatically):

npm install @poluru-labs/universal-modal-react
npm install @poluru-labs/universal-modal-vue
npm install @poluru-labs/universal-modal-angular
npm install @poluru-labs/universal-modal-vanilla
npm install @poluru-labs/universal-modal-web-component

Core only (engine + styles):

npm install @poluru-labs/universal-modal

Import styles once:

import '@poluru-labs/universal-modal/styles.css';

Brand & button colors

Override globally with CSS variables:

:root {
  --um-color-brand: #0d47a1;
  --um-color-brand-fg: #ffffff;
  --um-btn-confirm-bg: var(--um-color-brand);
  --um-btn-confirm-fg: var(--um-color-brand-fg);
  --um-btn-confirm-border: var(--um-color-brand);
  --um-btn-cancel-bg: #fff;
  --um-btn-cancel-fg: #111827;
  --um-btn-cancel-border: #e5e7eb;
}

Or per modal via theme:

createModal({
  title: 'Delete?',
  theme: {
    brand: '#0d47a1',
    confirmBg: '#b91c1c',
    confirmFg: '#ffffff',
  },
});

See docs/THEMING.md.

Packages

| Package | Import | |---|---| | @poluru-labs/universal-modal | Core engine, types, ModalRenderer, CSS | | @poluru-labs/universal-modal-react | UniversalModal React component | | @poluru-labs/universal-modal-vue | UniversalModal Vue 3 component | | @poluru-labs/universal-modal-angular | UniversalModalComponent Angular standalone | | @poluru-labs/universal-modal-vanilla | createModal, confirmModal | | @poluru-labs/universal-modal-web-component | <universal-modal> custom element |

Usage

React

npm install @poluru-labs/universal-modal-react

import { useState } from 'react';
import { UniversalModal } from '@poluru-labs/universal-modal-react';
import '@poluru-labs/universal-modal/styles.css';

export function Example() {
  const [open, setOpen] = useState(false);
  return (
    <>
      <button onClick={() => setOpen(true)}>Open</button>
      <UniversalModal open={open} onOpenChange={setOpen} title="Hello">
        <p>Content</p>
      </UniversalModal>
    </>
  );
}

Vue 3

npm install @poluru-labs/universal-modal-vue

<script setup lang="ts">
import { ref } from 'vue';
import { UniversalModal } from '@poluru-labs/universal-modal-vue';
import '@poluru-labs/universal-modal/styles.css';
const open = ref(false);
</script>

<template>
  <UniversalModal v-model:open="open" title="Hello">
    <p>Content</p>
  </UniversalModal>
</template>

Angular

npm install @poluru-labs/universal-modal-angular

import { UniversalModalComponent } from '@poluru-labs/universal-modal-angular';
import '@poluru-labs/universal-modal/styles.css';

Vanilla JS / TypeScript

npm install @poluru-labs/universal-modal-vanilla

import { createModal } from '@poluru-labs/universal-modal-vanilla';
import '@poluru-labs/universal-modal/styles.css';

const modal = createModal({
  title: 'Delete?',
  role: 'alertdialog',
  onConfirm: async () => api.remove(),
});
await modal.open();

Web Components

npm install @poluru-labs/universal-modal-web-component

import '@poluru-labs/universal-modal-web-component';
import '@poluru-labs/universal-modal/styles.css';

<universal-modal id="demo" title="Settings" size="lg">
  <p>Content</p>
</universal-modal>
<script>
  document.getElementById('demo').open();
</script>

Monorepo layout

packages/
  universal-modal/                 # @poluru-labs/universal-modal
  universal-modal-react/           # @poluru-labs/universal-modal-react
  universal-modal-vue/
  universal-modal-angular/
  universal-modal-vanilla/
  universal-modal-web-component/
examples/
docs/

Develop

npm install
npm run build
npm run examples

• http://localhost:4173/examples/index.html — gallery hub
• Vanilla / Web Component / React / Vue / Angular each include multiple samples (confirm, drawer, sheet, fullscreen, persistent, themed, nested)

Note: change the port in examples/vite.config.ts if 4173 is already in use.

See docs/API.md, docs/THEMING.md, and docs/ACCESSIBILITY.md.

Author

Subrahmanyam Poluru (polurus.com) · [email protected] · LinkedIn
Github: GitHub · License: MIT

License & legal

• License: MIT © Subrahmanyam Poluru
• Authors: AUTHORS
• Notice: NOTICE
• Security: SECURITY.md

Third-party runtime code: none in the published core (framework peers are optional and not bundled). DevDependencies (TypeScript, tsup, React/Vue/Angular for builds) are not shipped in the npm tarball.