• Nimiq Frankenstein

Getting Started ​

Nimiq CSS is a modular CSS framework built for the Nimiq design system. It provides design tokens, utilities, typography, and components that work seamlessly across all Nimiq projects.

What is Nimiq CSS? ​

Nimiq CSS offers:

  • Design Tokens: Consistent colors, spacing, and typography
  • CSS Utilities: Ready-to-use classes for common patterns
  • Light/Dark Mode: Built-in theme support
  • Modular Architecture: Use only what you need via CSS layers
  • Multiple Integrations: Works with Native CSS, UnoCSS, and TailwindCSS

Quick Start ​

Installation ​

bash
pnpm add nimiq-css
bash
npm install nimiq-css
bash
yarn add nimiq-css

Basic Usage ​

Choose your preferred integration method:

Native CSS ​

Import the complete framework in your CSS file:

css
@import 'nimiq-css/css/index.css';

Or import specific layers:

css
@import 'nimiq-css/css/preflights.css' @layer nq-preflights;
@import 'nimiq-css/css/colors.css' @layer nq-colors;
@import 'nimiq-css/css/fonts.css' @layer nq-fonts;
@import 'nimiq-css/css/utilities.css' @layer nq-utilities;

Learn more about Native CSS integration →

UnoCSS ​

Add the Nimiq preset to your UnoCSS configuration:

ts
// uno.config.ts
import { presetNimiq } from 'nimiq-css'
import { defineConfig } from 'unocss'

export default defineConfig({
  presets: [
    presetNimiq({
      utilities: true,
      fonts: true,
    }),
  ],
})

Learn more about UnoCSS integration →

TailwindCSS ​

Add the Nimiq plugin to your Tailwind configuration:

js
// tailwind.config.js
module.exports = {
  plugins: [
    require('nimiq-css/tailwind'),
  ],
}

Learn more about TailwindCSS integration →

Your First Component ​

Once installed, you can start using Nimiq CSS utilities:

html
<div class="nq-card">
  <h3 class="nq-text-h3">Welcome to Nimiq</h3>
  <p class="nq-text">Build amazing blockchain applications</p>
  <button class="nq-pill-blue">Get Started</button>
</div>

Next Steps ​

Copy page