• Nimiq Frankenstein

Getting Started with Frankenstein ​

Frankenstein is a collection of production-ready Vue 3 components built for various Nimiq projects. Unlike traditional component libraries, Frankenstein uses a copy-paste approach - you copy the components you need directly into your project, giving you full control to customize them.

Philosophy ​

Why "Frankenstein"? Just like the famous creature, you assemble your application from different parts, putting together exactly what you need!

Frankenstein components are:

  • Production-tested: Used in real Nimiq applications
  • Customizable: Copy the source code and adapt it to your needs
  • Dependency-light: Built on proven libraries (Reka UI, VueUse)
  • Styled with Nimiq CSS: Follows Nimiq design patterns

This approach gives you the flexibility of custom components with the reliability of battle-tested code.

How It Works ​

  1. Browse the component documentation
  2. Copy the component code from the preview
  3. Paste it into your project
  4. Customize styles and behavior as needed
  5. Keep full ownership of the code

Prerequisites ​

Required Dependencies ​

Each component may have different requirements, but you'll typically need:

Vue 3.15+ ​

Frankenstein requires Vue 3.15 or higher for the latest Composition API features.

bash
pnpm add vue@^3.15
bash
npm install vue@^3.15
bash
yarn add vue@^3.15

Reka UI ​

A headless component library providing accessibility and functionality for complex components like modals, comboboxes, and more.

bash
pnpm add reka-ui
bash
npm install reka-ui
bash
yarn add reka-ui

Learn more about Reka UI →

VueUse ​

Essential Vue composition utilities used across many components.

bash
pnpm add @vueuse/core
bash
npm install @vueuse/core
bash
yarn add @vueuse/core

Learn more about VueUse →

Nimiq CSS ​

The styling foundation for all Frankenstein components.

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

Then configure it in your project:

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

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

Complete Nimiq CSS setup guide →

Quick Start ​

Step 1: Install Dependencies ​

Make sure you have all the required dependencies for the components you want to use:

bash
pnpm add vue@^3.15 reka-ui @vueuse/core nimiq-css

Step 2: Set Up Nimiq CSS ​

Follow the Nimiq CSS installation guide to configure styling.

Step 3: Copy a Component ​

Browse the available components below and copy the one you need:

vue
<!-- Example: BasicModal.vue -->
<script setup lang="ts">
import { DialogContent, DialogPortal, DialogRoot, DialogTrigger } from 'reka-ui'

// Component code here...
</script>

<template>
  <div>
    <!-- Component template here... -->
  </div>
</template>

Step 4: Customize ​

Since you own the code, customize it freely:

  • Change styling classes
  • Add/remove features
  • Adjust animations
  • Modify behavior

Available Components ​

Dialog Components ​

Modal dialogs built on Reka UI with Nimiq styling.

Basic Modal ​

A simple dialog that can be triggered by a button or programmatically via a ref.

Use cases: Confirmations, alerts, simple forms

Nested Modal ​

Advanced modal system that supports opening dialogs on top of other dialogs.

Use cases: Multi-step flows, drill-down interfaces

Animations ​

Animated Staking Ripple ​

An animated ripple effect for staking visualizations.

Use cases: Staking interfaces, loading states, blockchain activity

Component Dependencies ​

Each component page lists its specific dependencies. Not all components require all libraries:

ComponentVue 3.15+Reka UIVueUseNimiq CSS
Basic Modal✅✅✅✅
Nested Modal✅✅✅✅
Animated Staking Ripple✅❌❌✅

Best Practices ​

Component Organization ​

Create a dedicated components directory:

src/
├── components/
│   ├── modals/
│   │   ├── BasicModal.vue
│   │   └── NestedModal.vue
│   └── animations/
│       └── AnimatedStakingRipple.vue

Keeping Components Updated ​

Since you copy the code, updates aren't automatic. To stay current:

  1. Check the documentation for component changes
  2. Review the change log periodically
  3. Compare your version with the latest source
  4. Apply updates manually as needed

Customization Tips ​

When modifying components:

  • Keep core functionality intact
  • Document your changes
  • Test accessibility features
  • Maintain TypeScript types
  • Follow Vue 3 best practices

Troubleshooting ​

Component doesn't render ​

Solution:

  • Verify all dependencies are installed
  • Check that Nimiq CSS is properly configured
  • Ensure you're using Vue 3.15+

Styles are missing ​

Solution:

  • Confirm Nimiq CSS is imported in your entry file
  • Check that UnoCSS is configured correctly
  • Verify CSS layer order

TypeScript errors ​

Solution:

  • Install @types/ packages for dependencies
  • Check that component prop types match your usage
  • Update TypeScript to latest version

Animation not working ​

Solution:

  • Check browser compatibility
  • Verify CSS is loaded
  • Ensure animation classes are applied

Credits ​

These components stand on the shoulders of giants and wouldn't be possible without:

  • Reka UI - Headless UI primitives providing accessibility and functionality
  • VueUse - Essential Vue composition utilities
  • Nimiq CSS - Design system and styling foundation
  • UnoCSS - Instant on-demand atomic CSS engine

The layout has been heavily inspired by:

Icons provided by:

Special thanks to the maintainers and contributors of these excellent libraries.

Getting Help ​

  • Documentation: Browse component examples and API references
  • Source Code: Each component preview shows the full source
  • GitHub: Report issues or contribute
  • Nimiq Community: Join the discussion on Discord

Next Steps ​

Copy page