• 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