Get started

Build with Neptune Odyssey

A white-label banking design system by Neptune.Fintech. One Material 3 + M3 Expressive core; theme any app three ways and get the identical result on Flutter, Web, React, Vue, Svelte, React Native and Laravel/Blade.

0 · Scaffold a starter FASTEST

One command scaffolds a themed app — provider wired, a sample dashboard screen, styles imported and a brandprint set — for any framework. No config:

npm create @neptune.fintech/neptune@latest my-bank

or run it directly, picking the framework and brand up front:

npx @neptune.fintech/create-neptune my-bank --framework react --brand triton

Frameworks: web · react · vue · svelte · react-native · flutter. Brands: neptune · triton · nereid · proteus (or paste a NO1-… brandprint later). Then cd my-bank, install, and run. Prefer to wire it yourself? Keep going below.

1 · Install

Everything is published on npm under @neptune.fintech. Pick your stack:

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

React

npm i @neptune.fintech/react-ui

Vue 3

npm i @neptune.fintech/vue-ui vue

Svelte

npm i @neptune.fintech/svelte-ui svelte

React Native

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

Icons

npm i @neptune.fintech/icons

Flutter

flutter pub add neptune_flutter_ui

Laravel / Blade

composer require neptune-fintech/laravel-ui

Vendors the web kit's built JS/CSS — no Node/npm step. Not yet on Packagist, install via git/path today.

Sound (Flutter, optional)

flutter pub add neptune_sound_kit

Synthesized feedback chimes wired to NptFeedback.onSoundCue. Not yet published — depend via git/path.

2 · Theme it — three ways, one surface

Every library accepts a reference brand id, a config object, or a portable brandprint string. The same NO1-… string produces the identical theme everywhere — build one in the theme builder.

// web · svelte · vue · react native — same surface
import { applyTheme } from "@neptune.fintech/web-ui";
import "@neptune.fintech/web-ui/styles.css";

applyTheme(document.documentElement, "triton", { mode: "system", dir: "auto" }); // 1 · brand id
applyTheme(root, "NO1-AYB4AK…");                                  // 2 · brandprint
applyTheme(root, { primary:{L,C,H}, corners:{…}, motion:"calm-graceful" }); // 3 · config

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

3 · Use components

Drop in standards-based custom elements — themed automatically by the CSS variables:

import { registerAll } from "@neptune.fintech/web-ui"; registerAll();

<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>