@rpgjs/ui-css

A framework-agnostic CSS library for RPG UI components. Fully customizable via CSS custom properties.

Installation

``bash
npm install @rpgjs/ui-css


or

`html











`

$3

`javascript
// In your CSS/SCSS
@import '@rpgjs/ui-css/reset.css';
@import '@rpgjs/ui-css/index.css';
@import '@rpgjs/ui-css/theme-default.css';
`

Components

$3

#### Core Components
- .rpg-ui-panel - Panel container with bevel effects and shadows
- .rpg-ui-btn - Interactive button with hover and active states
- .rpg-ui-dialog - Dialog box with speaker labels and portrait support
- .rpg-ui-bar - Progress/health bar with gradient fills and animations
- .rpg-ui-bar-fill - Fill element for bars
- .rpg-ui-bar-label - Text overlay for bars
- .rpg-ui-menu - Menu container with selection indicators
- .rpg-ui-menu-item - Individual menu items with hover effects
- .rpg-ui-menu-header - Menu header section

#### RPG-Specific Components
- .rpg-ui-inventory - Inventory grid container
- .rpg-ui-inventory-slot - Individual inventory slot with rarity indicators
- .rpg-ui-inventory-slot-icon - Icon container for inventory items
- .rpg-ui-inventory-slot-quantity - Item quantity display
- .rpg-ui-inventory-slot-rarity - Rarity color indicator (common, uncommon, rare, epic, legendary)
- .rpg-ui-stats - Stats container
- .rpg-ui-stat - Individual stat display
- .rpg-ui-stat-label - Stat label text
- .rpg-ui-stat-value - Stat value with change indicators
- .rpg-ui-stat-change - Positive/negative stat change indicator
- .rpg-ui-stat-group - Group of related stats
- .rpg-ui-stat-group-title - Group title
- .rpg-ui-stat-grid - Grid layout for stats
- .rpg-ui-stat-bar-container - Container for stat with bar
- .rpg-ui-character-card - Character profile card
- .rpg-ui-character-card-header - Card header section
- .rpg-ui-character-card-avatar - Character avatar/portrait
- .rpg-ui-character-card-info - Character info section
- .rpg-ui-character-card-name - Character name
- .rpg-ui-character-card-class - Character class/race
- .rpg-ui-character-card-level - Character level badge
- .rpg-ui-character-card-stats - Stats section in card
- .rpg-ui-character-card-section - Card section divider
- .rpg-ui-character-card-section-title - Section title

$3

#### Button Variants
`html
Primary
Success
Warning
Danger
`

#### Bar Types
`html


#### Menu Selection
`html


#### Inventory Slot States
`html


`css
:root {
/ Colors /
--rpg-ui-bg: #1c1917;
--rpg-ui-surface: #292524;
--rpg-ui-border: #d6b36a;
--rpg-ui-border-light: #fde047;
--rpg-ui-border-dark: #78350f;
--rpg-ui-text: #fef3c7;
--rpg-ui-text-muted: #a8a29e;
--rpg-ui-accent: #f59e0b;
--rpg-ui-success: #22c55e;
--rpg-ui-warning: #eab308;
--rpg-ui-danger: #dc2626;
--rpg-ui-info: #3b82f6;

/ Gradients /
--rpg-ui-gradient-surface: linear-gradient(180deg, var(--rpg-ui-surface), var(--rpg-ui-bg));
--rpg-ui-gradient-accent: linear-gradient(180deg, var(--rpg-ui-accent), color-mix(in srgb, var(--rpg-ui-accent), black 20%));
--rpg-ui-gradient-bar: linear-gradient(90deg, var(--rpg-ui-accent), color-mix(in srgb, var(--rpg-ui-accent), black 30%));

/ Shadows /
--rpg-ui-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
--rpg-ui-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.6);
--rpg-ui-shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.8);
--rpg-ui-shadow-glow: 0 0 20px var(--rpg-ui-accent);
--rpg-ui-shadow-inset: inset 0 1px 3px rgba(0, 0, 0, 0.5);

/ Typography /
--rpg-ui-font: "Cinzel", serif;
--rpg-ui-font-size: 1rem;
--rpg-ui-font-size-sm: 0.875rem;
--rpg-ui-font-size-lg: 1.125rem;
--rpg-ui-font-weight: 600;
--rpg-ui-font-weight-bold: 800;
--rpg-ui-text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);

/ Layout /
--rpg-ui-radius-sm: 4px;
--rpg-ui-radius-md: 6px;
--rpg-ui-radius-lg: 10px;
--rpg-ui-border-width: 3px;
--rpg-ui-spacing: 0.75rem;
--rpg-ui-spacing-lg: 1.25rem;

/ Effects /
--rpg-ui-bevel-light: var(--rpg-ui-border-light);
--rpg-ui-bevel-dark: var(--rpg-ui-border-dark);
--rpg-ui-border-double: 4px;
}
`

Creating Custom Themes

$3

`css
:root {
--rpg-ui-accent: hotpink;
--rpg-ui-font: "Arial", sans-serif;
}
`

$3

`css
.my-custom-ui {
--rpg-ui-accent: hotpink;
--rpg-ui-radius-lg: 0;
}
`

$3

`css
/ my-theme.css /
:root {
--rpg-ui-bg: #2d1b69;
--rpg-ui-surface: #4c2a85;
--rpg-ui-border: #ff6b6b;
--rpg-ui-text: #ffffff;
--rpg-ui-accent: #ffd93d;
--rpg-ui-font: "MedievalSharp", cursive;
}
`

Example

$3

`html


`html


`html


`html


Architecture

- CSS-only: No JavaScript dependencies
- Framework-agnostic: Works with any framework or plain HTML
- Token-based: All styling via CSS custom properties
- Gaming-focused: Designed for 2D RPG games with authentic UI elements
- RPG components: Character cards, inventory, stats, dialog boxes, menus
- Visual effects: Bevel edges, gradients, shadows, glow effects, animations
- Minimal defaults: Default theme is optional
- Fully customizable: Override tokens for complete theming

Features

- 🎮 Authentic RPG styling: Medieval-themed default theme
- ⚔️ Character cards: Complete character profile with stats and vitals
- 📦 Inventory system: Slots with rarity indicators and selection states
- 💪 Stats display: Individual stats with positive/negative change indicators
- 💬 Dialog boxes: Speaker labels, portrait support, and navigation indicators
- 📊 Progress bars: Health, mana, stamina, experience with gradient fills and animations
- 🎨 Button variants: Primary, success, warning, danger with hover/active states
- 📋 Menu system: Selection indicators, hover effects, and animations
- 🎯 Bevel effects: 3D-style borders with light/dark edge highlighting
- ✨ Glow effects: Subtle glows on hover and selection
- 🔧 Full customization: Every aspect is configurable via CSS tokens