CloudyLib
A cloud-themed Roblox UI library. Silky smooth, sky-high scripts — with 12 themes, rich components, and a clean developer API.
12 Cloud Themes
Named after real sky phenomena — Cumulus, Squall, Anvil and more — each with a full colour palette.
Rich Components
Toggle, Slider, Dropdown, ColorPicker, Keybind, Input, Section, Label, Notification and more.
Live Theme Switching
Call Window:ApplyTheme() at any time — every element updates with smooth colour tweens.
Cloud Corner UI
Each window has decorative ☁ corners that tint to match your active theme automatically.
Quick Start
-- 1. Load CloudyLib
local Cloudy = loadstring(game:HttpGet(
"https://raw.githubusercontent.com/YOUR_USERNAME/cloudylib/main/CloudyLib.lua"
))()
-- 2. Create a window
local Window = Cloudy:CreateWindow({
Title = "My Script",
Subtitle = "☁️ Powered by CloudyLib",
Theme = "Cumulus",
})
-- 3. Add a tab and a toggle
local Tab = Window:CreateTab("Main", "⚡")
Tab:CreateToggle({
Name = "Fly",
Default = false,
Callback = function(val) print(val) end,
})Getting Started
Load CloudyLib into any Roblox executor in three steps.
Upload to GitHub
Push CloudyLib.lua to a public repo. Copy the raw URL from the file view.
Load with HttpGet
local Cloudy = loadstring(game:HttpGet(
"https://raw.githubusercontent.com/YOUR_USERNAME/cloudylib/main/CloudyLib.lua"
))()Create your window & tabs
local Window = Cloudy:CreateWindow({ Title="Hub", Theme="Cumulus" })
local Main = Window:CreateTab("Main", "⚡")
local Visuals = Window:CreateTab("Visuals", "👁")CloudyLib.lua source directly into your script instead of using HttpGet.Windows
The window is the root container. All tabs and elements live inside it.
CreateWindow
local Window = Cloudy:CreateWindow({
Title = "My Script",
Subtitle = "☁️ By Me",
Theme = "Cumulus",
Size = UDim2.new(0,620,0,450),
})| Property | Type | Required | Description |
|---|---|---|---|
| Title | string | optional | Topbar title. Default: "CloudyLib" |
| Subtitle | string | optional | Subtitle below title |
| Theme | string | optional | Starting theme. Default: "Cumulus" |
| Size | UDim2 | optional | Custom window size. Default: UDim2.new(0,600,0,430) |
CreateTab
-- CreateTab(name, icon)
local Tab = Window:CreateTab("Main", "⚡")
-- icon is an optional emoji shown in the sidebar. Defaults to ☁️Window Methods
Themes
12 cloud-themed palettes — each named after a real sky phenomenon. Switch any time with Window:ApplyTheme().
Applying a Theme
-- At window creation:
local Window = Cloudy:CreateWindow({ Theme = "Cumulonimbus" })
-- At runtime:
Window:ApplyTheme("Squall")Built-in Theme Selector
Tab:CreateThemeSelector({
Name = "Sky Themes",
Default = "Cumulus",
Callback = function(name) print("Theme:", name) end,
})Elements
CloudyLib provides a complete set of interactive elements. Each returns a handle with :Set() and :Get() methods.
| Element | Method | Returns |
|---|---|---|
| Toggle | Tab:CreateToggle(cfg) | boolean via Callback |
| Slider | Tab:CreateSlider(cfg) | number via Callback |
| Button | Tab:CreateButton(cfg) | fires Callback on click |
| Input | Tab:CreateInput(cfg) | string via Callback |
| Dropdown | Tab:CreateDropdown(cfg) | string via Callback |
| Keybind | Tab:CreateKeybind(cfg) | KeyCode via Callback |
| ColorPicker | Tab:CreateColorPicker(cfg) | Color3 via Callback |
| Section | Tab:CreateSection(name) | — (decorative) |
| Label | Tab:CreateLabel(cfg) | — (display only) |
| ThemeSelector | Tab:CreateThemeSelector(cfg) | theme name via Callback |
Binds
All elements bind to UserInputService. CloudyLib handles connection automatically.
Programmatic Updates
local toggle = Tab:CreateToggle({ Name="Fly", Default=false })
-- Update UI + fire callback:
toggle:Set(true)
-- Read silently:
print(toggle.Value)Toggle
A smooth on/off switch with optional description and ripple click feedback.
local toggle = Tab:CreateToggle({
Name = "Fly",
Description = "Let the clouds carry you",
Default = false,
Callback = function(value)
print("Fly:", value)
end,
})
toggle:Set(true)| Property | Type | Required | Description |
|---|---|---|---|
| Name | string | required | Label on the card |
| Description | string | optional | Subtext below the label |
| Default | boolean | optional | Initial state. Default: false |
| Callback | function(bool) | optional | Fires on every state change |
Slider
Draggable range input with gradient fill and optional suffix label.
local slider = Tab:CreateSlider({
Name = "Walk Speed",
Min = 16,
Max = 500,
Default = 16,
Suffix = " sps",
Rounding = 0,
Callback = function(v)
game.Players.LocalPlayer.Character.Humanoid.WalkSpeed = v
end,
})
slider:Set(100)| Property | Type | Required | Description |
|---|---|---|---|
| Name | string | required | Label above the track |
| Min / Max | number | required | Value range |
| Default | number | optional | Starting value |
| Suffix | string | optional | Appended to display value e.g. " sps" |
| Rounding | number | optional | Decimal places (0 = integer) |
| Callback | function(number) | optional | Fires on every drag update |
Button
A clickable card with ripple animation and optional emoji icon.
Tab:CreateButton({
Name = "Rejoin",
Icon = "☁️",
Callback = function()
game:GetService("TeleportService"):Teleport(game.PlaceId)
end,
})| Property | Type | Required | Description |
|---|---|---|---|
| Name | string | required | Button label |
| Icon | string | optional | Emoji prefix shown before the label |
| Callback | function() | optional | Fires on click |
Input
Text entry field with placeholder and focus-lost callback.
Tab:CreateInput({
Name = "Script Title",
Placeholder = "Enter title…",
Default = "",
ClearOnFocus = false,
Callback = function(text, enterPressed)
if enterPressed then print("Set:", text) end
end,
})| Property | Type | Required | Description |
|---|---|---|---|
| Name | string | required | Label above the text box |
| Placeholder | string | optional | Greyed hint text |
| Default | string | optional | Pre-filled text |
| ClearOnFocus | boolean | optional | Clears box when focused |
| Callback | function(text, enter) | optional | Fires on FocusLost |
Dropdown
Animated expandable option list with smooth Back-eased reveal.
Tab:CreateDropdown({
Name = "ESP Style",
Options = {"Box", "Corners", "Skeleton", "Glow"},
Default = "Box",
Callback = function(opt) print(opt) end,
})| Property | Type | Required | Description |
|---|---|---|---|
| Name | string | required | Label for the dropdown |
| Options | table | required | Array of string options |
| Default | string | optional | Pre-selected option |
| Callback | function(string) | optional | Fires on selection |
Keybind
Click-to-listen key capture. Press any key to bind. Fires OnPress every time the key is hit.
Tab:CreateKeybind({
Name = "Toggle UI",
Default = "RightAlt",
OnPress = function()
Window.Main.Visible = not Window.Main.Visible
end,
Callback = function(key)
print("New bind:", key.Name)
end,
})| Property | Type | Required | Description |
|---|---|---|---|
| Name | string | required | Label for the keybind row |
| Default | string | optional | Starting KeyCode name e.g. "RightAlt" |
| OnPress | function() | optional | Fires every time the bound key is pressed |
| Callback | function(KeyCode) | optional | Fires when the bind key is changed |
ColorPicker
HSV sliders (Hue, Saturation, Value) with a live colour swatch preview. Click the swatch to expand/collapse.
Tab:CreateColorPicker({
Name = "ESP Color",
Default = Color3.fromRGB(130, 176, 255),
Callback = function(color)
print(color) -- Color3
end,
})| Property | Type | Required | Description |
|---|---|---|---|
| Name | string | required | Label for the row |
| Default | Color3 | optional | Initial colour |
| Callback | function(Color3) | optional | Fires continuously during H/S/V drag |
Textual Elements
Non-interactive elements for structuring and annotating your tab layout.
Section
Tab:CreateSection("Movement")Label
Tab:CreateLabel({
Text = "CloudyLib v1.0 — drift at altitude.",
})ThemeSelector
Adds a dropdown + colour swatches for all 12 cloud themes directly into a tab.
Tab:CreateThemeSelector({
Name = "Sky Themes",
Default = "Cumulus",
Callback = function(name)
Window:Notify({ Title="Theme", Content="Now drifting in: "..name })
end,
})Notification
Toast notification with animated gradient progress bar. Multiple stack in the bottom-right.
Window:Notify({
Title = "CloudyLib Loaded",
Content = "Drifting at altitude ☁️",
Duration = 5,
})| Property | Type | Required | Description |
|---|---|---|---|
| Title | string | optional | Bold notification title |
| Content | string | optional | Body text (wraps automatically) |
| Duration | number | optional | Auto-dismiss after N seconds. Default: 4 |
Flags
Assign a Flag to any element to track its value in Window.Flags — useful for config saving.
-- Assign flags:
Tab:CreateToggle({ Name="Fly", Flag="Fly", Default=false })
Tab:CreateSlider({ Name="Speed", Flag="Speed", Min=16, Max=500, Default=16 })
-- Read from anywhere:
print(Window.Flags.Fly) -- boolean
print(Window.Flags.Speed) -- number
-- Save config:
local json = game:GetService("HttpService"):JSONEncode(Window.Flags)
writefile("cloudy_config.json", json)Methods
Every element returned by CloudyLib exposes :Set() for programmatic control.
All Elements
Window
Example
local fly = Tab:CreateToggle({ Name="Fly", Default=false })
-- Turn on from anywhere:
fly:Set(true)
-- Check current state:
print(fly.Value) -- trueTheming API
Read active theme colours and switch themes at runtime.
Switching at Runtime
Window:ApplyTheme("Cumulonimbus") -- stormy purple
Window:ApplyTheme("Squall") -- deep cyan
Window:ApplyTheme("Anvil") -- blazing yellowAll 12 Themes
| Name | Vibe | Primary |
|---|---|---|
| Cumulus | ☁️ Soft daytime blue | #8BB4FF |
| Cirrus | 🌅 Warm golden hour | #FFB964 |
| Cumulonimbus | 🌩️ Dark stormy purple | #A078FF |
| Stratus | 🌸 Rosy dawn pink | #FF8CAF |
| Cirrostratus | ❄️ Ice crystal blue | #B9E6FF |
| Nimbostratus | 🌋 Volcanic red-orange | #FF643C |
| Fogbank | 🌿 Misty morning green | #64D2A0 |
| Noctilucent | 🌙 Moonlit night blue | #6491DC |
| Iridescent | 🌈 Rainbow-edge purple | #B478FF |
| Anvil | ☀️ Blazing noon yellow | #FFD737 |
| Overcast | 🩶 Flat grey overcast | #9BAAC3 |
| Squall | 🌊 Deep sea cyan | #32B9D2 |