Nimiq UI Kit
The authoritative reference for the entire Nimiq UI universe — design tokens, foundations, CSS components, live Vue components, identicons and utilities — built directly from the real, published sources.
Overview
Every value, class and component on this page is rendered from the actual Nimiq packages — not a mock-up. The kit consolidates seven current sources into one browsable, copyable system.
| Source | Package | Provides |
|---|---|---|
| @nimiq/style | 0.8.5 | Colors, gradients, type scale, buttons, inputs, cards, notices, icon sprite |
| @nimiq/vue-components | git | 34 live Vue components (Identicon, Amount, Tooltip, QR, inputs…) |
| @nimiq/identicons | 1.6.2 | Identicon / avatar generator |
| @nimiq/utils | local | Formatting, validation, request-links, tweening, clipboard |
| nimiq/wallet | master | Fonts (Muli, Fira Mono), opacity ladder, crypto colors, patterns |
| nimiq/hub | master | Ledger connect UI (animated Nano device) |
| nimiq/keyguard | master | Login File, backup codes, recovery words, PIN |
Brand & Logo nimiq/wallet · @nimiq/style
The Nimiq logo pairs the gold hexagon “signet” with the NIMIQ wordmark (uppercase, bold, letter-spacing: 0.08em, gap = 0.382× the signet width) — exactly as the live wallet composes it. The gold signet stays legible on light and dark surfaces.
Monochrome
Single-colour versions — the signet and wordmark share currentColor — for print, watermarks or any single-ink context where the gold logo can't be used.
Signet
The mark on its own, at increasing sizes. A single-colour version also ships in @nimiq/style as the nq-hexagon icon, which inherits currentColor for monochrome use.
Color @nimiq/style
Ten brand colors plus neutrals. Click any swatch to copy its hex. Text-color utilities are .nq-<color>; background utilities are .nq-<color>-bg.
Brand palette
Neutrals
Light opacity ladder nimiq/wallet
Nimiq Blue at descending alpha — the greyscale text system. Vars --text-100 … --text-6.
Crypto colors nimiq/wallet
On-dark & darkened variants
Inside a .nq-*-bg surface, light-blue and red swap to brighter on-dark values. Darkened values back the hover states.
Gradients @nimiq/style
The signature look. One formula drives them all — a brighter accent glows from the bottom-right into the base color.
Typography @nimiq/style · wallet
Muli for UI (weights 400/600/700), Fira Mono for addresses & hex. The scale lives on the 8px grid: 1rem = 8px.
Spacing & Grid @nimiq/style
Everything is an 8px grid. The rem base is 8px (--nimiq-size: 8px), so Nrem = N × 8px. Utilities .margin-top-1…5.
Radius @nimiq/style
Elevation @nimiq/style
Motion @nimiq/style · @nimiq/utils
The Nimiq easing is cubic-bezier(0.25, 0, 0, 1) (--nimiq-ease). Durations: attr 0.2s, movement 0.4s.
Breakpoints nimiq/wallet
| Name | px | Name | px |
|---|---|---|---|
| mobile | 768 | largeDesktop | 1409 |
| tablet | 960 | extraLargeDesktop | 1499 |
| halfMobile | 1160 | veryLargeDesktop | 1800 |
| smallDesktop | 1199 | ultraLargeDesktop | 2000 |
| mediumDesktop | 1319 |
Iconography @nimiq/style
The icon sprite. Icons inherit currentColor. Each icon carries a plain-language summary in its aria-label, title and data-summary (also on window.NimiqIconSummaries) so an agent can identify it without vision. Click any icon to copy its markup.
On light
On blue
Extended set — nimiq-icons onmax/nimiq-ui · MIT
A larger, modern Nimiq icon set from the community nimiq-icons package (Iconify format, currentColor). Each icon's name doubles as its summary in aria-label / title. Click any icon to copy its SVG.
Buttons @nimiq/style
Three families: primary pill (.nq-button), small (.nq-button-s), and pill (.nq-button-pill). Hover, focus and disabled states are live.
Inputs @nimiq/style
Cards @nimiq/style
The card is Nimiq's primary container: a centered header (title + optional notice), a body, and a footer — each with 4rem padding on the 8px grid and 10px rounded corners.
Card title
An inline notice
The card is the primary container in Nimiq. Header, body and footer compose together, each with its own padding and rounded corners.
Notices @nimiq/style
.nq-notice.info.nq-notice.success.nq-notice.warning.nq-notice.errorText, Labels & Links @nimiq/style
Vue · Amounts & Identity @nimiq/vue-components
Real, compiled @nimiq/vue-components mounted live. Change the knobs to see each component react.
Vue · Inputs @nimiq/vue-components
Vue · Feedback & Overlay @nimiq/vue-components
Vue · Layout & Pages @nimiq/vue-components
Vue · QR @nimiq/vue-components
Identicons @nimiq/identicons
Deterministic avatars generated from any string. Type below to generate one live.
Utilities @nimiq/utils
Live, running @nimiq/utils — bundled straight from source.
FormattableNumber — loss-less amounts
ValidationUtils — Nimiq address check
RequestLinkEncoding — payment links
CurrencyInfo — fiat metadata
Patterns nimiq/wallet
Composed examples built from the primitives above, as they appear in the wallet.
Swaps nimiq/wallet
The atomic-swap experience, reproduced from the live wallet. Drag the balance bar to rebalance a swap; the animation shows the two HTLCs interlocking.
Drag the ↔ handle to move value between the two assets.
Atomic Swap successful!
Performing Atomic Swap
Ledger nimiq/hub
The animated Ledger Nano connect flow from the Hub — cable, PIN entry and open-app states, looping.
Login File nimiq/keyguard
Keyguard's iconic account file — the downloadable card and its line-art draw-in animation.
Backup & Recovery nimiq/keyguard
How Keyguard backs up and restores accounts — the backup-code bubbles and the 24-word recovery phrase.
k9Tf!2mQxZ;p7RdLwN4bVsE!6yUcaHgJ8oIrP;0nMfKz
Xp29dLtN!wZ;4bVsE6yUc!1aHgJ8oIrP0;nMfKk7Rf2m
Security nimiq/keyguard
Unlocking and balance display — the PIN / password field with its hexagon spinner, and the balance-distribution bar.
Resources
| Package | Repository | License |
|---|---|---|
| @nimiq/style | github.com/nimiq/nimiq-style | MIT |
| @nimiq/vue-components | github.com/nimiq/vue-components | — |
| @nimiq/identicons | github.com/nimiq/iqons | ISC |
| @nimiq/utils | github.com/nimiq/nimiq-utils | Apache-2.0 |
| nimiq/wallet | github.com/nimiq/wallet | — |
| nimiq/hub | github.com/nimiq/hub | — |
| nimiq/keyguard | github.com/nimiq/keyguard | MIT |
| Nimiq UI Kit (this kit) | github.com/NimiqToolbox/nimiq-ui-kit | — |
For LLMs & Agents llms.txt · machine-readable
This page builds its component catalog, swatches and icons with JavaScript, so an agent that only fetches the HTML sees empty mounts. These static, copy-ready exports expose the whole kit — tokens, components, props, examples and icons — with no code to run. Source & issues live on GitHub.
| Artifact | What it is |
|---|---|
| llms.txt | Curated index of the kit for LLMs (llmstxt.org format) |
| llms-full.txt | The entire kit as one flat Markdown document — tokens, foundations, every component with props & examples, and the icon list |
| components.json | Structured manifest of every Vue component: tag, group, props, events, slots and a copyable example |
| AGENTS.md | How an agent should consume the kit, plus the token & class conventions |
| tokens/tokens.json | Design tokens as machine-readable JSON — colours, type scale, spacing, radius, motion… |