Installation

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

Release@salsafx/uiv4.62.3

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 React / Vue / Svelte

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

// React
import '@salsafx/ui';

export function Dashboard() {
    return (
        <fx-radial-gauge value={75} label="Oil Pressure" unit="BAR" />
    );
}

<!-- Vue -->
<script setup>
import '@salsafx/ui';
</script>

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

---

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;