open-index/open-npm huggingface dataset:
npm package: @quizzes-dojo/agnostic-components
Description: Framework-agnostic web components built with Lit
Latest version: 0.0.2

# Agnostic Components

Framework-agnostic UI components packaged as native Web Components and a React wrapper.

Currently exported component:

* `<universal-button>` – stylable button usable in any framework.

---

## Installation

```bash
npm install @quizzes-dojo/agnostic-components lit
```

`lit` is a peer dependency and must exist in the consuming project.

---

## Quick usage

### Vanilla JS / HTML

```js
import '@quizzes-dojo/agnostic-components/define';
```

```html
<universal-button title="Click" custom-style="background:#1d4ed8;color:#fff"></universal-button>
```

### React

```tsx
import '@quizzes-dojo/agnostic-components/define';
import { UniversalButton } from '@quizzes-dojo/agnostic-components';

<UniversalButton title="React Btn" onAction={()=>alert('hi')} />
```

### Angular

* Add `CUSTOM_ELEMENTS_SCHEMA` to your module.
* Import registration once e.g. in `main.ts`:
  ```ts
  import '@quizzes-dojo/agnostic-components/define';
  ```
* Use element in template:
  ```html
  <universal-button title="Ng Btn" [action]="doSomething"></universal-button>
  ```

---

## Building & Publishing

```bash
# build output in dist/
npm run build -w packages/agnostic-components

# publish (after version bump)
cd packages/agnostic-components
npm publish --access public
```