Pip-Boy UI

A reusable, free, Pip-Boy inspired UI components library for Angular applications.

Package: @vault-tec/pip-boy

Progress

• [x] Pip-Boy 3000
• [x] Pip-Boy 3000a
• [ ] Pip-Boy 2000 Mk VI
• [ ] Pip-Boy 3000 Mk IV

Install

npm install @vault-tec/pip-boy

Quick Start (Standalone Components)

import { Component } from '@angular/core';
import {
  PipBoy2000MkVI,
  PipBoy3000,
  PipBoy3000a,
  PipBoy3000MkIV,
} from '@vault-tec/pip-boy';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [PipBoy2000MkVI, PipBoy3000MkIV, PipBoy3000a, PipBoy3000],
  template: `
    <pip-boy-2000-mk-vi />
    <pip-boy-3000 />
    <pip-boy-3000a />
    <pip-boy-3000-mk-iv />
  `,
})
export class App {}

Changelog

v1.0.0 - v1.0.4:

• Initial release with Pip 3000
• Add welcome dialog component
• Adds a new "Content Font Size" setting (50-150% range) that scales list text and UI labels across all tabs with live preview
• Refactor all modal components to use shared SCSS mixins for consistent styling and better maintainability
• Redesigns the welcome modal with improved layout and accessibility
• Font family and styling updates/fixes
• Line height adjustments

v1.1.0 - v1.1.4:

• Cleaned up item list data
• Improved modals and forms
• Expanded global font-size support
• Map improvements
• Radio/Notes upgrades
• UI polish + behavior fixes
• Add remember tab/subtab on refresh feature
• Seletable quest/subquest checkboxes
• Stop all sounds on reset/load
• Fixed a mobile layout issues
• Improved the waveform visualizer
• Improve "RAD" sub tab
• Fix up not being able to drag local & world maps during "Edit Lock"
• Remember radiation level on save/load and page refresh
• Fix up sub tab "GENERAL" overflow on smaller devices

v1.2.0:

• Add Pip 3000a

v1.3.0 - v1.3.1:

• Add boot sequence video and overlay UI/logic
• Add click-sound handlers
• Add radiation/status meter numeric value display
• Pip 3000 and Pip 3000a Cleanup and reuse of functions

v1.4.0 - v1.4.1:

• Update default configuration values
• Remove uppper value limits for S.P.E.C.I.A.L. stats
• Remove upper value limits for Skills
• Updated Pip 3000a defaults to use shared skill and perk items from the Pip 3000
• Allow S.P.E.C.I.A.L. stats to be set to 0

Compatibility

Tested in Chrome. Other browsers may work, but Chrome is the only supported target right now.

Disclaimer

This is a fan-made UI library inspired by the Pip-Boy style interface. It is not affiliated with, endorsed by, or associated with Bethesda or ZeniMax.

Provided as-is. I’ll do my best to keep things stable, but there’s no warranty and support is best-effort.