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

v1.4.2:

• Fix z-index for dialog components to ensure they appear behind the "Screen is too small. Please rotate to landscape" overlay on mobile devices.

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.