Get started

Jangle UI components are framework-neutral Web Components. Install the packages from Jangle UI's private Cloudsmith registry, load the token stylesheet once, and explicitly register each component that your application uses.

Get package access

The documentation and public Storybook are available without signing in. Your Jangle UI account is only for managing your subscription and private package credentials.

With an active package subscription, open your account, create a package credential, and copy the registry configuration when it appears. The raw credential is shown once.

Configure the Cloudsmith registry

The account supplies two lines in this form:

@jangle-ui:registry=https://npm.cloudsmith.io/jangle/jangle-production/
//npm.cloudsmith.io/jangle/jangle-production/:_authToken=<account-issued-download-token>

Copy the exact two lines shown by your account into your user-level npm configuration or an ignored project .npmrc. The released-package consumer configuration also adds always-auth=true as a third line. Do not commit the download token. For CI and hosted builds, store the same configuration values in that provider's secret store rather than in source control.

Install the released packages

Install Components and Tokens with your package manager:

pnpm add @jangle-ui/components @jangle-ui/tokens

Add @jangle-ui/icons as a direct dependency only when application code imports its catalog, provider, or application-icon APIs.

Load and register components

Import the generated token stylesheet once at the application boundary. Registration imports are browser side effects, so load the explicit register entry for each custom-element tag you use:

import '@jangle-ui/tokens/tokens.css';
import '@jangle-ui/components/icon/register';
import '@jangle-ui/components/button/register';

These bare package and CSS imports assume a browser application built with a bundler such as Vite. If your browser application does not have a bundling step, add one before using these imports.

The elements then work in ordinary HTML:

<jangle-button intent="brand" treatment="strong" icon="save"> Save changes </jangle-button>

<span>
  <jangle-icon name="circle-check"></jangle-icon>
  Payment complete
</span>

The class-only exports, @jangle-ui/components/button and @jangle-ui/components/icon, do not register custom elements. Use those entries when your application owns registration itself.

Set the appearance

The default token stylesheet follows the operating system's Light or Dark preference. When your application owns an appearance control, set data-jangle-appearance="light" or data-jangle-appearance="dark" on the document root or a [data-jangle-theme] subtree. Remove the attribute to return to the system preference.

See Use design tokens for the complete theme configuration options.

Continue with the component guides

Use Button for actions, waiting states, and form submission.
Use Icon for names, sizing, color, and accessible use.

The external released-package verification app shows the published Button and Icon working from the protected registry. Its application shell, member table, and form fields are custom application code, not additional Jangle UI components. Treat it as an integration check rather than a polished starter or complete component catalog.