📦 Introduction
RezUI is a modern, fully-styled UI library for Garry's Mod built on top of the Derma framework. It provides a consistent dark theme with red accents, perfect for creating professional-looking game interfaces.
Why RezUI?
- Consistent modern design across all components
- Simple API - less boilerplate code
- Animated components (Toasts, Switches, Tabs)
- Fully customizable color palette
- Built-in shadow and glow effects
- Responsive and mobile-ready layout helpers
- Advanced features like Tabs, Stack navigation, and Tables
🎨 Beautiful Design
Dark theme with customizable accent colors, shadows, and modern styling
⚡ Easy to Use
Simplified API that reduces code complexity and speeds up development
🔧 Fully Featured
15+ components including frames, tables, toasts, tabs, and navigation
🎯 Production Ready
Tested and used in live addons with proper error handling
⚡ Installation
Step 1: Download
Copy rezui_lib.lua to your addon folder:
-- Recommended path:
addons/your_addon/lua/autorun/client/rezui_lib.lua
-- Alternative (global):
garrysmod/lua/autorun/client/rezui_lib.lua
Step 2: Include in Your Scripts
The library auto-loads on the client. Simply use it:
-- Automatically available after autorun
local frame = RezUI.Frame("My Menu", 800, 600)
Important
RezUI is client-side only. The library automatically returns on the server with if SERVER then return end.
Step 3: Verify Installation
-- Test in console
lua_run_cl print(RezUI.Version) -- Should output: 1.1.0
🚀 Quick Start
Create your first RezUI interface in under 30 seconds:
-- Create a simple menu
local frame = RezUI.Frame("Settings", 500, 400, "CONFIGURATION")
-- Add a panel container
local panel = RezUI.Panel(frame, 15, 70, 470, 315)
-- Add a label
local label = RezUI.Label(panel, "Welcome to RezUI!")
label:Dock(TOP)
label:DockMargin(20, 20, 20, 10)
-- Add a button
local btn = RezUI.Button(panel, "Click Me", function()
RezUI.Toast("Hello World!", 2, "success")
end)
btn:Dock(TOP)
btn:DockMargin(20, 0, 20, 10)
btn:SetTall(40)
Pro Tip
Use Docking for responsive layouts. RezUI components work perfectly with :Dock(), :DockMargin(), and :DockPadding().
🎨 Color System
All colors are accessible via RezUI.Colors and can be customized globally:
ACCENT
Color(221, 57, 57, 255)
ACCENT_DARK
Color(180, 40, 40, 255)
ACCENT_GLOW
Color(221, 57, 57, 40)
BG_DARK
Color(15, 15, 15, 240)
BG_SECONDARY
Color(30, 30, 30, 220)
BG_PANEL
Color(25, 25, 25, 250)
BG_LIGHT
Color(40, 40, 40, 200)
TEXT_WHITE
Color(255, 255, 255, 255)
TEXT_GRAY
Color(160, 160, 160, 255)
TEXT_DARK
Color(100, 100, 100, 255)
Customizing Colors
-- Change accent color to blue
RezUI.Colors.ACCENT = Color(52, 152, 219)
RezUI.Colors.ACCENT_DARK = Color(41, 128, 185)
RezUI.Colors.ACCENT_GLOW = Color(52, 152, 219, 40)
-- Darker background
RezUI.Colors.BG_PANEL = Color(10, 10, 10, 250)
Color Naming Convention
ACCENT: Primary brand color used for highlights
BG_*: Background colors for different depths
TEXT_*: Text colors for different emphasis levels
🧩 Component Overview
RezUI provides 15+ production-ready components:
| Component | Function | Description |
|---|---|---|
RezUI.Frame |
Main Window | Styled DFrame with custom header and close button |
RezUI.Panel |
Container | Styled DPanel for grouping elements |
RezUI.Scroll |
Scrolling | Custom scrollable panel with minimal scrollbar |
RezUI.Button |
Interaction | Button with hover/down states (normal/ghost) |
RezUI.IconButton |
Icon Actions | Square button for icons or single characters |
RezUI.Label |
Text Display | Auto-wrapping text label |
RezUI.TextEntry |
Text Input | Styled text input with placeholder support |
RezUI.Dropdown |
Selection | ComboBox with custom styling |
RezUI.Switch |
Toggle | Animated on/off switch |
RezUI.RoundToggle |
Checkbox | Round checkbox alternative |
RezUI.Slider |
Value Input | Numeric slider with label |
RezUI.ProgressBar |
Progress | Animated progress bar |
RezUI.LoadingBar |
Loading | Indeterminate loading animation |
RezUI.Table |
Data Display | Sortable data table with zebra stripes |
RezUI.Toast |
Notification | Slide-in toast notifications |
RezUI.Tabs |
Navigation | Tabbed interface (top/sidebar) |
RezUI.Stack |
Navigation | Push/pop navigation system |
RezUI.Divider |
Separator | Horizontal line with glow |
🪟 Frames
Create styled windows with custom headers and close buttons.
RezUI.Frame
RezUI.Frame(title, width, height, subtitle)
| Parameter | Type | Default | Description |
|---|---|---|---|
| title | string | "MENU" | Main window title |
| width | number | 520 | Window width in pixels |
| height | number | 320 | Window height in pixels |
| subtitle | string | "" | Subtitle in accent color |
→ Returns: DFrame (extended with custom paint)
-- Basic window
local frame = RezUI.Frame("Settings", 600, 500)
-- Window with subtitle
local frame = RezUI.Frame("Admin Panel", 800, 600, "MANAGEMENT SYSTEM")
-- The frame includes:
-- - Custom painted background with shadow
-- - Styled close button (X) in top-right
-- - Title and subtitle rendering
-- - Accent glow line under header
Frame Features
- Automatically centered and made popup
- Draggable by default
- Custom close button with hover effect
- Responsive close button positioning on resize
- Shadow effect for depth
📦 Containers & Layout
RezUI.Panel
RezUI.Panel(parent, x, y, w, h)
| Parameter | Type | Description |
|---|---|---|
| parent | Panel | Parent panel |
| x, y | number | Position (optional, uses Dock=FILL if omitted) |
| w, h | number | Size (optional) |
→ Returns: DPanel (with dark background paint)
RezUI.Scroll
RezUI.Scroll(parent)
Creates a DScrollPanel with minimalist custom scrollbar.
→ Returns: DScrollPanel
RezUI.Label
RezUI.Label(parent, text)
Auto-wrapping label with RezUI styling.
→ Returns: DLabel
RezUI.Divider
RezUI.Divider(parent, height)
Horizontal divider line with accent glow.
→ Returns: DPanel
-- Scrollable content area
local scroll = RezUI.Scroll(frame)
scroll:Dock(FILL)
scroll:DockMargin(15, 70, 15, 15)
-- Add panels inside scroll
for i = 1, 10 do
local card = RezUI.Panel(scroll)
card:Dock(TOP)
card:SetTall(80)
card:DockMargin(0, 0, 0, 10)
local lbl = RezUI.Label(card, "Item " .. i)
lbl:Dock(FILL)
lbl:DockMargin(15, 15, 15, 15)
end
⌨️ Input Components
Buttons
RezUI.Button
RezUI.Button(parent, text, onClick, kind)
| Parameter | Type | Description |
|---|---|---|
| text | string | Button label |
| onClick | function | Callback when clicked |
| kind | string | "default" or "ghost" (subtle style) |
RezUI.IconButton
RezUI.IconButton(parent, text, onClick)
Square button designed for icons (⚙, ✕, ▶, etc.)
-- Normal button
local btn = RezUI.Button(panel, "Save Settings", function()
print("Saved!")
RezUI.Toast("Settings saved!", 2, "success")
end)
btn:Dock(BOTTOM)
btn:SetTall(40)
-- Ghost button (subtle)
local cancel = RezUI.Button(panel, "Cancel", function()
frame:Close()
end, "ghost")
-- Icon button
local settings = RezUI.IconButton(panel, "⚙", function()
print("Open settings")
end)
settings:SetSize(40, 40)
Text Input
RezUI.TextEntry
RezUI.TextEntry(parent, placeholder)
Styled text input with placeholder and cursor color.
local input = RezUI.TextEntry(panel, "Enter your name...")
input:Dock(TOP)
input:SetTall(35)
input.OnEnter = function(self)
print("You entered:", self:GetValue())
end
Dropdown
RezUI.Dropdown
RezUI.Dropdown(parent, options, onSelect)
| Parameter | Type | Description |
|---|---|---|
| options | table | Array of string options |
| onSelect | function | Callback(index, value) |
local dd = RezUI.Dropdown(panel, {"Low", "Medium", "High", "Ultra"}, function(idx, val)
print("Selected:", idx, val)
end)
dd:Dock(TOP)
dd:SetTall(35)
Slider
RezUI.Slider
RezUI.Slider(parent, text, min, max, value, decimals, onChange)
local slider = RezUI.Slider(panel, "Volume", 0, 100, 75, 0, function(val)
print("Volume:", val)
end)
slider:Dock(TOP)
slider:DockMargin(0, 10, 0, 10)
🔄 Toggles & Switches
Animated Switch
RezUI.Switch
RezUI.Switch(parent, text, default, onChange)
iOS-style animated switch with smooth sliding knob.
| Parameter | Type | Description |
|---|---|---|
| text | string | Label text |
| default | boolean | Initial state |
| onChange | function | Callback(value) |
Round Toggle
RezUI.RoundToggle
RezUI.RoundToggle(parent, text, default, onChange)
Round checkbox-style toggle.
-- Animated switch
local sw = RezUI.Switch(panel, "Enable Notifications", true, function(value)
print("Notifications:", value)
end)
sw:Dock(TOP)
sw:DockMargin(0, 10, 0, 10)
-- Get/Set value programmatically
sw:SetValue(false)
local currentValue = sw:GetValue()
-- Round toggle
local toggle = RezUI.RoundToggle(panel, "Auto-save", false, function(value)
print("Auto-save:", value)
end)
toggle:Dock(TOP)
Choosing Between Switch and RoundToggle
Switch: Use for settings that take effect immediately
RoundToggle: Use for options in forms or checkboxes
📊 Progress & Loading Bars
Progress Bar
RezUI.ProgressBar
RezUI.ProgressBar(parent, x, y, w, h)
Determinate progress bar with optional text overlay.
Methods:
:SetValue(0-1)- Set progress (0.0 to 1.0):SetText(string)- Set overlay text
Loading Bar
RezUI.LoadingBar
RezUI.LoadingBar(parent, x, y, w, h)
Indeterminate loading animation (sliding segment).
Properties:
.Speed- Animation speed (default: 1.2).Segment- Segment width ratio (default: 0.25)
-- Progress bar with live updating
local progress = RezUI.ProgressBar(panel)
progress:Dock(TOP)
progress:SetTall(16)
progress:SetText("Loading...")
local value = 0
panel.Think = function()
value = value + FrameTime() * 0.2
if value >= 1 then
value = 0
RezUI.Toast("Complete!", 1.5, "success")
end
progress:SetValue(value)
progress:SetText(math.floor(value * 100) .. "%")
end
-- Indeterminate loading bar
local loading = RezUI.LoadingBar(panel)
loading:Dock(TOP)
loading:DockMargin(0, 10, 0, 0)
loading:SetTall(12)
loading.Speed = 1.5 -- Faster animation
Real-World Example: File Download
local downloadFrame = RezUI.Frame("Downloading", 450, 180)
local panel = RezUI.Panel(downloadFrame, 15, 70, 420, 95)
local lbl = RezUI.Label(panel, "Downloading resources...")
lbl:Dock(TOP)
lbl:DockMargin(15, 15, 15, 10)
local bar = RezUI.ProgressBar(panel)
bar:Dock(TOP)
bar:DockMargin(15, 0, 15, 15)
bar:SetTall(18)
-- Simulate download progress
local progress = 0
timer.Create("download_sim", 0.05, 0, function()
progress = progress + math.random(1, 3) / 100
if progress >= 1 then
progress = 1
timer.Remove("download_sim")
RezUI.Toast("Download complete!", 2, "success")
timer.Simple(1, function() downloadFrame:Close() end)
end
bar:SetValue(progress)
bar:SetText(math.floor(progress * 100) .. "% - " .. math.floor(progress * 1500) .. " KB")
end)
📋 Data Tables
Create sortable, styled tables with zebra striping and row highlighting.
RezUI.Table
RezUI.Table(parent)
Methods:
| Method | Parameters | Description |
|---|---|---|
:SetColumns(cols) |
table | Define column structure |
:SetRows(rows) |
table | Set table data |
:SetZebra(bool) |
boolean | Toggle alternating row colors |
:SetRowHighlight(fn) |
function | Custom highlight function |
:SetRowHeight(h) |
number | Set row height in pixels |
Column Definition
-- Column structure
{
key = "player_name", -- Data key
title = "PLAYER", -- Header text
w = 200, -- Width in pixels
align = TEXT_ALIGN_LEFT, -- Alignment
colorFn = function(row) -- Custom text color
return row.isAdmin and Color(255, 100, 100) or nil
end
}
Complete Example: Player List
local table = RezUI.Table(panel)
table:Dock(FILL)
-- Define columns
table:SetColumns({
{ key = "rank", title = "RANK", w = 70, align = TEXT_ALIGN_CENTER },
{ key = "name", title = "PLAYER NAME", w = 280, align = TEXT_ALIGN_LEFT },
{ key = "kills", title = "KILLS", w = 90, align = TEXT_ALIGN_CENTER,
colorFn = function() return RezUI.Colors.ACCENT end },
{ key = "deaths", title = "DEATHS", w = 90, align = TEXT_ALIGN_CENTER,
colorFn = function() return RezUI.Colors.TEXT_GRAY end },
{ key = "kd", title = "K/D", w = 80, align = TEXT_ALIGN_CENTER }
})
-- Sample data
local players = {}
for i = 1, 15 do
local kills = math.random(5, 50)
local deaths = math.random(3, 40)
players[i] = {
rank = "#" .. i,
name = "Player_" .. math.random(1000, 9999),
kills = kills,
deaths = deaths,
kd = math.Round(kills / math.max(deaths, 1), 2),
isLocalPlayer = (i == 3) -- Highlight current player
}
end
table:SetRows(players)
-- Highlight local player
table:SetRowHighlight(function(row)
return row.isLocalPlayer
end)
-- Enable zebra striping
table:SetZebra(true)
Dynamic Table Updates
-- Update table data dynamically
local function RefreshTable()
local newData = {}
for k, ply in ipairs(player.GetAll()) do
newData[k] = {
rank = "#" .. k,
name = ply:Nick(),
kills = ply:Frags(),
deaths = ply:Deaths(),
kd = math.Round(ply:Frags() / math.max(ply:Deaths(), 1), 2),
isLocalPlayer = (ply == LocalPlayer())
}
end
table:SetRows(newData)
end
-- Auto-refresh every 5 seconds
timer.Create("table_refresh", 5, 0, RefreshTable)
🔔 Toast Notifications
Animated slide-in notifications with auto-dismiss and stacking.
RezUI.Toast
RezUI.Toast(text, seconds, kind)
| Parameter | Type | Description |
|---|---|---|
| text | string | Notification message |
| seconds | number | Display duration (default: 2.5) |
| kind | string | "info", "success", "warn", "error" |
-- Different toast types
RezUI.Toast("Information message", 2.0, "info")
RezUI.Toast("Success! Data saved", 2.5, "success")
RezUI.Toast("Warning: Low disk space", 3.0, "warn")
RezUI.Toast("Error: Connection failed", 4.0, "error")
-- Default (uses accent color)
RezUI.Toast("Hello World!")
Toast Configuration
Customize toast behavior globally:
-- Adjust toast settings
RezUI.ToastCfg.w = 400 -- Width
RezUI.ToastCfg.h = 60 -- Height
RezUI.ToastCfg.max = 8 -- Max concurrent toasts
RezUI.ToastCfg.slide_in = 0.2 -- Slide-in duration
RezUI.ToastCfg.slide_out = 0.2 -- Slide-out duration
RezUI.ToastCfg.gap = 10 -- Gap between toasts
Features
- Automatically stacks in bottom-right corner
- Click any toast to dismiss it early
- Smooth slide animations
- Auto-removes oldest when limit reached
- Responsive to screen size changes
Practical Examples
-- Form validation
local function ValidateForm(name, email)
if name == "" then
RezUI.Toast("Name is required!", 2, "error")
return false
end
if not string.find(email, "@") then
RezUI.Toast("Invalid email address", 2, "warn")
return false
end
RezUI.Toast("Form submitted!", 2, "success")
return true
end
-- Network events
net.Receive("PlayerJoined", function()
local name = net.ReadString()
RezUI.Toast(name .. " joined the server", 3, "info")
end)
-- Achievement system
local function ShowAchievement(title)
RezUI.Toast("🏆 Achievement: " .. title, 4, "success")
end
📑 Tabbed Interface
Create multi-page interfaces with sidebar or top navigation.
RezUI.Tabs
RezUI.Tabs(parent, options)
| Option | Type | Description |
|---|---|---|
| mode | string | "top" or "side" (default: "top") |
| sidebar_w | number | Sidebar width in pixels (default: 170) |
| tab_h | number | Tab button height (default: 36) |
Methods:
:AddTab(id, title, buildFn)- Add a new tab:Select(id)- Switch to specific tab:GetPanel(id)- Get tab content panel
Example: Sidebar Tabs
local frame = RezUI.Frame("Settings", 900, 600, "SYSTEM CONFIGURATION")
local main = RezUI.Panel(frame, 15, 70, 870, 515)
-- Create sidebar tabs
local tabs = RezUI.Tabs(main, {
mode = "side",
sidebar_w = 220,
tab_h = 40
})
-- Add tabs with content builders
tabs:AddTab("general", "General", function(panel)
local lbl = RezUI.Label(panel, "General settings go here")
lbl:Dock(TOP)
lbl:DockMargin(20, 20, 20, 10)
local sw = RezUI.Switch(panel, "Dark Mode", true, function(v)
print("Dark mode:", v)
end)
sw:Dock(TOP)
sw:DockMargin(20, 0, 20, 10)
end)
tabs:AddTab("graphics", "Graphics", function(panel)
local quality = RezUI.Dropdown(panel, {"Low", "Medium", "High", "Ultra"})
quality:Dock(TOP)
quality:DockMargin(20, 20, 20, 10)
quality:SetTall(35)
end)
tabs:AddTab("audio", "Audio", function(panel)
local volume = RezUI.Slider(panel, "Master Volume", 0, 100, 80, 0)
volume:Dock(TOP)
volume:DockMargin(20, 20, 20, 10)
end)
-- Programmatically switch tabs
tabs:Select("graphics")
Example: Top Tabs
local tabs = RezUI.Tabs(main, {
mode = "top",
tab_h = 42
})
tabs:AddTab("home", "Home", function(p)
-- Content...
end)
tabs:AddTab("settings", "Settings", function(p)
-- Content...
end)
Tab Best Practices
- Use sidebar tabs for 5+ sections
- Use top tabs for 2-4 sections
- Keep tab titles short (1-2 words)
- First tab is auto-selected
🔀 Stack Navigation
Build app-like navigation with push/pop pages and modal-style overlays.
RezUI.Stack
RezUI.Stack(parent)
Methods:
| Method | Parameters | Description |
|---|---|---|
:SetRoot(panel) |
Panel | Set initial/root page |
:Push(fn, opts) |
function, table | Push new page onto stack |
:Pop(opts) |
table | Pop current page, return to previous |
Push Options:
hide_prev- Hide previous page (default: true)dim_prev- Dim previous page with overlay (default: false)anim- Animation: "slide", "fade", or "none" (default: "slide")
Example: Multi-Page Interface
local frame = RezUI.Frame("App", 700, 500)
local main = RezUI.Panel(frame, 15, 70, 670, 415)
local stack = RezUI.Stack(main)
-- Root page (home)
local home = vgui.Create("DPanel", main)
home:Dock(FILL)
home.Paint = function() end
local lbl = RezUI.Label(home, "Welcome to the home page")
lbl:Dock(TOP)
lbl:DockMargin(20, 20, 20, 20)
local openBtn = RezUI.Button(home, "Open Details", function()
-- Push details page
stack:Push(function(page)
local card = RezUI.Panel(page)
card:Dock(FILL)
card:DockMargin(20, 20, 20, 20)
local title = RezUI.Label(card, "Details Page")
title:Dock(TOP)
title:DockMargin(20, 20, 20, 10)
local backBtn = RezUI.Button(card, "← Back", function()
page:Close() -- Calls stack:Pop()
end)
backBtn:Dock(BOTTOM)
backBtn:DockMargin(20, 10, 20, 20)
backBtn:SetTall(40)
end, { hide_prev = true, anim = "slide" })
end)
openBtn:Dock(TOP)
openBtn:DockMargin(20, 0, 20, 10)
openBtn:SetTall(40)
stack:SetRoot(home)
Example: Modal Dialog
-- Show modal with dimmed background
stack:Push(function(page)
-- Create centered modal
local modal = vgui.Create("DPanel", page)
modal:SetSize(450, 300)
modal:Center()
modal.Paint = function(self, w, h)
RezUI.DrawModernBox(0, 0, w, h, RezUI.Colors.BG_PANEL, 10)
end
local title = RezUI.Label(modal, "Confirm Action")
title:SetPos(20, 20)
title:SetWide(410)
local msg = RezUI.Label(modal, "Are you sure you want to continue?")
msg:SetPos(20, 50)
msg:SetWide(410)
local confirm = RezUI.Button(modal, "Confirm", function()
RezUI.Toast("Action confirmed!", 2, "success")
page:Close()
end)
confirm:SetPos(20, 240)
confirm:SetSize(200, 40)
local cancel = RezUI.Button(modal, "Cancel", function()
page:Close()
end, "ghost")
cancel:SetPos(230, 240)
cancel:SetSize(200, 40)
end, { hide_prev = false, dim_prev = true, anim = "fade" })
When to Use Stack Navigation
Perfect for: Wizards, multi-step forms, detail views, modal dialogs
Not ideal for: Simple menus (use Tabs instead)
💡 Complete Examples
1. User Profile Editor
local frame = RezUI.Frame("Profile Editor", 550, 500, "EDIT YOUR PROFILE")
local main = RezUI.Panel(frame, 15, 70, 520, 415)
-- Username input
local userLbl = RezUI.Label(main, "Username")
userLbl:Dock(TOP)
userLbl:DockMargin(20, 20, 20, 5)
local username = RezUI.TextEntry(main, "Enter username...")
username:Dock(TOP)
username:DockMargin(20, 0, 20, 15)
username:SetTall(35)
username:SetValue(LocalPlayer():Nick())
-- Bio input
local bioLbl = RezUI.Label(main, "Bio")
bioLbl:Dock(TOP)
bioLbl:DockMargin(20, 0, 20, 5)
local bio = RezUI.TextEntry(main, "Tell us about yourself...")
bio:Dock(TOP)
bio:DockMargin(20, 0, 20, 15)
bio:SetTall(35)
-- Privacy toggle
local privacy = RezUI.Switch(main, "Public Profile", true, function(v)
print("Public profile:", v)
end)
privacy:Dock(TOP)
privacy:DockMargin(20, 0, 20, 10)
local notifs = RezUI.Switch(main, "Email Notifications", false, function(v)
print("Email notifications:", v)
end)
notifs:Dock(TOP)
notifs:DockMargin(20, 0, 20, 20)
-- Divider
local div = RezUI.Divider(main, 15)
div:Dock(TOP)
div:DockMargin(20, 0, 20, 15)
-- Action buttons
local btnRow = vgui.Create("DPanel", main)
btnRow:Dock(BOTTOM)
btnRow:DockMargin(20, 10, 20, 20)
btnRow:SetTall(40)
btnRow.Paint = function() end
local save = RezUI.Button(btnRow, "Save Changes", function()
if username:GetValue() == "" then
RezUI.Toast("Username cannot be empty!", 2, "error")
return
end
-- Save data (network call here)
RezUI.Toast("Profile updated successfully!", 2.5, "success")
timer.Simple(1, function() frame:Close() end)
end)
save:Dock(LEFT)
save:SetWide(230)
local cancel = RezUI.Button(btnRow, "Cancel", function()
frame:Close()
end, "ghost")
cancel:Dock(RIGHT)
cancel:SetWide(230)
2. Admin Player Manager
local frame = RezUI.Frame("Player Manager", 1000, 650, "ADMIN PANEL")
local main = RezUI.Panel(frame, 15, 70, 970, 565)
-- Top controls
local controls = RezUI.Panel(main)
controls:Dock(TOP)
controls:SetTall(70)
controls:DockMargin(0, 0, 0, 10)
local search = RezUI.TextEntry(controls, "Search players...")
search:Dock(TOP)
search:DockMargin(15, 15, 15, 10)
search:SetTall(35)
-- Player table
local table = RezUI.Table(main)
table:Dock(FILL)
table:SetColumns({
{ key = "id", title = "ID", w = 60, align = TEXT_ALIGN_CENTER },
{ key = "name", title = "PLAYER NAME", w = 280, align = TEXT_ALIGN_LEFT },
{ key = "rank", title = "RANK", w = 150, align = TEXT_ALIGN_LEFT,
colorFn = function(r) return r.rank == "Admin" and RezUI.Colors.ACCENT or nil end },
{ key = "kills", title = "KILLS", w = 80, align = TEXT_ALIGN_CENTER },
{ key = "deaths", title = "DEATHS", w = 80, align = TEXT_ALIGN_CENTER },
{ key = "playtime", title = "PLAYTIME", w = 120, align = TEXT_ALIGN_CENTER }
})
local function RefreshPlayers()
local rows = {}
for k, ply in ipairs(player.GetAll()) do
local searchText = search:GetValue():lower()
if searchText == "" or string.find(ply:Nick():lower(), searchText, 1, true) then
rows[#rows+1] = {
id = ply:UserID(),
name = ply:Nick(),
rank = ply:IsAdmin() and "Admin" or "User",
kills = ply:Frags(),
deaths = ply:Deaths(),
playtime = string.FormattedTime(ply:TimeConnected(), "%02i:%02i")
}
end
end
table:SetRows(rows)
end
search.OnChange = RefreshPlayers
RefreshPlayers()
-- Auto-refresh
timer.Create("admin_refresh", 3, 0, RefreshPlayers)
3. Shop System with Tabs
local frame = RezUI.Frame("Item Shop", 900, 600, "BUY ITEMS")
local main = RezUI.Panel(frame, 15, 70, 870, 515)
local tabs = RezUI.Tabs(main, { mode = "side", sidebar_w = 200, tab_h = 40 })
-- Weapons tab
tabs:AddTab("weapons", "Weapons", function(p)
local scroll = RezUI.Scroll(p)
scroll:Dock(FILL)
local weapons = {
{ name = "AK-47", price = 2500, dmg = 36 },
{ name = "M4A1", price = 3100, dmg = 33 },
{ name = "AWP", price = 4750, dmg = 115 }
}
for _, wep in ipairs(weapons) do
local card = RezUI.Panel(scroll)
card:Dock(TOP)
card:SetTall(90)
card:DockMargin(10, 10, 10, 0)
local lbl = RezUI.Label(card, wep.name .. "\nDamage: " .. wep.dmg)
lbl:Dock(LEFT)
lbl:DockMargin(15, 15, 15, 15)
lbl:SetWide(300)
local buyBtn = RezUI.Button(card, "Buy $" .. wep.price, function()
RezUI.Toast("Purchased " .. wep.name, 2, "success")
end)
buyBtn:Dock(RIGHT)
buyBtn:DockMargin(10, 15, 15, 15)
buyBtn:SetWide(150)
end
end)
-- Armor tab
tabs:AddTab("armor", "Armor", function(p)
-- Similar structure...
end)
-- Grenades tab
tabs:AddTab("grenades", "Grenades", function(p)
-- Similar structure...
end)
More Examples
Check out test.lua in the library download for a complete demo showing all components in action. Run rezui_test_all in console.