Components

The Neptune Odyssey gallery

Every component — live, interactive and copy-ready. Pick a brand, mode and direction below and the whole gallery re-skins instantly. The same elements ship on Flutter, Web, React, Vue, Svelte and React Native.

Brand Mode Direction

Actions

Button

M3 Expressive pill button with five emphasis variants.

variant disabled

New transfer

Elevated

Tonal

Outlined

Text

<npt-button variant="filled">New transfer</npt-button>

Icon button

48dp circular action with standard, filled, tonal and outlined variants; toggles via selected.

variant selected disabled

★

⌕

⋯

<npt-icon-button variant="tonal" label="Favourite">★</npt-icon-button>

FAB

Primary-container floating action button; three sizes and an extended label.

size extended disabled

＋

<npt-fab extended label="Compose">＋</npt-fab>

Segmented button

Connected single- or multi-select group of npt-segmented-options.

multi-select

Day

Week

Month

<npt-segmented-button>
  <npt-segmented-option value="day" selected>Day</npt-segmented-option>
  <npt-segmented-option value="week">Week</npt-segmented-option>
  <npt-segmented-option value="month">Month</npt-segmented-option>
</npt-segmented-button>

Chip

Compact action/filter token. filter shows a ✓ when selected; input shows a removable ✕.

variant selected disabled

Savings

Cards

Add note

Beneficiary

<npt-chip variant="filter" selected>Savings</npt-chip>

Selection controls

Checkbox

Tri-state checkbox: checked, indeterminate or unchecked.

checked indeterminate disabled

Paperless statements

Select all accounts

Marketing emails

<npt-checkbox checked>Paperless statements</npt-checkbox>

Radio

Single-choice control; group via a shared name.

disable last

Basic

Plus

Pro

<npt-radio name="plan" value="basic" checked>Basic</npt-radio>
<npt-radio name="plan" value="plus">Plus</npt-radio>

Switch

On/off toggle with a spring thumb.

checked disabled

<npt-switch checked label="Notifications"></npt-switch>

Slider

Range input with a live value bubble.

disabled

<npt-slider min="0" max="100" value="40" step="5" label="Transfer amount"></npt-slider>

Communication & feedback

Progress

Linear or circular indicator; omit value (or set indeterminate) for the looping state.

variant indeterminate

<npt-progress variant="linear" value="62"></npt-progress>
<npt-progress variant="circular" indeterminate></npt-progress>

Badge

Small count/status pill with primary, success, error and neutral tones.

tone

99+

<npt-badge tone="error">12</npt-badge>

Inline surface-level message with leading and actions slots.

edit text via the field

<npt-banner text="A new statement is available.">
  <span slot="leading">🛈</span>
  <npt-button variant="text">Dismiss</npt-button>
  <npt-button variant="tonal">View</npt-button>
</npt-banner>

Wraps a trigger and reveals its label on hover or focus.

hover or focus the buttons

⧉

↗

<npt-tooltip label="Copy IBAN">
  <npt-icon-button variant="tonal" label="Copy">⧉</npt-icon-button>
</npt-tooltip>

Snackbar

Inverse-surface toast with an optional action slot. Opens via the open attribute.

Show snackbar

Undo

<npt-snackbar message="Transfer sent" open>
  <npt-button variant="text">Undo</npt-button>
</npt-snackbar>

Containers & overlays

Card

Brand-shaped surface: standard, elevated, tonal or the translucent glass material.

variant

Spending insights

You spent 12% less on dining this month.

Elevated

Raised surface for emphasis.

<npt-card variant="elevated">
  <h3>Spending insights</h3>
  <p>You spent 12% less on dining this month.</p>
</npt-card>

Dialog

Scrim + centred surface with focus-trap. ESC and backdrop close; actions go in the actions slot.

Open dialog

The dialog overlays the page when opened.

<npt-dialog open headline="Confirm transfer">
  Send LYD 250.00 to Mona K.?
  <span slot="actions">
    <npt-button variant="text" data-close>Cancel</npt-button>
    <npt-button variant="filled" data-close>Send</npt-button>
  </span>
</npt-dialog>

Send LYD 250.00 to Mona K.? This can’t be undone.

Cancel

Send

Bottom sheet

Bottom-anchored sheet with a drag affordance and scrim. Backdrop / ESC close.

Open bottom sheet

The sheet slides up from the bottom edge.

<npt-bottom-sheet open>
  <h3>Choose an account</h3>
  <npt-list>…</npt-list>
</npt-bottom-sheet>

Choose an account

→

Anchored popover of npt-menu-items. Place inside a positioned ancestor.

<div style="position:relative">
  <npt-button variant="tonal">Account ⌄</npt-button>
  <npt-menu open>
    <npt-menu-item>Profile</npt-menu-item>
    <npt-menu-item disabled>Admin</npt-menu-item>
  </npt-menu>
</div>

Lists & layout

List

npt-list with npt-list-item rows; items can be interactive and carry leading/trailing slots.

interactive

→

<npt-list>
  <npt-list-item interactive headline="Mona Karim" supporting="Beneficiary">
    <npt-avatar slot="leading" initials="MK" size="sm"></npt-avatar>
    <span slot="trailing">→</span>
  </npt-list-item>
</npt-list>

Divider

Hairline rule; inset indents it on both logical sides.

inset

Above the rule

Below the rule

<npt-divider inset></npt-divider>

Tabs

npt-tabs with npt-tab children; clicking sets the active tab and slides the indicator.

click a tab to switch

Overview

Transactions

Statements

<npt-tabs>
  <npt-tab active>Overview</npt-tab>
  <npt-tab>Transactions</npt-tab>
</npt-tabs>

Accordion

npt-accordion with expandable npt-accordion-item sections (native details/summary).

click a header to expand

A portable NO1- string that reproduces a full theme across every framework.

Yes — every component uses logical properties and mirrors automatically.

Flutter, Web, React, Vue, Svelte and React Native.

<npt-accordion>
  <npt-accordion-item open summary="What is a brandprint?">A portable NO1- string…</npt-accordion-item>
</npt-accordion>

Avatar

Initials or image avatar in three sizes.

size

<npt-avatar initials="MK" size="lg" label="Mona Karim"></npt-avatar>

Navigation

App bar

Compact title bar with leading and trailing slots.

leading + trailing slots

☰

⌕

<npt-app-bar title="Accounts">
  <npt-icon-button slot="leading" label="Menu">☰</npt-icon-button>
  <npt-icon-button slot="trailing" label="Search">⌕</npt-icon-button>
</npt-app-bar>

Top app bar

M3 top app bar; medium and large stack a bigger headline below the action row.

variant

<npt-top-app-bar title="Transfers" variant="large">
  <npt-icon-button slot="leading" label="Back">←</npt-icon-button>
</npt-top-app-bar>

Mobile bottom navigation built from npt-nav-items; active shows the indicator pill.

click an item to activate

<npt-nav-bar>
  <npt-nav-item label="Home" active>⌂</npt-nav-item>
  <npt-nav-item label="Cards">▭</npt-nav-item>
</npt-nav-bar>

Nav rail

Desktop/tablet side rail; the vertical sibling of the nav bar, reusing the same items.

click an item to activate

＋

⌂

▭

⇄

⋯

<npt-nav-rail>
  <npt-fab slot="leading" label="Compose">＋</npt-fab>
  <npt-nav-item label="Home" active>⌂</npt-nav-item>
</npt-nav-rail>

Inputs

Text field

Outlined M3 field; set error for the invalid treatment. Logical padding mirrors in RTL.

show error

<npt-text-field label="IBAN" placeholder="LY.." error="Invalid IBAN"></npt-text-field>

Financial

Balance card

The dashboard balance hero; hero enables the brand gradient surface.

hero gradient

<npt-balance-card hero label="Available balance"
  amount="12,480.50" currency="LYD" account="•••• 4821"></npt-balance-card>

Transaction row

A statement line with tabular figures; credit tints the amount with the success colour.

credit

<npt-transaction-row title="Salary" subtitle="Today · Transfer"
  amount="+3,200.00" currency="LYD" credit></npt-transaction-row>

Money inputs

Amount input

Large amount entry with a currency affix and big tabular figures. Sanitises to digits + one decimal point.

disabled

<npt-amount-input currency="LYD" value="1250.00" placeholder="0.00"></npt-amount-input>

Currency field

Labelled outlined money field with a trailing currency code and a helper/error line.

show error disabled

<npt-currency-field label="Amount" value="250.00" currency="LYD"
  helper="Available 12,480.50"></npt-currency-field>

IBAN field

Groups the IBAN into blocks of four as you type and reflects ISO 7064 (mod-97) valid / invalid state.

type a Libyan IBAN to see validation

<npt-iban-field label="IBAN" country="LY"></npt-iban-field>

OTP input

Separate single-character boxes with auto-advance, backspace-rewind and paste-fill. masked hides the digits.

length masked disabled

<npt-otp-input length="6"></npt-otp-input>

PIN input

Like the OTP input but always masked with dots; defaults to four boxes.

length disabled

<npt-pin-input length="4"></npt-pin-input>

Amount keypad

Numeric keypad (0–9, decimal point, backspace). Each press updates a running value; great paired with the amount input.

running value: 0 disabled

<npt-amount-keypad value=""></npt-amount-keypad>

Cards

Card art

Payment-card visual on the brand gradient. variant switches physical / virtual / frozen; the brand slot holds the scheme mark.

variant

VISA

<npt-card-art holder="A. KELLER" last4="4821" expiry="08/29" scheme="VISA" variant="physical">
  <span slot="brand"></span>
  <script>el.querySelector('[slot=brand]').innerHTML = Neptune.brandMarkSvg("visa", { height: 22 });</script>
</npt-card-art>

Card row

Saved-card list item with a leading scheme mark and trailing chevron. interactive makes the whole row a button.

interactive

<npt-card-row interactive label="Salary card" last4="4821" scheme="VISA">
  <span slot="brand"></span>
</npt-card-row>

Add card

Dashed call-to-action tile with a leading +; behaves as a button and emits an add event.

disabled

Add a new card

<npt-add-card>Add a new card</npt-add-card>

Card controls

Row of toggle actions (Freeze, Limits, Details, PIN). frozen flips the first action to Unfreeze.

frozen

<npt-card-controls></npt-card-controls>

Money movement

Stepper

Horizontal progress indicator with numbered nodes; drive it from steps + active, or with light-DOM npt-step children.

active

Amount

Review

Done

<npt-stepper active="1" steps="Amount,Review,Done"></npt-stepper>

Transfer review

Key/value summary with a highlighted total footer. Rows come from a JSON rows attribute.

summary of a pending transfer

<npt-transfer-review
  rows='[{"label":"To","value":"Mona Karim"},{"label":"Fee","value":"0.00 LYD"}]'
  total="1,250.00" currency="LYD"></npt-transfer-review>

Success

Success hero with a spring-in check (honours reduced motion); actions go in the actions slot.

terminal confirmation screen

Done

View receipt

<npt-success title="Transfer sent" message="Your money is on the way.">
  <npt-button slot="actions" variant="filled">Done</npt-button>
</npt-success>

Receipt

Receipt card with a dashed tear divider and a coloured status dot; extra rows via the default slot.

post-payment receipt

<npt-receipt merchant="Acme Store" amount="42.00" currency="LYD"
  date="27 Jun 2026" status="Completed" reference="TX-9931"></npt-receipt>

Beneficiary tile

Initials avatar + name + masked account + trailing chevron. favorite adds a star badge.

favorite

<npt-beneficiary-tile name="Mona Karim" account="•••• 4821" favorite></npt-beneficiary-tile>

Method row

Transfer-method row with a leading icon slot, title/subtitle and a Recommended badge.

recommended

🏦

⚡

<npt-method-row title="Bank transfer" subtitle="1–2 business days" recommended>
  <span slot="icon">🏦</span>
</npt-method-row>

Data & insight

Data table

Dense table with a sticky header, zebra rows and row hover. Drive it from columns + rows, or project a light-DOM <table>.

dense sticky header

<npt-data-table caption="Recent activity" sticky
  columns='[{"key":"name","label":"Merchant"},{"key":"amt","label":"Amount","numeric":true}]'
  rows='[{"name":"Coffee Bar","amt":"-4.50"}]'></npt-data-table>

Stat card

A metric tile; delta colours by leading sign. Drop an npt-sparkline into the chart slot.

label / value / unit / delta + spark

<npt-stat-card label="Revenue" value="48,210" unit="LYD" delta="+12.4%">
  <npt-sparkline slot="chart" points="3,5,4,7,8"></npt-sparkline>
</npt-stat-card>

Sparkline

Inline SVG line, no axes. Stroke inherits currentColor (primary by default).

comma-separated points

<npt-sparkline points="3,5,4,7,8,6,9" label="7-day"></npt-sparkline>

Donut

SVG ring; each segment role maps to an allow-listed M3 colour. Centre content via the center slot.

segments drive the ring

62%

Spend

<npt-donut thickness="8"
  segments='[{"value":62,"role":"primary"},{"value":38,"role":"surface-container-highest"}]'>
  <strong slot="center">62%</strong>
</npt-donut>

Limit meter

Labelled progress meter (0–100). warn flips near-full (≥90%) to the error colour.

value warn

<npt-limit-meter label="Card spend" value="82" amount="820 / 1,000 LYD" warn></npt-limit-meter>

Trend

Small up/down chip. down (or a leading − in value) uses error, else success.

down

<npt-trend value="+2.4%"></npt-trend>
<npt-trend value="-1.1%" down></npt-trend>

Feedback & status

Skeleton

Shimmer placeholder. text repeats lines bars; circle / rect are single shapes. Reduced motion → static.

variant

<npt-skeleton variant="text" lines="3"></npt-skeleton>
<npt-skeleton variant="circle" width="48px"></npt-skeleton>

Empty state

Centred placeholder for empty collections; icon and actions slots.

title + body + slots

📭

New transfer

<npt-empty-state title="No transactions yet" body="…">
  <span slot="icon">📭</span>
  <npt-button slot="actions" variant="filled">New transfer</npt-button>
</npt-empty-state>

Alert

Inline tonal banner with an accent bar; dismissible shows a close button. Tones: info, success, warning, error.

tone dismissible

Your statement for May is ready to download.

<npt-alert tone="success" title="Done" dismissible>Transfer completed.</npt-alert>

Status chip

Status pill with a coloured dot. Statuses: success, pending, failed, info, neutral.

status

Settled

Pending

Failed

In review

<npt-status-chip status="success">Settled</npt-status-chip>

Toast

Fixed bottom toast that auto-hides after timeout ms (0 disables). Stack several inside an npt-toast-host.

tone

Show toast

The toast rises from the bottom edge and auto-dismisses.

<npt-toast-host>
  <npt-toast open message="Saved" tone="success" timeout="4000">
    <npt-button slot="action" variant="text">Undo</npt-button>
  </npt-toast>
</npt-toast-host>

Undo

Corporate & back-office

Approval item

A maker-checker queue item with Approve / Reject buttons. status hides the buttons and reflects the outcome.

status

<npt-approval-item title="Vendor payment — ACME" amount="48,200.00"
  currency="LYD" maker="Mona Khaled" status="pending"></npt-approval-item>

Batch card

A bulk-payment batch summary with validated / warnings / errors counts and an action slot for the CTA.

payroll batch summary

Submit batch

<npt-batch-card filename="payroll-jun.csv" totalAmount="1,204,800.00" currency="LYD"
  payeeCount="312" requiredApprovals="2" validated="308" warnings="3" errors="1">
  <npt-button slot="action" variant="filled">Submit batch</npt-button>
</npt-batch-card>

Audit row

A compact audit-log line with a leading status dot, actor, action, target and timestamp.

audit trail rows

<npt-audit-row actor="Mona Khaled" action="approved payment"
  target="#PAY-3192" time="2026-06-27 14:02"></npt-audit-row>

User row

A user-admin row: avatar/initials, name + email, role chip and an actions slot. suspended dims it and shows a chip.

suspended

⋯

<npt-user-row name="Mona Khaled" email="mona@bank.ly" role="Checker" initials="MK">
  <npt-icon-button slot="actions" label="More">⋯</npt-icon-button>
</npt-user-row>

Permission toggle

Label + description + a switch-like toggle. Emits change when toggled.

checked disabled

<npt-permission-toggle label="Approve payments"
  description="Allow this role to release outgoing transfers" checked></npt-permission-toggle>

Workflow status

A compact multi-step status indicator; active is the zero-based current step. Earlier steps render complete.

active

<npt-workflow-status steps="Submitted,Checked,Approved" active="1"></npt-workflow-status>

Shell & layout

App shell

The application frame: a sticky header, an inline-start nav sidebar (collapses via rail) and the content region.

rail (collapse nav)

Neptune Bank

🔔

▦

⇄

▭

<npt-app-shell>
  <header slot="header">…</header>
  <npt-side-nav slot="nav">…</npt-side-nav>
  …content…
</npt-app-shell>

The page-level masthead. Display-font title with an optional breadcrumb above and actions inline-end.

title + subtitle + actions

Home · Accounts

New account

<npt-page-header title="Accounts" subtitle="All your balances">
  <span slot="breadcrumb">Home · Accounts</span>
  <npt-button slot="actions" variant="filled">New account</npt-button>
</npt-page-header>

Section

A titled content section with an optional supporting description and a default slot for the body.

title + description + body

Section bodies hold any content — lists, cards, tables.

<npt-section title="Recent activity" description="Last 30 days">
  …body…
</npt-section>

Side nav

The vertical sidebar nav built from npt-side-nav-items. Clicking one activates it exclusively; icon and leading slots.

click an item to activate

▦

⇄

▭

⚙

<npt-side-nav>
  <npt-side-nav-item label="Dashboard" active><span slot="icon">▦</span></npt-side-nav-item>
  <npt-side-nav-item label="Payments"><npt-badge slot="leading">3</npt-badge></npt-side-nav-item>
</npt-side-nav>

Search field

Search input with a leading magnifier and a clear control. Emits a debounced search event.

disabled

<npt-search-field placeholder="Search accounts"></npt-search-field>

A horizontal toolbar surface with start / center / end regions; start & end mirror in RTL.

start / center / end slots

☰

Transfers

⌗

⋯

<npt-toolbar>
  <npt-icon-button slot="start" label="Menu">☰</npt-icon-button>
  <span slot="center">Transfers</span>
  <npt-icon-button slot="end" label="More">⋯</npt-icon-button>
</npt-toolbar>

Wallet & pay

Quick actions

A responsive grid of action tiles built from npt-quick-actions; clicking one emits select with its label.

last picked: —

↑

↓

🧾

＋

<npt-quick-actions>
  <npt-quick-action label="Send"><span slot="icon">↑</span></npt-quick-action>
  <npt-quick-action label="Request"><span slot="icon">↓</span></npt-quick-action>
</npt-quick-actions>

Merchant row

A transaction row with a logo slot (falls back to initials), category and trailing amount/time. pending dims it.

pending

<npt-merchant-row name="Acme Groceries" category="Groceries"
  amount="-42.00" currency="LYD" time="14:32"></npt-merchant-row>

Voucher card

A coupon visual with punched dashed-notch edges; value stub, title, code chip and expiry.

promo / loyalty voucher

Valid on wallet top-ups over 50 LYD.

<npt-voucher-card title="20% off" value="−20%" code="NEPTUNE20" expiry="Exp 31 Dec">
  Valid on wallet top-ups over 50 LYD.
</npt-voucher-card>

QR pay

Payment panel: a bordered qr area, the amount + merchant, and a primary action slot.

scan-to-pay panel

Pay 42.00 LYD

<npt-qr-pay amount="42.00" currency="LYD" merchant="Acme Store">
  <img slot="qr" src="…" alt="QR code" />
  <npt-button slot="action" variant="filled">Pay</npt-button>
</npt-qr-pay>

Top-up row

A selectable top-up option: icon slot + provider label + trailing chevron (flips in RTL).

disable last

📱

🏦

🎟

<npt-topup-row provider="Vodafone Cash"><span slot="icon">📱</span></npt-topup-row>

Tier badge

A small premium-membership pill. Tones: gold, silver, primary, neutral.

tone

<npt-tier-badge tier="Gold" tone="gold"></npt-tier-badge>

The Neptune Odyssey gallery

Button

Icon button

FAB

Segmented button

Chip

Checkbox

Radio

Switch

Slider

Progress

Badge

Banner

Tooltip

Snackbar

Card

Spending insights

Elevated

Dialog

Bottom sheet

Choose an account

Menu

List

Divider

Tabs

Accordion

Avatar

App bar

Top app bar

Nav bar

Nav rail

Text field

Balance card

Transaction row

Amount input

Currency field

IBAN field

OTP input

PIN input

Amount keypad

Card art

Card row

Add card

Card controls

Stepper

Transfer review

Success

Receipt

Beneficiary tile

Method row

Data table

Stat card

Sparkline

Donut

Limit meter

Trend

Skeleton

Empty state

Alert

Status chip

Toast

Approval item

Batch card

Audit row

User row

Permission toggle

Workflow status

App shell

Page header

Section

Side nav

Search field

Toolbar

Quick actions

Merchant row

Voucher card

QR pay

Top-up row

Tier badge