A modern web component library built with Lit for HOOPS applications. This package provides a comprehensive set of reusable UI components including buttons, trees, dropdowns, layouts, and more—all designed to work seamlessly across frameworks or as vanill
A modern web component library built with Lit for HOOPS applications. This package provides a comprehensive set of reusable UI components including buttons, trees, dropdowns, layouts, and more—all designed to work seamlessly across frameworks or as vanilla web components.
- Framework-agnostic web components
- Tree-shakable ES modules
- CSS custom properties for theming
``bash`
npm install @ts3d-hoops/ui-kit
`html`
Start Viewer
`ts
import '@ts3d-hoops/ui-kit/button';
import '@ts3d-hoops/ui-kit/tree';
import '@ts3d-hoops/ui-kit/icons';
// Use the components in your HTML templates
const container = document.getElementById('app')!;
container.innerHTML =
;`
Import only what you need:
`ts
// Individual components
import '@ts3d-hoops/ui-kit/button';
import '@ts3d-hoops/ui-kit/tree';
import '@ts3d-hoops/ui-kit/icons';
// Or specific icon sets
import '@ts3d-hoops/ui-kit/icons/arrow-icons';
import '@ts3d-hoops/ui-kit/icons/ui-icons';
// Or the full library (not recommended for production)
import '@ts3d-hoops/ui-kit';
`
Components use CSS custom properties for consistent theming. Define these in your CSS:
`css
:root {
/ Colors /
--hoops-neutral-foreground: #ffffff;
--hoops-neutral-foreground-active: #f0f0f0;
--hoops-neutral-background-hover: #303030cc;
--hoops-accent-foreground: #0078d4;
--hoops-accent-foreground-active: #106ebe;
/ Typography /
--hoops-body-font: 'Segoe UI', system-ui, sans-serif;
/ Sizing /
--hoops-xl-icon-button-content-size: 2.6rem;
--hoops-md-icon-button-content-size: 1.6rem;
--hoops-sm-icon-button-content-size: 1.2rem;
/ SVG /
--hoops-svg-stroke-color: currentColor;
}
`
`html`
Button text
`html`
`html`
Components dispatch standard DOM events:
`ts
// Button clicks
document.querySelector('hoops-button')!.addEventListener('click', (e) => {
console.log('Button clicked');
});
// Tree selection changes
document.querySelector('hoops-tree')!.addEventListener('selectionChange', (e) => {
console.log('Selected:', e.detail);
});
`
The components work in any framework that supports web components:
- Vanilla JS/HTML — Import and use directly
- React — Use @ts3d-hoops/ui-kit-react or add type declarations for JSX support
- Vue — Use as custom elements
- Angular — Add to CUSTOM_ELEMENTS_SCHEMA
- Svelte — Use as web components
Full TypeScript definitions are included. Components are strongly typed with proper event interfaces and property types.
`ts`
import type { HoopsButton } from '@ts3d-hoops/ui-kit/button';
import type { TreeSelectionChangeEvent } from '@ts3d-hoops/ui-kit/tree';
- Modern browsers with web component support
- ES2020+ environments
- Works with all major bundlers (Vite, Webpack, Rollup, esbuild)
- @ts3d-hoops/ui-kit-react — React-specific wrappers and hooks@ts3d-hoops/web-viewer-components
- — Viewer-specific UI components@ts3d-hoops/web-viewer` — The main HOOPS Web Viewer
-
Commercial license. For evaluation or production licensing, contact Tech Soft 3D.