Installation

SalsaFX is distributed as the npm package @salsafx/ui.

Release@salsafx/uiv16.62.0

Commercial edition

Looking for Pro features? See SalsaFX Pro.

---

Prerequisites

• Node.js 18 or later
• npm, pnpm, yarn, or bun
• A project using Lit (peer dependency) or any framework that supports Web Components

---

Installation

1. Install the package

   npm

   npm install @salsafx/ui

   pnpm

   pnpm add @salsafx/ui

   yarn

   yarn add @salsafx/ui

   bun

   bun add @salsafx/ui

   After installation, your package.json will contain:

   {
       "dependencies": {
           "@salsafx/ui": "^4.11.0"
       }
   }

2. Install the peer dependency

   SalsaFX requires Lit:

   npm

   npm install lit

   pnpm

   pnpm add lit

   yarn

   yarn add lit

   bun

   bun add lit

---

Usage

Import

Register all components with a single import in your app entry (Vite, webpack, …):

import '@salsafx/ui';

Use in HTML

Once imported, the components are available as standard HTML custom elements:

<fx-radial-gauge
    value="75"
    min="0"
    max="100"
    label="Oil Pressure"
    unit="BAR"
></fx-radial-gauge>

Use in Lit / React / Solid / Vue / Svelte

SalsaFX components are standard Web Components and work in any framework:

Lit

import { LitElement, html } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import '@salsafx/ui';

@customElement('my-dashboard')
export class MyDashboard extends LitElement {
    @property({ type: Number }) value = 75;

    render() {
        return html`
            <fx-radial-gauge
                .value=${this.value}
                min="0"
                max="100"
                label="Oil Pressure"
                unit="BAR"
            ></fx-radial-gauge>
        `;
    }
}

React

import { FxRadialGauge } from '@salsafx/ui/react';

export function Dashboard() {
    return (
        <FxRadialGauge
            value={75}
            min={0}
            max={100}
            label="Oil Pressure"
            unit="BAR"
        />
    );
}

Solid

import { FxRadialGauge } from '@salsafx/ui/solid';

export function Dashboard() {
    return (
        <FxRadialGauge
            value={75}
            min={0}
            max={100}
            label="Oil Pressure"
            unit="BAR"
        />
    );
}

Vue

<script setup>
import '@salsafx/ui';
</script>

<template>
    <fx-radial-gauge
        :value="75"
        :min="0"
        :max="100"
        label="Oil Pressure"
        unit="BAR"
    />
</template>

Svelte

<script>
import '@salsafx/ui';
let value = 75;
</script>

<fx-radial-gauge
    value={value}
    min="0"
    max="100"
    label="Oil Pressure"
    unit="BAR"
/>

---

Updating

npm

npm update @salsafx/ui

pnpm

pnpm update @salsafx/ui

yarn

yarn up @salsafx/ui

bun

bun update @salsafx/ui

---

TypeScript

The package includes TypeScript declarations. No additional @types package is needed.

import type { FxRadialGauge } from '@salsafx/ui';

const gauge = document.querySelector('fx-radial-gauge') as FxRadialGauge;
gauge.value = 80;

Component wrappers with typed props are exported from @salsafx/ui/react and @salsafx/ui/solid. Intrinsic JSX types for <fx-*> custom element tags are also included.