Design System
RetroHexChat Component Showcase

Interactive catalog of all UI components used in RetroHexChat. Each component is a reusable, self-contained building block with generic callbacks — no hardcoded event names.

109 components 8 categories Live examples + code
Primitives 26

SaladUI base widgets — buttons, inputs, badges, toggles, selects, and other atomic form controls.

Layout 14

Structural containers — dialogs, tabs, tables, menus, tree views, windows, and scroll areas.

Chat 20

Chat-specific components — messages, nicklist, emoji picker, formatting toolbar, context menus, and more.

Shell 6

Win98 app shell composites — toolbar app, status bar app, app header, config form, and empty states.

Dialogs 37

Complex dialog composites — channel settings, perform, address book, sound settings, and the admin console family.

P2P 2

Peer-to-peer session components — connection diagram and file transfer.

Games 2

Arcade components — game cards and the solo lobby.

Assets 2

Icons catalog, SVG diagrams, and design tokens reference.

Colors

Semantic color tokens mapped to retro palette.

Primary
Secondary
Destructive
Surface
Desktop
Accent
Muted
Canvas BG
Typography

Font sizes using Source Code Pro monospace.

text-xs — 12px — Caption text

text-sm — 14px — Small text

text-base — 16px — Body text

text-lg — 18px — Large text

text-xl — 22px — Heading

text-2xl — 26px — Title

Shadows (3D Borders)

Win98-style inset box shadows for retro depth.

raised
sunken
window
field
status
tab
Spacing

Retro spacing tokens (retro-1 through retro-32).

retro-1 (1px)
retro-2 (2px)
retro-4 (4px)
retro-8 (8px)
retro-16 (16px)
retro-24 (24px)
retro-32 (32px)
Status & Semantic Colors

Contextual colors for feedback, online status, and IRC roles.

Feedback

Error
Warning
Success

Online Status

Online
Away
Offline

IRC Role Badges

Owner
Operator
Half-Op
Voiced
Regular
Z-Index Scale

7-layer stacking context for overlays, modals, and tooltips.

z-dropdown
100
Dropdown menus
z-floating
150
Floating panels
z-modal
200
Modal dialogs
z-modal-above
210
Stacked modals
z-context-menu
300
Context menus
z-tooltip
9000
Tooltips
z-toast
10000
Toast notifications
Icon Sizes

4 standardized SVG icon sizes used across the design system.

12px Inline text
14px Formatting toolbar
16px Toolbar / tabs / dialogs
32px Game icons / desktop
Focus & Border Radius

Retro-style focus indicators and the two border-radius tokens.

Focus Ring

1px dotted outline, -4px offset

Border Radius

radius-sm (2px)
radius-badge (7px)
Help
Help Topics GitHub License (MIT)
6 objects
Help Topics
GitHub License (MIT)