Skip to content
UI

Install and use

Keep the GitHub Packages scope mapping in the consuming repository:

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

Configure authentication in the user’s ~/.npmrc. Never commit this auth entry or a token value to the consuming repository:

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

Load a classic GitHub personal access token with read:packages and repository access into NODE_AUTH_TOKEN through the local secret manager. A scope mapping or environment variable by itself is not an npm/pnpm authentication contract.

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

Import components from the public package surface and import the stylesheet once at the app root:

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

Theme controls

Section titled “Theme controls”

ThemeToggle switches light and dark mode. AccentColorPicker lets a user move a pointer through a color palette and updates the shared accent tokens in real time; it also supports arrow keys, a Hue spectrum, and validated hexadecimal entry applied with Enter. Its swatches show the exact selected color while the same hexadecimal value is applied to --accent; supporting foreground, hover, soft-surface, and focus tokens are derived to preserve readable UI.

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


<AccentColorPicker />
<ThemeToggle />

Use applyToRoot={false} or persist={false} when the consuming application owns theme state. The lower-level applyAccentColor, setAccentColor, and resetAccentColor helpers are exported from the same public entrypoint.

Rules

Section titled “Rules”
  • Do not deep-import from @lemn-ltd/ui/src, @lemn-ltd/ui/dist, or component internals.
  • Do not import Radix, cmdk, or sonner directly in product apps for shared UI behavior.
  • Add reusable UI here first, publish a new package version, then update consumers.
  • Use the showcase to verify component behavior before adoption.