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
- Browse the component documentation
- Copy the component code from the preview
- Paste it into your project
- Customize styles and behavior as needed
- 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.
pnpm add vue@^3.15
npm install vue@^3.15
yarn add vue@^3.15
Reka UI
A headless component library providing accessibility and functionality for complex components like modals, comboboxes, and more.
pnpm add reka-ui
npm install reka-ui
yarn add reka-ui
VueUse
Essential Vue composition utilities used across many components.
pnpm add @vueuse/core
npm install @vueuse/core
yarn add @vueuse/core
Nimiq CSS
The styling foundation for all Frankenstein components.
pnpm add nimiq-css
npm install nimiq-css
yarn add nimiq-css
Then configure it in your project:
// 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:
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:
<!-- 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:
Component | Vue 3.15+ | Reka UI | VueUse | Nimiq 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:
- Check the documentation for component changes
- Review the change log periodically
- Compare your version with the latest source
- 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:
- Fumadocs - Modern documentation theme
- Nimiq Hub Documentation - Design patterns and structure
Icons provided by:
- Tabler Icons - Beautiful open source icons
- Nimiq Icons - Custom Nimiq icon set
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