Ir al contenido

Instalar y usar

Deja en el repositorio consumidor solamente el mapeo del scope de GitHub Packages:

@lemn-ltd:registry=https://npm.pkg.github.com

Configura la autenticacion en el ~/.npmrc del usuario. Nunca commitees esta entrada de auth ni el valor del token en un repositorio:

~/.npmrc
//npm.pkg.github.com/:_authToken=${NODE_AUTH_TOKEN}

Carga mediante el gestor local de secrets un personal access token clasico de GitHub con read:packages y acceso al repositorio en NODE_AUTH_TOKEN. El mapeo del scope o la variable de entorno por separado no autentican npm/pnpm.

Terminal window
pnpm add @lemn-ltd/ui@<published-version>

Importa componentes solo desde la superficie publica e importa el stylesheet una vez en la raiz de la app:

import { Button, Card, componentCatalog } from "@lemn-ltd/ui";
import "@lemn-ltd/ui/styles.css";

ThemeToggle cambia entre modo light y dark. AccentColorPicker permite mover un puntero por una paleta y actualiza los tokens compartidos de accent en tiempo real; tambien soporta flechas del teclado, un espectro de Hue y entrada hexadecimal validada que se aplica al presionar Enter. Sus indicadores muestran el color exacto seleccionado y ese mismo valor se aplica a --accent; los tokens de texto, hover, superficie suave y foco se derivan para conservar contraste legible.

import { AccentColorPicker, ThemeToggle } from "@lemn-ltd/ui";
<AccentColorPicker />
<ThemeToggle />

Usa applyToRoot={false} o persist={false} cuando la aplicacion consumidora controle el estado del tema. Los helpers applyAccentColor, setAccentColor y resetAccentColor se exportan desde el mismo entrypoint publico.

  • No hagas deep imports desde @lemn-ltd/ui/src, @lemn-ltd/ui/dist o internals.
  • No importes Radix, cmdk o sonner directamente en productos para UI compartida.
  • Agrega UI reutilizable aqui primero, publica una nueva version y actualiza consumidores.
  • Usa el showcase para verificar comportamiento.