Web

Orbit para web se publica como @dragbuilder-io/orbit en npm (npm.pkg.github.com), un registro privado de GitHub Packages. Necesitás un GitHub Personal Access Token (PAT) con scope read:packages para instalarlo:

1. En GitHub, andá a tu foto de perfil → Settings → Developer settings → Personal access tokens → Tokens (classic).
2. Generate new token (classic).
3. Marcá el scope read:packages (no hace falta ningún otro).
4. Generá el token y copialo — GitHub solo lo muestra una vez.

Ese token es el GH_PACKAGES_TOKEN de abajo — guardalo como variable de entorno, nunca hardcodeado en el repo (npm no necesita un username aparte para este registro, solo el token).

Agregá el registro @dragbuilder-io a tu .npmrc (local y en CI):

@dragbuilder-io:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=${GH_PACKAGES_TOKEN}

Instalá el paquete — design-tokens viene como dependencia transitiva, no hace falta instalarlo aparte:

npm install @dragbuilder-io/orbit@^0.31.0

Registrá el custom element del componente que quieras usar con un <script> de cliente. Los estilos y la tipografía de design-tokens se inyectan solos (requiere un bundler tipo Vite, que ya usan Astro/Storybook) — no hay que linkear ningún CSS a mano:

<script type="module">
  import "@dragbuilder-io/orbit/orbit-button.js";
</script>

Cada componente es su propio archivo (orbit-*.js) — importá solo los que uses. Si preferís no importar uno por uno, import "@dragbuilder-io/orbit" (sin subpath) los registra todos de una — cuesta más porque trae el JS de los ~30 componentes aunque uses dos, y perdés el tree-shaking de los imports por archivo:

<script type="module">
  import "@dragbuilder-io/orbit";
</script>

Con eso instalado, ver Componentes para el catálogo completo y ejemplos de uso de cada uno.