Skip to main content

Overview

boodoo provides framework-agnostic Web Components so you can drop interactive widgets directly into raw HTML, React, Vue, or Svelte.

Live Custom Elements Showcase

Drop pre-registered custom elements into your markup with zero JavaScript glue:

Theme Switcher Element
Six-Digit Verification Code
Five-Star Rating Element
<!-- Theme Toggle Custom Element -->
<bd-theme-toggle class="btn btn-outline-primary btn-sm rounded-pill"></bd-theme-toggle>

<!-- 6-Digit OTP / PIN Input -->
<bd-otp length="6"></bd-otp>

<!-- 5-Star Rating Component -->
<bd-rating value="4" max="5"></bd-rating>

Registration & Usage

When loading boodoo.js or calling registerCustomElements() in ES modules, all custom elements register automatically with the browser's customElements registry:

import { registerCustomElements } from 'boodoo/dist/js/boodoo.esm.js';

// Automatically defines <bd-theme-toggle>, <bd-otp>, <bd-rating>
registerCustomElements();