@patimweb/crtstyleguide
v1.0.32TypeScript
CRT Style Guide - Retro Lit component library
0/weekUpdated 1 weeks agoApache-2.0Unpacked: 1.9 MB
Published by Patrick Weppelmann
npm install @patimweb/crtstyleguideCRT Style Guide
A modern Web Component Library with retro CRT aesthetic
Built with Lit, TypeScript and Vite
🖥️ View Live Demo
---
✨ Features
| Feature | Description |
|---------|-------------|
| 🖥️ CRT Aesthetic | Retro look with neon glow effects and monospace fonts |
| ⚡ Lit Web Components | Modern, performant and lightweight components |
| 🎨 Design Tokens | Consistent theming via CSS Custom Properties |
| 📦 NPM-Ready | Publishable as reusable package |
| 🔒 TypeScript | Full typing for better DX |
| 📚 Living Style Guide | Interactive documentation of all components |
| ⚙️ Vite | Lightning-fast development and optimized builds |
| 🎨 Multiple CRT Colors | Green, Amber, and Blue phosphor variants |
| ✨ Authentic Effects | Scanlines, flicker, chromatic aberration |
---
📁 Project Structure
``
crtstyleguide/
├── src/
│ ├── components/
│ │ ├── atoms/ # Basic building blocks (Button, Input, Badge, etc.)
│ │ ├── molecules/ # Composite components (Card, Modal, Table)
│ │ └── organisms/ # Complex UI areas (MusicStation)
│ ├── styles/
│ │ ├── design-tokens.css # CSS Custom Properties
│ │ └── index.css # Global Styles
│ ├── utils/ # Helper functions
│ └── index.ts # Library Entry Point
├── styleguide/ # Living Style Guide App
│ ├── index.html
│ ├── main.ts
│ ├── template.ts
│ └── style.css
├── public/
│ └── fonts/ # IBM Plex Mono font files
├── vite.config.ts # Dev & Style Guide Build
├── vite.lib.config.ts # Library Build
└── tsconfig.json
---
🚀 Quick Start
$3
`bash`
npm install
$3
`bash`
npm run dev
Opens the Style Guide at: http://localhost:5175/styleguide/
---
📜 Available Scripts
| Script | Description |
|--------|-------------|
| npm run dev | Start development server |npm run build
| | Build Style Guide + Library |npm run build:lib
| | Build only library for npm |npm run preview
| | Preview production build |npm run type-check
| | TypeScript check without build |npm run lint
| | ESLint code check |
---
🧩 Component Overview
$3
| Component | Tag | Description |
|------------|-----|-------------|
| Button | | Interactive button |
| Badge | | Status labels and tags |
| Heading | | Typography headings |
| Text | | Body text |
| Tabs | | Tab navigation |
| Input | | Text fields |
| Textarea | | Multiline input |
| Icon | | Icon rendering |
| Link | | Links |
| FileInput | | File selection input |
| FileUpload | | File upload |
| Calendar | | Date picker |
| Select | | Dropdown selection |
| Search | | Search input |
| Checkbox | | Checkbox input |
| Radio | | Radio button |
| RadioGroup | | Radio group |
| Progress | | Progress bar |
| Tooltip | | Hover hints |
| Breadcrumb | | Breadcrumb navigation |
| Pagination | | Pagination |
| Slider | | Range slider |
| Toggle | | On/Off switch |
| Avatar | | User avatar |
| AvatarGroup | | Grouped avatars |
| Skeleton | | Loading placeholder |
| SkeletonText | | Text placeholder |
| SkeletonCard | | Card placeholder |
| Alert | | Alert banners |
| Spinner | | Loading spinner |
$3
| Komponente | Tag | Beschreibung |
|------------|-----|-------------|
| Card | | Content container |
| Modal | | Dialog modal |
| Table | | Data tables |
| Grid | | Layout grid |
| Accordion | | Collapsible sections |
| AccordionItem | | Accordion item |
| Toast | | Notifications |
| CodeExample | | Code preview |
| MusicPlayer | | Audio player |
| Playlist | | Playlist view |
| Visualizer | | Audio visualization |
| Terminal | | Terminal simulator |
| Log | | Log output panel |
| Navbar | | Navigation bar |
| Header | | Header |
| Footer | | Footer |
| Menu | | Context menu |
| CRTScreen | | CRT screen container (wraps content) |
| CRTOverlay | | CRT visual overlay (non-blocking) |
$3
| Komponente | Tag | Beschreibung |
|------------|-----|-------------|
| MusicStation | | Full music station |
---
🎵 Music Player Tracks (Lyrics)
Lyrics werden direkt im Track-Objekt übergeben:
`html`
{
title: 'VERROSTETE TERMINALS',
artist: 'PATIMWEP',
url: 'patimwep - Verrostete Terminals.mp3',
lyrics: '[INTRO]\nSTATIC IN THE WIRES\nNEON HISS AND SOFT DESIRES\n\n[HOOK]\nVERROSTETE TERMINALS\nSIGNAL LOST, RETURNING CALLS',
},
]}
>
---
🎨 Design Tokens
Die Library verwendet CSS Custom Properties für konsistentes Theming:
`css`
:root {
/ Primärfarben /
--crt-primary: #33ff33;
--crt-primary-light: #44ff44;
--crt-primary-dark: #22cc22;
/ Hintergründe /
--crt-bg-dark: #0a0a0a;
--crt-bg-darker: #000000;
--crt-bg-light: #1a1a1a;
/ Status-Farben /
--crt-success: #00ff00;
--crt-warning: #ffff00;
--crt-error: #ff0000;
--crt-info: #00ffff;
/ Glow-Effekte /
--crt-glow-sm: 0 0 5px rgba(51, 255, 51, 0.3);
--crt-glow: 0 0 10px rgba(51, 255, 51, 0.5);
--crt-glow-lg: 0 0 20px rgba(51, 255, 51, 0.7);
/ Typografie /
--crt-font-family: 'VT323', 'Courier New', monospace;
}
---
🔧 Eigene Komponenten erstellen
$3
`typescript
// src/components/atoms/my-component.ts
import { LitElement, html, css } from 'lit';
import { customElement, property } from 'lit/decorators.js';
@customElement('crt-my-component')
export class MyComponent extends LitElement {
static styles = css
:host {
display: block;
color: var(--crt-text-primary);
font-family: var(--crt-font-family);
}
.container {
padding: var(--crt-spacing-md);
border: var(--crt-border);
box-shadow: var(--crt-glow);
}
;
@property({ type: String }) label = 'Hello CRT';
render() {
return html
${this.label}
;
}
}declare global {
interface HTMLElementTagNameMap {
'crt-my-component': MyComponent;
}
}
`$3
typescript
// src/components/atoms/index.ts
export { MyComponent } from './my-component';
`$3
Füge die Komponente in
hinzu.---
📦 Als NPM-Paket veröffentlichen
$3
`bash
npm run build:lib
`$3
bash
npm publish
`$3
Installation:
bash
npm install @patimweb/crtstyleguide
`JavaScript/TypeScript einbinden:
typescript
// Alle Komponenten importieren (registriert automatisch die Custom Elements)
import '@patimweb/crtstyleguide';// Oder einzelne Komponenten
import { Button, Card, Modal } from '@patimweb/crtstyleguide';
`CSS einbinden:
typescript
// In deiner Haupt-JS/TS-Datei
import '@patimweb/crtstyleguide/styles';
// oder
import '@patimweb/crtstyleguide/styles.css';
`Oder direkt im HTML:
html
`Komponenten verwenden:
html
Click me
Small Button
Titel
Inhalt der Karte
Erfolgreich gespeichert!
`Mit Framework (z.B. React):
tsx
import '@patimweb/crtstyleguide';
import '@patimweb/crtstyleguide/styles';function App() {
return (
alert('Clicked!')}>
CRT Button
);
}
``---
🛠️ Technologie-Stack
- Lit - Web Components Library
- TypeScript - Type-safe JavaScript
- Vite - Build Tool & Dev Server
- ESLint - Code Linting
---
📄 Lizenz
Apache License 2.0 - siehe LICENSE für Details.
---
Built with 💚 and lots of neon glow
© 2026 Patrick Weppelmann