@dropi/ui-components

> Framework-agnostic Web Components library built with Angular Elements


📦 Installation

``bash
npm install @dropi/ui-components
`

$3

The installation script will try to ask if you are setting up a Standalone application (React, Vue, Vanilla) or a Micro Frontend.

- Standalone: Installs necessary Angular runtime dependencies (@angular/core, zone.js, etc.) automatically.
- Micro Frontend: Skips dependencies, assuming the Host application provides them.

$3

If the installation runs in a non-interactive environment (CI/CD), you can configure it manually later:

`bash
npx dropi-setup
`

Or force the mode via environment variables:

`bash
DROPI_INSTALL_MODE=standalone npm install @dropi/ui-components
`

---

🚀 Quick Start

$3

Crucial: You must import the CSS tokens for the components to look right.

Angular (angular.json):

`json
"styles": [
"node_modules/@dropi/ui-components/dist/dropi-tokens.css",
"src/styles.scss"
]
`

React / Vue / Vanilla JS:

`javascript
import "@dropi/ui-components/dropi-tokens.css";
`

$3

In your main entry file (main.tsx, main.js), initialize the library:

`typescript
import "zone.js"; // Mandatory: must be imported first
import { defineCustomElements } from "@dropi/ui-components";

// Initialize Angular environment and register Web Components
defineCustomElements();
`

Then use the Web Component tags directly in your JSX/HTML:

`tsx
// React Example (No imports needed for the component itself)
const App = () => (



);
`

---

📚 Available Web Components

All components use the prefix dropi-wc-.

$3

| Selector | Description |
| ------------------------- | ----------------------------------------- |
| | Primary/Secondary/Ghost buttons |
| | Text inputs with validation |
| | Standard checkbox |
| | Grouped radio buttons |
| | Toggle switches |
| | Advanced toggle switch with configuration |
| | Multi-line text area |
| | Specialized international phone input |

$3

| Selector | Description |
| ------------------------------- | ------------------------------------ |
| | Collapsible navigation sidebar |
| | Top navigation bar |
| | Navigation breadcrumbs |
| | Data pagination with cursor support |
| | Progress steps (horizontal/vertical) |
| | Language switching dropdown |

$3

| Selector | Description |
| ---------------------- | --------------------------------------- |
| | Dialog modals with customizable content |
| | Side drawers (Left/Right) |
| | Expandable content sections |
| | Tabbed content views |

$3

| Selector | Description |
| ----------------------------- | ------------------------------------ |
| | Success/Error/Info status alerts |
| | Verification status alerts (PrimeNG) |
| | Status and number badges |
| | Categorization tags |
| | Loading indicator |
| | Loading skeletons for layouts |
| | Empty state displays |
| | Contextual help tooltips |

$3

| Selector | Description |
| ---------------------------- | --------------------------------- |
| | Image and content carousels |
| | Lazy-loaded YouTube player |
| | Checkbox-based selection dropdown |
| | Dynamic WordPress banners |

---

🛠️ Development

`bash


Install dependencies

npm install

Build library

npm run build:complete

Watch mode

npm run watch
``