@monu2201/yantra-ui

Yantra UI — Service Yantra's framework-neutral web-components design system, shipped as a single self-contained package: the Stencil-built components (sy-*), the lazy loader, and the design tokens (--sy-* CSS custom properties).

Components are standard Custom Elements, so they work in plain HTML, React, Vue, Svelte, Angular, or any framework. Icons are inlined into the component bundles; the only stylesheet you need is the tokens layer.

Install

npm i @monu2201/yantra-ui

Usage

1. Load the tokens (required)

The components style themselves entirely from --sy-* custom properties. Import the tokens stylesheet once at your app root:

import "@monu2201/yantra-ui/tokens.css";

or in HTML:

<link rel="stylesheet" href="node_modules/@monu2201/yantra-ui/dist/tokens/tokens.css" />

2. Register the components

Bundler (Vite, webpack, Next, Nuxt, …):

import { defineCustomElements } from "@monu2201/yantra-ui/loader";
defineCustomElements();

Then use them anywhere:

<sy-button variant="primary">Get started</sy-button>
<sy-icon name="check" label="Done"></sy-icon>

Direct import of individual elements (tree-shakeable):

import { SyButton } from "@monu2201/yantra-ui";
customElements.define("sy-button", SyButton);

CDN (no build step):

<script type="module"
  src="https://unpkg.com/@monu2201/yantra-ui/dist/core/service-yantra-core/service-yantra-core.esm.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@monu2201/yantra-ui/tokens.css" />

Design tokens in JS

import { tokens } from "@monu2201/yantra-ui/tokens";

What's in the box

| Path | Contents | | --- | --- | | . | Web-component classes + dist/core bundle (ESM + CJS + custom-elements), full TypeScript types | | ./loader | defineCustomElements() lazy loader | | ./tokens.css | The --sy-* design-token layer (light-mode, Coinbase-Blue accent) | | ./base.css | Base reset/utility layer | | ./tokens | Tokens as a JS/TS module (tokens.json values) | | index.html | The full self-contained design-system reference & component gallery — open it directly | | design-system.md | The complete token + component spec | | ACCESSIBILITY.md | Accessibility posture (WCAG 2.1 AA, axe-clean) |

Notes

• Light-mode only, single brand accent (Coinbase Blue #0052ff) — a deliberate design constraint.
• React/Vue typed wrapper packages are published separately; this package ships the framework-neutral custom elements, which are fully usable from React and Vue directly.