Documentation
Theme tokens
Shared design tokens for robloxui/theme (a subpath of the robloxui npm package) and RuiTheme (vendored for Luau/Wally). These 15 tokens are the single source of truth for RobloxUI styling. The theme is optional — components ship their own tokens; pass --theme to init or add to install the canonical set.
The theme is optional — components ship their own design tokens. Pass --theme to robloxui init or npx robloxui add to install the canonical set, or install manually:
Roblox-TS (npm)
bashnpm install robloxuitsx
import { theme } from "robloxui/theme";Luau (Wally)
With --theme, the CLI vendors the bundled theme into Packages/RuiTheme/init.lua (no Wally dependency). Require it at runtime:
lua
local RuiTheme = require(ReplicatedStorage.Packages.RuiTheme)7 Colors5 Sizes3 Radii
| Name | CSS Variable | Luau Variable | Value | Swatch |
|---|---|---|---|---|
| Primary | --robloxui-primary | RuiPrimary | #0066FF | |
| Secondary | --robloxui-secondary | RuiSecondary | #6B7280 | |
| Accent | --robloxui-accent | RuiAccent | #F59E0B | |
| Success | --robloxui-success | RuiSuccess | #10B981 | |
| Error | --robloxui-error | RuiError | #EF4444 | |
| Background | --robloxui-bg | RuiBg | #0F1117 | |
| Text Primary | --robloxui-text-primary | RuiTextPrimary | #F8FAFC | |
| Font Size Small | --robloxui-font-size-sm | RuiFontSizeSm | 0.875rem (14px) | |
| Font Size Medium | --robloxui-font-size-md | RuiFontSizeMd | 1rem (16px) | |
| Font Size Large | --robloxui-font-size-lg | RuiFontSizeLg | 1.125rem (18px) | |
| Spacing Small | --robloxui-spacing-sm | RuiSpacingSm | 1rem (16px) | |
| Spacing Medium | --robloxui-spacing-md | RuiSpacingMd | 1.5rem (24px) | |
| Radius Small | --robloxui-radius-sm | RuiRadiusSm | 4px | |
| Radius Medium | --robloxui-radius-md | RuiRadiusMd | 8px | |
| Radius Large | --robloxui-radius-lg | RuiRadiusLg | 12px |