NxSync Design System

Every component, in sync.

The complete, interactive NxSync component library — states, variants, and motion for every element. Toggle the theme; everything adapts.

Role-based
Built around the work
Coherent
One system everywhere
Adaptive
Any device, any theme
Calm
Density without noise
Trustworthy
Accessible by default
Foundations

Motion tokens

Motion is meaning, never decoration. Every component shares one easing curve and a small set of durations so the whole system feels like one hand made it.

--easecubic-bezier(.4,0,.2,1)
--dur-fast · micro140ms
--dur · transitions240ms
--dur-slow · overlays320ms
reduced-motionrespected
Actions

Buttons

Hover lightens, press dips, focus shows an Iris ring. One primary action per view.

Variants
Sizes & states
Button group & split
Actions

Icon buttons & FAB

Icon-only buttons for dense toolbars; the floating action button rotates on hover.

Inputs

Text fields

Iris focus ring, clear states, and an animated floating label. Helper text carries validation.

Standard & states
Looks good.
Enter a valid email.
Floating label · prefix · count
0/120
Password reveal
Inputs

Select & multi-select

Custom dropdown with an animated chevron and checkable options. Multi-select collects removable chips.

Operating account
Operating account
Payroll account
Reserve account
Tax account
Finance Operations HR
Inputs

Radio, checkbox & switch

Animated: the checkmark draws, the radio dot scales, the switch knob slides.

Radio group
Checkboxes
Switches
Selection cards
Inputs

Slider & stepper

Range with an Iris thumb that scales on hover, plus a numeric stepper.

Inputs

File upload

A dropzone that lights up Iris on hover.

Drop files or click to upload
CSV, XLSX, PDF · up to 25MB
Navigation

Tabs & segmented control

The tab indicator slides between items; the segmented control swaps an elevated thumb.

Tabs
Segmented
Navigation

Pagination

Navigation

Accordion

Smoothly expands using an animated grid row — no janky max-height.

NxSync matches your bank feed against the general ledger automatically, flags exceptions, and proposes adjusting entries for your approval. Nothing posts without you.

Yes. Every automated action is logged and reversible, with a full audit trail attached to the period.

Operating, payroll, reserve, and tax accounts connect through secure bank feeds and stay in sync in real time.

Data

Data table

Row selection, hover, sortable headers, tabular figures, and status badges.

Entry AccountStatusAmount
JE-002841Accounts ReceivablePosted12,450.00
JE-002842Bank · OperatingPending8,900.00
JE-002843Sales RevenueFailed−2,100.00
Data

Chips & badges

Filter & input chips
All Overdue This month Acme Corp
Status badges & counts
Approved Pending Rejected Syncing Draft Notifications 9
Data

Avatar & list

MC
DR
MC
DR
PS
+4
MC
Maya Chen
Controller
Online
DR
Devon Ruiz
Operations
Data

Cards & KPIs

Cards lift on hover; KPI tiles use display type, tabular figures, and a sparkline.

Cash on hand
$2.41M
▲ 4.2%
Overdue AR
$184K
▲ 11%

Month-end close

86% complete · 4 tasks remaining before the books lock.

Data

Calendar / date picker

June 2026
M
T
W
T
F
S
S
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
Feedback

Alerts & toasts

Inline banners for persistent context; toasts slide in for transient confirmation.

Period closes in 3 days
Finish reconciliation before June 30 to lock the books on time.
2 entries posted
Reversible for the next 24 hours.
4 transactions need review
Duplicates detected in the operating account feed.
Sync failed
The payroll bank connection expired. Reconnect to resume.
Feedback

Progress, spinners & skeletons

From determinate bars to the signature working-state mark. Skeletons shimmer while data loads.

Bars
Spinners & working state
← the brand mark as the "working" indicator
Skeleton loader
Feedback

Empty state

A blank screen is a prompt, not a dead end.

No purchase orders yet

Create your first PO, or import existing ones from a CSV to get started.

Advanced

Combobox / autocomplete

Type to filter; matches highlight, arrow keys move, Enter selects.

Advanced

Tag input

Type and press Enter to add a tag; backspace on an empty field removes the last.

Finance Q2
Advanced

Wizard / progress steps

Completed steps fill with Pulse; the connector animates as you advance.

Connect
2
Map accounts
3
Review
4
Finish
Advanced

Tree view

Expandable hierarchy with the same animated grid-row reveal as the accordion.

Finance
Accounts Payable
Invoices
Vendors
Accounts Receivable
General Ledger
Operations
Inventory
Procurement
Advanced

Timeline / activity feed

An audit-friendly history; the live event pulses.

Agent proposing 2 adjusting entries
Just now · awaiting approval
Matched 142 transactions
2 min ago · operating account
Maya approved invoice INV-2840
14:02 · $12,450.00
June period opened
Jun 1 · system
Advanced

Data visualization

Lightweight chart primitives — bars grow on load, donut and sparkline in brand color.

Bar chart
Jan
Feb
Mar
Apr
May
Jun
Donut & sparkline
throughput+18% MoM
Advanced

Rating

Hover to preview, click to set.

Advanced

Notification popover

A bell with an unread count opens a panel of recent activity.

Notifications Mark all read
Agent flagged 4 duplicate transactions
2 min ago
Invoice INV-2841 is overdue
1 hr ago
June period opened
Yesterday
Advanced

Kanban board

Columns of draggable cards for approval and review flows.

To review3
Reconcile operating account
Pending
Approve PO-1182
Syncing
Review duplicates ×4
Pending
In progress1
Close June period
86%
Done2
Post payroll entries
Posted
Approve INV-2840
Approved
Signature

Command Bar

The bridge between clicking and asking — navigate, ask, and act in one surface.

esc
Show overdue invoices from Acme CorpASK · AI
Create purchase orderC then O
Go to Accounts PayableG then P
Reconcile operating accountAGENT
Signature

Agent activity

The accountability layer — plan, progress, intervention, and an audit trail.

Reconcile · Operating account
working
Matched 142 of 148 transactions
Against bank feed · Jun 1–30
Flagged 4 duplicates for review
No entries posted yet
Proposing 2 adjusting entries
Awaiting your approval
esc