• 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