One system,
three frameworks.

All packages are ESM-only, published under the @bion-mfe-ui scope. Install the one that matches your setup; the React and Vue adapters pull core, tokens, and icons in automatically.

Load tokens once (required)

Components read CSS variables from tokens, including inside their shadow DOM, so import the stylesheet once at your app root.

@import "@bion-mfe-ui/css/index.css"; /* tokens + reset + classes */
/* or only the variables: */
@import "@bion-mfe-ui/tokens/css";

Via CDN (no install)

For quick prototyping, load straight from a CDN; esm.sh resolves Lit for you.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@bion-mfe-ui/css/dist/index.css" />
<script type="module">
  import "https://esm.sh/@bion-mfe-ui/core/product-card";
</script>
<bion-product-card name="Auro Headset" price="Rp 349.000"></bion-product-card>

The single source of truth. A pure monochrome scale. Color encodes elevation and text hierarchy only; ink itself is the accent. Every value is a CSS variable consumed by all packages and inside shadow DOM.

Convenience wrapper over the raw SVG strings in @bion-mfe-ui/icons. Inherits color via currentColor; size and stroke are props.

Three variants: solid, outline, and icon-only. Optional trailing icon. Fires native click, no custom event needed.

Underline-on-active filter chip. The parent owns which chip is active; the chip only reports intent, so a remote drives filtering (not the design system).

Display-only star rating with optional review count. Read-only by design.

The catalog's workhorse. Owns only presentation + the favourite toggle. It never knows about a cart or currency; it emits events and lets the remote decide. Hover to reveal the add and favourite buttons.

Banner carousel: scroll-snap track of slotted children, auto-rotate, arrows that reveal on hover (dark ink, no chrome), bottom-left dots, and a scrim so dots stay legible. Slides are whatever you slot in. Hover to see arrows.

Pill stepper for cart line items. Emits the new value; the cart remote decides what a change means (e.g. remove at 0). The stepper only reports the number.

Slide-over drawer. Receives line items and pre-formatted subtotal/total strings; it never does currency math. Keeps the source of truth in the cart remote, passes strings in, reacts to events out.

Shell-owned identity chip. Purely presentational; shows who is signed in. It does no auth; the shell passes the resolved name. Initials derive automatically if omitted.