按钮
Industrial mecha-style button with angular cuts, warning accents, and military feel
- 基础骨架
font-mono font-bold uppercase tracking-widest rounded-none transition-all duration-200 ease-in-out- 变体
- 主要、次要、轮廓
- 状态
- hover、active、disabled
机甲风组件配方
font-mono font-bold uppercase tracking-widest rounded-none transition-all duration-200 ease-in-out bg-[#fbbf24] text-[#1a2744] border-2 border-[#1a2744] shadow-[4px_4px_0px_#1a2744] hover:translate-x-[2px] hover:translate-y-[2px] hover:shadow-[2px_2px_0px_#1a2744] active:translate-x-[4px] active:translate-y-[4px] active:shadow-none卡片
Armored panel card with angular design, tech borders and military color scheme
- 基础骨架
bg-[#1a2744] rounded-none border-2 border-[#4a5c3a] shadow-[4px_4px_0px_rgba(251,191,36,0.3)] transition-all duration-200 ease-in-out- 变体
- 默认、警告、危险
- 状态
- hover
输入框
Military-styled input with angular design and tech-panel aesthetics
- 基础骨架
w-full rounded-none border-2 border-[#4a5c3a] bg-[#1a2744]/80 text-[#fbbf24] placeholder:text-[#4a5c3a]/60 font-mono uppercase focus:outline-none transition-all duration-200 ease-in-out- 变体
- 默认、警报
- 状态
- focus、disabled
警戒条纹
Yellow/black diagonal warning stripe decoration for panels
- 基础骨架
h-2 bg-[repeating-linear-gradient(45deg,#fbbf24_0px,#fbbf24_10px,#1a2744_10px,#1a2744_20px)]- 变体
- 默认
- 状态
- 静态
军事面板
HUD-style panel with angular corners and optional hazard stripes
- 基础骨架
relative bg-[#1a2744] border-2 border-[#4a5c3a] p-4 [clip-path:polygon(0_0,calc(100%-16px)_0,100%_16px,100%_100%,16px_100%,0_calc(100%-16px))] overflow-hidden- 变体
- 默认、警告、危险、信息
- 状态
- 静态
状态条
HP/Shield/Energy bar with segmented design and percentage display
- 基础骨架
relative h-6 bg-[#1a2744] border border-[#4a5c3a] bg-[repeating-linear-gradient(90deg,transparent_0px,transparent_18px,#1a2744_18px,#1a2744_20px)]- 变体
- 生命值、护盾、能量
- 状态
- 静态
开关
Chunky military-style toggle switch with power icon
- 基础骨架
relative w-16 h-8 bg-[#1a2744] border-4 border-[#4a5c3a] rounded-none transition-all duration-200 shadow-[inset_0_2px_4px_rgba(0,0,0,0.4)]- 变体
- 默认
- 状态
- active
军衔徽章
Military rank insignia badge with chevron design
- 基础骨架
inline-flex items-center gap-1 px-3 py-1 font-mono text-xs uppercase tracking-widest border-2 [clip-path:polygon(50%_0%,100%_25%,100%_75%,50%_100%,0%_75%,0%_25%)]- 变体
- 实心、描边、发光
- 状态
- 静态
诊断行
Table row with status indicator dot for system diagnostics
- 基础骨架
border border-[#4a5c3a]/30 font-mono text-sm- 变体
- 在线、离线、待机
- 状态
- 静态
复选框组
Military style checkbox group for subsystem toggles
- 基础骨架
grid grid-cols-2 gap-2- 变体
- 默认
- 状态
- 静态