Develop

Build on any framework

The latest Neptune Odyssey components, themed by one core. The same NO1-… brandprint produces the identical theme on every platform — guaranteed by golden tests. All packages are on npm under @neptune.fintech.

Web Stable

Framework-agnostic custom elements, themed by pure CSS variables — works in any page or framework.

npm i @neptune.fintech/web-ui @neptune.fintech/tokens

import "@neptune.fintech/web-ui/styles.css";
import { applyTheme, registerAll } from "@neptune.fintech/web-ui";
registerAll();
applyTheme(document.documentElement, "triton", { mode: "system", dir: "auto" });

<npt-app-bar title="Accounts"></npt-app-bar>
<npt-balance-card hero label="Available balance" amount="12,480.50" currency="LYD"></npt-balance-card>
<npt-button variant="filled">New transfer</npt-button>

See all components →

React Stable

npm i @neptune.fintech/react-ui react

import { NeptuneProvider, useNeptuneTheme } from "@neptune.fintech/react-ui";
import "@neptune.fintech/react-ui/styles.css";

<NeptuneProvider input="triton" mode="system">
  <npt-balance-card hero amount="12,480.50" currency="LYD" />
</NeptuneProvider>

Vue 3 Stable

npm i @neptune.fintech/vue-ui vue

// vite.config: vue({ template:{ compilerOptions:{ isCustomElement: t => t.startsWith("npt-") }}})
import { NeptuneProvider, NptBalanceCard } from "@neptune.fintech/vue-ui";

<NeptuneProvider theme="triton" mode="system">
  <NptBalanceCard hero amount="12,480.50" currency="LYD" />
</NeptuneProvider>

Svelte Stable

npm i @neptune.fintech/svelte-ui svelte

<script>
  import "@neptune.fintech/svelte-ui/styles.css";
  import { theme } from "@neptune.fintech/svelte-ui";
</script>

<div use:theme={{ input: "triton", mode: "system" }}>
  <npt-balance-card hero amount="12,480.50" currency="LYD" />
</div>

React Native Stable

npm i @neptune.fintech/react-native-ui react react-native

import { NeptuneProvider, useNeptuneTheme, NeptuneBalanceCard } from "@neptune.fintech/react-native-ui";

<NeptuneProvider input="triton" mode="system">
  <NeptuneBalanceCard label="Available balance" amount="12,480.50" currency="LYD" />
</NeptuneProvider>

Flutter Stable

flutter pub add neptune_flutter_ui

MaterialApp(
  theme: NeptuneTheme.light('triton'),
  darkTheme: NeptuneTheme.dark('triton'),
  themeMode: ThemeMode.system,
  // or NeptuneTheme.fromBrandprint('NO1-…')
);

~150 themed widgets, all nine screen templates, a full onboarding-flow suite, a standalone loader family (NeptuneSpinner/NeptuneDotsLoader/ NeptunePulseLoader/NeptuneHourglassLoader) feeding NeptuneStatusMotion's success/reject morph, NeptuneSplashScreen, density modes, Arabic-Indic numerals as an independent lever, and haptic/sound feedback via NptFeedback. Try it live: the Flutter web gallery.

Laravel / Blade Stable

Blade components over the same web-kit custom elements the other frameworks wrap — vendors the built JS/CSS so a Laravel app needs no Node/npm build step for the four reference brands.

composer require neptune-fintech/laravel-ui
php artisan vendor:publish --tag=neptune-ui-assets

<html data-theme="triton" data-mode="light" dir="ltr">
  <head>
    <x-neptune::assets />
  </head>
  <body>
    <x-neptune::balance-card label="Available balance" amount="12,480.50" currency="LYD" hero />
    <x-neptune::cta arrow>Send money</x-neptune::cta>
  </body>
</html>

15 components ship today (button, cta, card, alert, badge, chip, switch, checkbox, text-field, dialog, balance-card, transaction-row, skeleton, dock/dock-item) — every other web-kit component works immediately as raw <npt-*> markup once <x-neptune::assets /> has registered it. Not yet on Packagist; install via a git/path Composer repository today (see the package README).

Tokens & brandprint

The determinism backbone — color math, the seed→palette ramp, the brandprint codec, and buildTheme().

npm i @neptune.fintech/tokens

import { buildTheme, encode, decode } from "@neptune.fintech/tokens";
const theme = buildTheme("NO1-AYB4AK…");   // brand id | config | brandprint
const print = encode(config);               // "NO1-…"  · build one in the theme builder

Open the theme builder →

Icons

npm i @neptune.fintech/icons

import { iconSvg } from "@neptune.fintech/icons";  // or <npt-icon name="card">
el.innerHTML = iconSvg("card");                    // inherits currentColor → themes automatically

Browse all icons →

Sound identity

White-label isn't only visual. neptune_sound_kit (Flutter) ships four synthesized feedback chimes wired straight into the theme's NptFeedback.onSoundCue hook — separate from the core UI package so apps that don't want sound never pay for an audio-plugin dependency. For a real bank/customer's own distinct sound identity (not the generic default), tools/sound-identity is a dev-time generator: a melodic shape + soundfont patch produces a 5-file notification/success family via FluidSynth, the sound counterpart to the visual brandprint generator.

flutter pub add neptune_sound_kit  # not yet on pub.dev — git/path dependency for now
node tools/sound-identity/generate.mjs --name "My Bank"

The determinism contract

Pinned reference palettes are exact — the resolved palette ships byte-identical in TS and Dart, so Flutter == Web by construction.
The shared OKLCH→sRGB converter reproduces them to ≤ 1 LSB (custom seeds).
The brandprint codec is byte-identical across platforms, idempotent, and tamper-rejecting — so a saved NO1-… always resolves the same.

Roadmap

Soon Kotlin Multiplatform (Compose + web).