counterstrike-cn

A collection of Counter-Strike 1.6 inspired UI components for modern web applications. Built with React, TypeScript, and Tailwind CSS.

What is this?

counterstrike-cn brings the iconic visual style of Counter-Strike 1.6 — the olive-green VGUI panels, amber HUD glow, 3D beveled borders, and all the nostalgic UI patterns — into modern, accessible React components.

Every component is designed to be copy-paste ready. No npm package to install — just grab the component code and drop it into your project.

Features

29 Components — Buttons, Inputs, Cards, Dialogs, Scoreboard, Buy Menu, Server Browser, Console, Kill Feed, HUD, Radar, Chat, and more
Authentic Colors — Colors extracted from actual CS 1.6 game resource files (TrackerScheme.res, ClientScheme.res, hud.h)
Real CS Font — Uses the "Counter-Strike" font by SoJa (free, public domain)
3D Beveled Borders — The signature VGUI raised/inset border system
HUD Glow Effects — Additive amber glow matching the GoldSrc engine rendering
Team Colors — CT blue #99CCFF and T red #FF4040 throughout
TypeScript — Fully typed with exported interfaces
Tailwind CSS v4 — Built on modern utility-first CSS
Radix UI — Accessible primitives under the hood (Dialog, etc.)

Design References

The color palette comes from real CS 1.6 source files:

Color	Hex	Usage
Olive Green	`#4A5942`	Panel backgrounds
Amber HUD	`#FFA000`	HUD elements (from `hud.h` `RGB_YELLOWISH`)
Menu Gold	`#FFCC00`	Menu text
CT Blue	`#99CCFF`	Counter-Terrorist team
T Red	`#FF4040`	Terrorist team
Border Light	`#8C9284`	3D bevel highlight
Border Dark	`#292C21`	3D bevel shadow

Quick Start

Browse the Components section
Find the component you need
Copy the code into your project
Customize to your liking

Disclaimer

This is a fan-made project for fun and nostalgia. Not affiliated with or endorsed by Valve Corporation. Counter-Strike is a registered trademark of Valve Corporation.

Welcome