Dropi UI Components - Framework-agnostic Web Components library built with Angular Elements
npm install @dropi/ui-components> Framework-agnostic Web Components library built with Angular Elements

``bash`
npm install @dropi/ui-components
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.
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
---
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";
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 = () => (
text="Login"
onClick={() => console.log("clicked")}
>
);
---
All components use the prefix dropi-wc-.
| 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 |
| Selector | Description |
| ------------------------------- | ------------------------------------ |
| | Collapsible navigation sidebar |
| | Top navigation bar |
| | Navigation breadcrumbs |
| | Data pagination with cursor support |
| | Progress steps (horizontal/vertical) |
| | Language switching dropdown |
| Selector | Description |
| ---------------------- | --------------------------------------- |
| | Dialog modals with customizable content |
| | Side drawers (Left/Right) |
| | Expandable content sections |
| | Tabbed content views |
| 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 |
| Selector | Description |
| ---------------------------- | --------------------------------- |
| | Image and content carousels |
| | Lazy-loaded YouTube player |
| | Checkbox-based selection dropdown |
| | Dynamic WordPress banners |
---
`bashInstall dependencies
npm install